import 'package:fcs/model/product_model.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:intl/intl.dart';
import 'package:progress/progress.dart';
import 'package:provider/provider.dart';
import 'package:fcs/charts/lines.dart';
import 'package:fcs/model/main_model.dart';
import 'package:fcs/pages/po/po_submission_form.dart';
import 'package:fcs/fcs/common/helpers/theme.dart';
import 'package:fcs/vo/product.dart';
import 'package:fcs/widget/local_text.dart';
import 'package:fcs/widget/localization/app_translations.dart';
import 'package:fcs/widget/products_price_table.dart';
import 'package:zefyr/zefyr.dart';

class ProductsWidget extends StatefulWidget {
  final bool isWelcomePage;

  const ProductsWidget({Key key, this.isWelcomePage = false}) : super(key: key);

  @override
  _ProductsWidgetState createState() =>
      _ProductsWidgetState(this.isWelcomePage);
}

class _ProductsWidgetState extends State<ProductsWidget> {
  final bool isWelcomePage;
  final double dotSize = 10.0;
  bool _isLoading = false;
  DateTime date;
  Map<String, int> measures;

  _ProductsWidgetState(this.isWelcomePage);

  @override
  Widget build(BuildContext context) {
    var productModel = Provider.of<ProductModel>(context);
    var mainModel = Provider.of<MainModel>(context);
    var chartWidget = ProductsChart.fromModel(productModel);

    var openHour = "", closeHour = "", openDates = "", date = "";
    if (mainModel.setting != null) {
      var setting = mainModel.setting;
      date = setting.priceLastUpdate != null
          ? DateFormat('dd MMM yyyy – hh:mm:ss a')
              .format(setting.priceLastUpdate)
          : "";
      openHour = setting.getPoOpenAt;
      closeHour = setting.getPoCloseAt;
      openDates = setting.getPoOpenOn;
    }

    return Progress(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LocalText(context, "welcome.price.updateinfo",
                color: Colors.black, translationVariables: ["$date"]),
            Container(
              padding: const EdgeInsets.only(left: 5, right: 5),
              child: Column(
                children: _buildProductList(productModel.products),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 5, right: 5),
              child: Card(
                  elevation: 10,
                  child: Column(
                    children: <Widget>[
                      LocalText(context, "welcome.price.trend",
                          color: Colors.black),
                      Container(
                          padding: EdgeInsets.only(left: 5),
                          height: 200,
                          child: chartWidget),
                      Row(
                        children: <Widget>[
                          !mainModel.setting.isPOClose && mainModel.isRegBuyer()
                              ? Padding(
                                  padding: const EdgeInsets.only(left: 8.0),
                                  child: RaisedButton(
                                    elevation: 8,
                                    color: Colors.white,
                                    child: Row(
                                      children: <Widget>[
                                        Image.asset(
                                          "assets/pay.png",
                                          width: 30,
                                          height: 30,
                                          color: primaryColor,
                                        ),
                                        Padding(
                                          padding:
                                              const EdgeInsets.only(left: 8.0),
                                          child: LocalText(
                                              context, "product.purchase.order",
                                              color: primaryColor),
                                        ),
                                      ],
                                    ),
                                    onPressed: mainModel.setting.isPOClose ||
                                            !mainModel.isRegBuyer()
                                        ? null
                                        : () {
                                            Navigator.push(
                                              context,
                                              MaterialPageRoute(
                                                  builder: (context) =>
                                                      POSubmissionForm()),
                                            );
                                          },
                                  ),
                                )
                              : Container(),
                          Spacer(),
                          Container(
                            alignment: Alignment.bottomRight,
                            padding: EdgeInsets.only(right: 15, bottom: 5),
                            child: InkWell(
                              onTap: () => {
                                Navigator.of(context).push(MaterialPageRoute(
                                    builder: (_) => ProductPriceTable()))
                              },
                              child: LocalText(
                                context,
                                "welcome.price.detail",
                                color: Colors.blue,
                                underline: true,
                                fontSize: 15,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  )),
            ),
            SizedBox(height: 10),
            mainModel.setting.isPOClose
                ? LocalText(
                    context,
                    "product.close",
                    color: Colors.red,
                  )
                : Container(),
            LocalText(context, "product.open",
                color: Colors.blue,
                translationVariables: [openHour, closeHour, openDates]),
          ],
        ),
      ),
      inAsyncCall: _isLoading,
      opacity: 0.7,
      progressIndicator: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CircularProgressIndicator(
            backgroundColor: primaryColor,
          ),
          SizedBox(
            height: 10,
          ),
          Text(AppTranslations.of(context).text("load"))
        ],
      ),
    );
  }

  List<Widget> _buildProductList(List<Product> products) {
    List<Widget> productItems = [];
    for (var p in products) {
      productItems.add(_buildProductItem(p));
    }
    return productItems;
  }

  Widget _buildProductItem(Product product) {
    return Card(
      elevation: 10,
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Expanded(
            child: InkWell(
              onTap: () {},
              child: new Padding(
                padding: const EdgeInsets.symmetric(vertical: 3.0),
                child: new Row(
                  children: <Widget>[
                    new Padding(
                      padding: new EdgeInsets.symmetric(
                          horizontal: 30.0 - dotSize / 2),
                      child: Icon(
                        FontAwesomeIcons.tag,
                        color: Color(product.color),
                        size: 20,
                      ),
                    ),
                    new Expanded(
                      child: new Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          new Text(
                            product.name,
                            style: new TextStyle(
                                fontSize: 25.0, color: Colors.black),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 20),
            child: new Text(
              product.price.toString(),
              style: new TextStyle(fontSize: 20.0, color: Colors.grey),
            ),
          )
        ],
      ),
    );
  }
}