import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/main/model/main_model.dart';
import 'package:fcs/pages/main/util.dart';
import 'package:fcs/pages/widgets/display_text.dart';
import 'package:fcs/pages/widgets/fcs_id_icon.dart';
import 'package:fcs/pages/widgets/local_text.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 {
  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: getLocalString(context, "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: getLocalString(context, "customer.fcs.id"),
      icon: FcsIDIcon(),
    );
    final shippingAddressBox = DisplayText(
      text: mainModel.setting.usaAddress,
      labelTextKey: getLocalString(context, "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: AppBar(
        centerTitle: true,
        leading: new IconButton(
          icon: new Icon(
            Icons.close,
            color: primaryColor,
          ),
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: LocalText(
          context,
          "buy_online.title",
          fontSize: 20,
          color: primaryColor,
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
      ),
      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(
              // indicatorColor: primaryColor,
              labelColor: primaryColor,
              labelStyle: TextStyle(fontWeight: FontWeight.bold),
              unselectedLabelColor: Colors.grey,
              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)
        ],
      ),
    );
  }
}