import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:provider/provider.dart';
import 'package:fcs/model/language_model.dart';
import 'package:fcs/model/product_model.dart';
import 'package:fcs/theme/theme.dart';
import 'package:fcs/vo/po.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/progress.dart';

import '../util.dart';

class POItem extends StatefulWidget {
  final POLine poLine;
  const POItem({Key key, this.poLine}) : super(key: key);
  @override
  _POItemState createState() => _POItemState();
}

class _POItemState extends State<POItem> {
  final _formKey = GlobalKey<FormState>();
  bool _isLoading = false;
  String currentProductID;
  TextEditingController _qty = new TextEditingController();
  POLine poLine = POLine();

  @override
  void initState() {
    super.initState();
    if (widget.poLine != null) {
      this.poLine = widget.poLine;

      this._qty.text = this.poLine.qty.toString();
      this.currentProductID = this.poLine.productID;
      this.poLine.action = "update";
    } else {
      this.poLine.action = "create";
    }
  }

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

  Widget showProducts(BuildContext context, ProductModel productModel) {
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Icon(
          FontAwesomeIcons.tag,
          color: primaryColor,
          size: 20,
        ),
        SizedBox(
          width: 20,
        ),
        new Flexible(
          child: Container(
            width: 170.0,
            child: DropdownButton<String>(
              value: currentProductID,
              isExpanded: true,              
              hint: Text(
                'Select Product',
                style: labelStyle,
              ),
              onChanged: changedProduct,
              items: productModel.products
                  .map<DropdownMenuItem<String>>((Product product) {
                return new DropdownMenuItem<String>(
                  value: product.id,
                  child: new Text(product.name, style: textStyle),
                );
              }).toList(),
            ),
          ),
        ),
      ],
    );
  }

  void changedProduct(selected) {
    setState(() {
      // currentProductID = selected;
    });
  }

  @override
  Widget build(BuildContext context) {
    var productModel = Provider.of<ProductModel>(context);
    var languageModel = Provider.of<LanguageModel>(context);

    final volumeBox = Container(
      padding: EdgeInsets.only(top: 10),
      child: TextFormField(
        controller: _qty,
        autofocus: false,
        cursorColor: primaryColor,
        keyboardType: TextInputType.number,
        decoration: new InputDecoration(
          labelText: AppTranslations.of(context).text("po.volume"),
          labelStyle: languageModel.isEng ? labelStyle : labelStyleMM,
          icon: Icon(
            FontAwesomeIcons.sortNumericUpAlt,
            color: primaryColor,
          ),
          enabledBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: primaryColor, width: 1.0)),
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: primaryColor, width: 1.0)),
        ),
        validator: (value) {
          if (value.isEmpty) {
            return AppTranslations.of(context).text("po.form.volume");
          }
          return null;
        },
      ),
    );

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
          appBar: AppBar(
            backgroundColor: primaryColor,
            title: LocalText(
              context,
              "po",
              color: Colors.white,
              fontSize: 20,
            ),
            actions: <Widget>[
              // IconButton(
              //   icon: Icon(Icons.delete),
              //   onPressed: () {
              //     _delete();
              //   },
              // ),
              IconButton(
                icon: Icon(Icons.save),
                onPressed: () {
                  if (!_formKey.currentState.validate()) return;
                  _save();
                },
              )
            ],
          ),
          body: Form(
            key: _formKey,
            child: Column(
              children: <Widget>[
                Expanded(
                  child: ListView(
                    shrinkWrap: true,
                    padding: EdgeInsets.only(left: 24.0, right: 24.0),
                    children: <Widget>[
                      volumeBox,
                      showProducts(context, productModel)
                    ],
                  ),
                ),
              ],
            ),
          )),
    );
  }

  _save() {
    setState(() {
      _isLoading = true;
    });
    try {
      this.poLine.productID = currentProductID;
      var product =
          Provider.of<ProductModel>(context).getProduct(currentProductID);
      this.poLine.productName = product.name;
      this.poLine.price = product.price;
      this.poLine.qty = int.parse(_qty.text);
      this.poLine.amount = this.poLine.price * this.poLine.qty;
      Navigator.pop<POLine>(context, this.poLine);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  _delete() {
    setState(() {
      _isLoading = true;
    });
    try {
      this.poLine.action = "delete";
      Navigator.pop<POLine>(context, this.poLine);
    } catch (e) {
      showMsgDialog(context, "Error", e.toString());
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }
}