import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/main/model/main_model.dart';
import 'package:fcs/pages/widgets/display_text.dart';
import 'package:fcs/pages/widgets/fcs_id_icon.dart';
import 'package:fcs/pages/widgets/local_app_bar.dart';
import 'package:fcs/pages/widgets/local_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class BuyingOnlinePage extends StatefulWidget {
  @override
  _BuyingOnlinePagetate createState() => _BuyingOnlinePagetate();
}

class _BuyingOnlinePagetate extends State<BuyingOnlinePage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(vsync: this, length: 2);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    MainModel mainModel = Provider.of<MainModel>(context);

    final phoneNumberBox = DisplayText(
      text: mainModel.user?.phone,
      labelTextKey: "contact.phone",
      iconData: Icons.location_on,
    );
    final nameBox = Center(
        child: Text(
      mainModel.user?.name ?? "",
      style: TextStyle(fontSize: 18, color: primaryColor),
    ));
    final fcsIdBox = DisplayText(
      text: mainModel.user?.fcsID,
      labelTextKey: "customer.fcs.id",
      icon: FcsIDIcon(),
    );
    final shippingAddressBox = DisplayText(
      text: mainModel.setting?.usaAddress,
      labelTextKey: "profile.usa.shipping.address",
      iconData: Icons.location_on,
    );
    final instructionBox = Container(
      padding: EdgeInsets.only(left: 10, top: 30, bottom: 10),
      child: Center(
        child: Wrap(
          children: <Widget>[
            LocalText(
              context,
              'buy_online.buying_instruction',
              color: labelColor,
              fontSize: 15,
            )
          ],
        ),
      ),
    );

    return Scaffold(
      appBar: LocalAppBar(
          labelKey: "buy_online.title",
          backgroundColor: Colors.white,
          arrowColor: primaryColor,
          labelColor: primaryColor),
      body: ListView(
        shrinkWrap: true,
        padding: EdgeInsets.only(top: 10, left: 10, right: 10),
        children: <Widget>[
          nameBox,
          phoneNumberBox,
          fcsIdBox,
          shippingAddressBox,
          instructionBox,
          new Container(
            decoration: new BoxDecoration(color: Colors.white),
            child: new TabBar.secondary(
              labelPadding: EdgeInsets.all(7),
              dividerColor: Colors.grey.shade200,
              indicatorColor: primaryColor,
              labelColor: primaryColor,
              labelStyle: TextStyle(fontWeight: FontWeight.bold),
              controller: _tabController,
              tabs: [
                LocalText(context, "buy_online.fullname", color: primaryColor),
                LocalText(context, "buy_online.first.last",
                    color: primaryColor),
              ],
            ),
          ),
          new Container(
            padding: EdgeInsets.only(top: 10),
            height: 500,
            width: 500,
            child: new TabBarView(
              controller: _tabController,
              children: <Widget>[
                Container(
                  child: Image.asset('assets/buying_online_with_full_name.png',
                      fit: BoxFit.contain),
                ),
                Container(
                  child: Image.asset(
                      'assets/buying_online_with_first_last_name.png',
                      fit: BoxFit.contain),
                ),
              ],
            ),
          ),
          SizedBox(height: 10)
        ],
      ),
    );
  }
}