import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:intl/intl.dart';
import 'package:logging/logging.dart';
import 'package:provider/provider.dart';
import 'dart:math' as math;
import 'package:fcs/charts/bar_chart.dart';
import 'package:fcs/charts/delivery_do_line.dart';
import 'package:fcs/charts/delivery_do_summary.dart';
import 'package:fcs/charts/delivery_line.dart';
import 'package:fcs/charts/delivery_summary.dart';
import 'package:fcs/charts/do_line.dart';
import 'package:fcs/charts/po_balance_chart.dart';
import 'package:fcs/charts/po_line.dart';
import 'package:fcs/charts/revenue_line.dart';
import 'package:fcs/model/language_model.dart';
import 'package:fcs/model/product_model.dart';
import 'package:fcs/pages/banks/banks.dart';
import 'package:fcs/pages/buyer_list.dart';
import 'package:fcs/pages/contact.dart';
import 'package:fcs/pages/delivery/delivery_list.dart';
import 'package:fcs/pages/manual/manual_page.dart';
import 'package:fcs/pages/notification_list.dart';
import 'package:fcs/pages/term.dart';
import 'package:fcs/reports/report_list.dart';
import 'package:fcs/widget/banner.dart';
import 'package:fcs/widget/local_text.dart';
import 'package:fcs/widget/localization/app_translations.dart';
import 'package:fcs/widget/offline_redirect.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:intl/intl.dart';
import 'package:logging/logging.dart';
import 'package:provider/provider.dart';

import '../theme/theme.dart';
import 'announcement_list.dart';
import 'buying_online.dart';
import 'do/do_list.dart';
import 'my_registeration.dart';
import 'pd/pd_list.dart';
import 'po/shipment_list.dart';
import 'products_list.dart';
import 'profile_page.dart';
import 'signin_page.dart';
import 'staff_list.dart';

import 'fcs_profile_page.dart';
import 'pd/pd_list.dart';
import 'pickup_list.dart';
import 'products_list.dart';
import 'profile_page.dart';
import 'shipment_rates.dart';
import 'storage/storage_list.dart';
import 'user_list.dart';

final msgLog = Logger('backgroundMessageHandler');

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

typedef BtnCallback();

class _HomePageState extends State<HomePage> {
  final log = Logger('_HomePageState');

  @override
  void initState() {
    super.initState();
  }

  void dispose() {
    super.dispose();
  }

  static final List<String> chartDropdownItems = [
    'Last 7 days',
    'Last month',
    'Last three months'
  ];
  String actualDropdown = chartDropdownItems[0];
  int actualChart = 0;
  final numberFormatter = new NumberFormat("#,###");

  String pin;

  @override
  Widget build(BuildContext context) {
    final helpBtn = _buildBtn2("manual.title",
        icon: FontAwesomeIcons.readme,
        imgIcon: Image.asset(
          "assets/manual.png",
          width: 40,
          height: 40,
          color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => ManualPage()))
        // btnCallback: () => Navigator.of(context)
        //     .push(MaterialPageRoute(builder: (_) => TestList()))
        );
    final announcementBtn = _buildBtn2("announcement.title",
        icon: Icons.announcement,
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => AnnouncementList())));

    final buyerBtn = _buildBtn("buyer.title",
        imgIcon: Image.asset(
          "assets/buyer.png",
          width: 40,
          height: 40,
          color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => BuyerList())));

    final reportBtn = _buildBtn2("report.title",
        icon: FontAwesomeIcons.paperPlane,
        imgIcon: Image.asset(
          "assets/report.png",
          width: 50,
          height: 50,
          // color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => ReportList())));

    final pickUpBtn = _buildBtn("pickup.title",
        icon: FontAwesomeIcons.directions,
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => PickUpList())));

    final shipmentCostBtn = _buildBtn("pickup.title",
        icon: FontAwesomeIcons.ship,
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => ShipmentRates())));

    final fcsProfileBtn = _buildBtn("profile.title",
        icon: Icons.account_circle,
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => FCSProfilePage())));

    final myRegBtn = _buildBtn("myreg.title",
        imgIcon: Image.asset(
          "assets/reg.png",
          width: 40,
          height: 30,
          color: primaryColor,
        ),
        btnCallback: () async {});

    final posBtn = _buildBtn("po.title",
        imgIcon: Image.asset(
          "assets/pay.png",
          width: 40,
          height: 40,
          color: primaryColor,
        ),
        btnCallback: () {});

    final dosBtn = _buildBtn("do.title",
        imgIcon: Image.asset(
          "assets/do.png",
          width: 40,
          height: 40,
          color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => DOList())));

    final shipmentBtn = _buildBtn("shipment.title",
        imgIcon: Image.asset(
          "assets/truck.png",
          width: 50,
          height: 50,
          color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => ShipmentList())));

    final storageBtn = _buildBtn("storage.title",
        imgIcon: Image.asset(
          "assets/inventory.png",
          width: 40,
          height: 40,
          color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => StorageList())));

    final pdosBtn = _buildBtn("pd.title",
        imgIcon: Image.asset(
          "assets/pdo.png",
          width: 40,
          height: 40,
          color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => PDList())));

    
    final termBtn = _buildBtn2("term.title",
        icon: FontAwesomeIcons.fileContract,
        imgIcon: Image.asset(
          "assets/term.png",
          width: 40,
          height: 30,
          color: primaryColor,
        ), btnCallback: () {
      Navigator.push(context, MaterialPageRoute(builder: (context) => Term()));
    });

    final userBtn =
        _buildBtn("users.title", icon: Icons.group, btnCallback: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => UserList()),
      );
    });

    final signinBtn = _buildBtn2("login",
        icon: FontAwesomeIcons.signInAlt,
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => SigninPage())));

    final buyingBtn =
        _buildBtn2("buy_online", icon: Icons.person, btnCallback: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => BuyingOnlinePage()),
      );
    });

    final notiBtn = _buildBtn2("notifications.title", icon: Icons.notifications,
        btnCallback: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => NotificationList()),
      );
    });

    final staffBtn = _buildBtn("staff.title",
        imgIcon: Image.asset(
          "assets/employee.png",
          width: 40,
          height: 40,
          color: primaryColor,
        ),
        btnCallback: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => StaffList())));

    
    final _bankAccountsBtn = _buildBtn2("banks.title",
        icon: FontAwesomeIcons.moneyCheck, btnCallback: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => BankAccounts()),
      );
    });

    List<Widget> widgets = [helpBtn];
    widgets.add(signinBtn);
    widgets.add(buyingBtn);
    widgets.add(shipmentBtn);
    widgets.add(notiBtn);
    widgets.add(staffBtn);
    // widgets.add(_bankAccountsBtn);
    widgets.add(announcementBtn);
    widgets.add(pickUpBtn);
    widgets.add(fcsProfileBtn);
    widgets.add(shipmentCostBtn);
    widgets.add(reportBtn);
    widgets.add(termBtn);
    widgets.add(_bankAccountsBtn);

    var revenueChart = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[RevenueLineChart()],
        ));

    var productListBox = Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              LocalText(context, 'products.prices', color: primaryColor),
              Row(
                children: <Widget>[
                  LocalText(context, 'products.gas',
                      color: Colors.black,
                      fontSize: 19,
                      fontWeight: FontWeight.w700),
                  Consumer<ProductModel>(builder: (context, model, child) {
                    return Text('   ${model.products.length}',
                        style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w700,
                            fontSize: 19.0));
                  }),
                ],
              ),
            ],
          ),
          Material(
              color: thirdColor,
              borderRadius: BorderRadius.circular(10.0),
              child: Center(
                  child: Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: //Icon(Icons.timeline, color: Colors.white, size: 30.0),
                          Image.asset(
                        "assets/product.png",
                        width: 60,
                        height: 70,
                        color: Colors.white,
                      ))))
        ]);

    var poqtyByProductChart = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[BarChart()],
        ));

    var poChart = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[POLineChart()],
        ));

    var doChart = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[DOLineChart()],
        ));

    var deliveryChart = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[DeliveryBarChart()],
        ));

    var deliveryDOChart = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[DODeliveryLineChart()],
        ));

    var deliveryDoSummary = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[DeliveryDoSummaryChart()],
        ));
    var deliverySummary = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[DeliverySummary()],
        ));
    var poBalancebyBuyerChart = Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[POBalanceChart()],
        ));
    List<Widget> chartWidgets = [];

    return OfflineRedirect(
      child: FlavorBanner(
        child: Scaffold(
            appBar: AppBar(
                elevation: 0,
                backgroundColor: primaryColor,
                title: ClipRRect(
                  child: Image.asset("assets/logo.jpg", height: 40),
                  borderRadius: new BorderRadius.circular(35.0),
                ),
                actions: <Widget>[
                  IconButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => Contact()),
                      );
                    },
                    iconSize: 30,
                    icon: Icon(Icons.notifications),
                  ),
                  IconButton(
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => Profile()),
                      );
                    },
                    iconSize: 30,
                    icon: Icon(Icons.tune),
                  ),
                ]),
            body: Container(
                decoration: BoxDecoration(
                  gradient:
                      // RadialGradient(
                      //   center: const Alignment(-0.7, 0.6), // near the top right
                      //   radius: 0.6,
                      //   colors: [
                      //     secondaryColor,
                      //     primaryColor, // yellow sun
                      //   ],
                      //   stops: [0.4, 1.0],
                      // )
                      //     LinearGradient(
                      //   begin: Alignment.topCenter,
                      //   end: Alignment
                      //       .bottomCenter, // 10% of the width, so there are ten blinds.
                      //   colors: [
                      //     Color(0xd0272262),
                      //     Color(0xfa272262),
                      //   ], // whitish to gray
                      // ),
                      SweepGradient(
                    center: FractionalOffset.centerLeft,
                    startAngle: 0.0,
                    endAngle: math.pi * 2,
                    colors: const <Color>[
                      secondaryColor,
                      primaryColor,
                      secondaryColor,
                      primaryColor,
                      secondaryColor,
                    ],
                    stops: const <double>[0.0, 0.25, 0.5, 0.75, 1.0],
                  ),
                ),
                child: ListView(children: [
                  Wrap(
                    children: widgets,
                  ),
                ])
                // child: StaggeredGridView.count(
                //   crossAxisCount: 3,
                //   crossAxisSpacing: 12.0,
                //   mainAxisSpacing: 12.0,
                //   padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
                //   children: <Widget>[
                //     _buildTile(
                //       Padding(
                //         padding: const EdgeInsets.all(20.0),
                //         child: productListBox,
                //       ),
                //       onTap: () => Navigator.of(context).push(
                //           MaterialPageRoute(builder: (_) => ProductsList())),
                //     ),
                //     new GridView.count(
                //       shrinkWrap: true,
                //       scrollDirection: Axis.horizontal,
                //       crossAxisCount: 1,
                //       crossAxisSpacing: 12,
                //       mainAxisSpacing: 12,
                //       padding: EdgeInsets.only(bottom: 5, left: 10, right: 5),
                //       children: widgets,
                //     ),
                //     Container(
                //       color:Colors.red
                //     ),

                //     _buildTile(
                //       PageView(
                //         children: chartWidgets,
                //       ),
                //     ),
                //   ],
                //   staggeredTiles: [
                //     StaggeredTile.extent(5, 110.0),
                //     StaggeredTile.extent(3, 110.0),
                //     StaggeredTile.extent(3, 250.0),
                //   ],
                // ),
                )),
      ),
    );
  }

  Widget _buildTile(Widget child, {Function() onTap}) {
    return Material(
        elevation: 0,
        borderRadius: BorderRadius.circular(12.0),
        // shadowColor: Colors.transparent,
        color: Colors.transparent,
        child: InkWell(
            onTap: onTap != null
                ? () => onTap()
                : () {
                    log.info('Not set yet');
                  },
            child: child));
  }

  Widget _buildBtn(String title,
      {Image imgIcon, IconData icon, BtnCallback btnCallback}) {
    var languageModel = Provider.of<LanguageModel>(context);
    return _buildTile(
      Padding(
        padding: const EdgeInsets.all(5.0),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              icon != null
                  ? Material(
                      child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Icon(icon, color: primaryColor, size: 35.0)))
                  : Container(
                      padding: EdgeInsets.only(top: 3),
                      child: imgIcon,
                    ),
              Padding(padding: EdgeInsets.only(bottom: 10.0)),
              Text(AppTranslations.of(context).text(title),
                  style: languageModel.isEng
                      ? TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontSize: 12.0)
                      : TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w700,
                          fontSize: 12.0,
                          fontFamily: "MyanmarUnicode")),
            ]),
      ),
      onTap: btnCallback,
    );
  }

  Widget _buildBtn2(String title,
      {Image imgIcon, IconData icon, BtnCallback btnCallback}) {
    var languageModel = Provider.of<LanguageModel>(context);
    return Container(
      width: 130,
      height: 130,
      decoration: new BoxDecoration(
          color: Colors.transparent, //new Color.fromRGBO(255, 0, 0, 0.0),
          borderRadius: new BorderRadius.only(
              topLeft: const Radius.circular(40.0),
              topRight: const Radius.circular(40.0))),
      // color: Colors.transparent,
      child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              // Padding(
              //     padding: EdgeInsets.only(top: 10),
              //     child: Icon(icon, color: Colors.white, size: 35.0)),
              // Padding(padding: EdgeInsets.only(bottom: 10.0)),
              ClipOval(
                child: Material(
                  color: Colors.white, // button color
                  child: InkWell(
                    splashColor: secondaryColor, // inkwell color
                    child: SizedBox(
                        width: 60, height: 60, child: Icon(icon, size: 35)),
                    onTap: btnCallback,
                  ),
                ),
              ),

              Text(AppTranslations.of(context).text(title),
                  style:
                      // languageModel.isEng
                      //     ?
                      TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.normal,
                          fontSize: 16.0,
                          fontFamily: "Roboto")
                  // : TextStyle(
                  //     color: Colors.black,
                  //     fontWeight: FontWeight.w700,
                  //     fontSize: 12.0,
                  //     fontFamily: "MyanmarUnicode")
                  ),
            ]),
      ),
    );
  }
}