import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:fcs/model/do_model.dart';
import 'package:fcs/model/language_model.dart';
import 'package:fcs/model/main_model.dart';
import 'package:fcs/pages/do/do_creation_form.dart';
import 'package:fcs/pages/util.dart';
import 'package:fcs/theme/theme.dart';
import 'package:fcs/vo/popup_menu.dart';
import 'package:fcs/widget/localization/app_translations.dart';
import 'package:fcs/widget/popupmenu.dart';
import 'package:fcs/widget/progress.dart';

import 'do_approve.dart';

class DOList extends StatefulWidget {
  @override
  _DOListState createState() => _DOListState();
}

class _DOListState extends State<DOList> {
  var dateFormatter = new DateFormat('dd MMM yyyy');
  final double dotSize = 10.0;
  DateTime _selectedDate = DateTime.now();
  String status;
  int _selectedIndex = 0;
  int _dateIndex = 0;
  bool _isLoading = false;

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

    var doModel = Provider.of<DOModel>(context, listen: false);
    _selectedIndex = doModel.popupMenu.index;
    _dateIndex = doModel.dateIndex;
    _selectedDate = doModel.selectedDate;
  }

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

  Future<Null> _selectDate(BuildContext context) async {
    var doModel = Provider.of<DOModel>(context);

    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: _selectedDate,
      firstDate: DateTime(2015, 8),
      lastDate: DateTime(2101),
      builder: (BuildContext context, Widget child) {
        return Theme(
          data: ThemeData.light().copyWith(
            primaryColor: primaryColor, //Head background
            accentColor: secondaryColor, //selection color
            dialogBackgroundColor: Colors.white, //Background color
          ),
          child: child,
        );
      },
    );

    if (picked != null) {
      var pickedDate = new DateTime(picked.year, picked.month, picked.day);
      var currentDate = new DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day);
      this._dateIndex = pickedDate == currentDate ? 0 : 1;
      setState(() {
        _selectedDate = picked;
        doModel.filterData(status, _selectedDate, _selectedIndex, _dateIndex);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    var doModel = Provider.of<DOModel>(context);
    MainModel mainModel = Provider.of<MainModel>(context);
    bool isBuyer = mainModel.user.isBuyer();
    var languageModle = Provider.of<LanguageModel>(context);

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: primaryColor,
          title: Text(
            AppTranslations.of(context).text("do.title"),
            style: languageModle.isEng
                ? TextStyle()
                : TextStyle(fontFamily: 'MyanmarUnicode'),
          ),
          actions: <Widget>[
            InkWell(
              child: Container(
                padding: EdgeInsets.only(top: 15),
                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      "assets/date_filter.png",
                      color: Colors.white,
                      width: 25,
                    ),
                    _dateIndex == 0
                        ? Container()
                        : Positioned(
                            bottom: 15,
                            right: 10,
                            child: Container(
                              width: 10,
                              height: 10,
                              decoration: new BoxDecoration(
                                shape: BoxShape.circle,
                                color: secondaryColor,
                              ),
                            ),
                          )
                  ],
                ),
              ),
              onTap: () => _selectDate(context),
            ),
            PopupMenuButton<PopupMenu>(
                elevation: 3.2,
                onSelected: (selected) {
                  setState(() {
                    _selectedIndex = selected.index;
                  });
                  if (selected.status == 'All') {
                    status = null;
                  } else {
                    status = selected.status;
                  }
                  doModel.filterData(
                      status, _selectedDate, _selectedIndex, _dateIndex);
                },
                icon: Container(
                    width: 30,
                    height: 30,
                    decoration: new BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.white,
                    ),
                    child: Stack(
                      fit: StackFit.expand,
                      children: <Widget>[
                        Icon(
                          Icons.filter_list,
                          color: primaryColor,
                        ),
                        _selectedIndex != 0
                            ? Positioned(
                                bottom: 0,
                                right: 0,
                                child: Container(
                                  width: 10,
                                  height: 10,
                                  decoration: new BoxDecoration(
                                    shape: BoxShape.circle,
                                    color: secondaryColor,
                                  ),
                                ),
                              )
                            : Container()
                      ],
                    )),
                itemBuilder: (BuildContext context) {
                  return statusMenu.map((PopupMenu choice) {
                    return PopupMenuItem<PopupMenu>(
                      value: choice,
                      child: Row(
                        children: <Widget>[
                          Text(choice.status),
                          SizedBox(
                            width: 10,
                          ),
                          _selectedIndex != null &&
                                  _selectedIndex == choice.index
                              ? Icon(
                                  Icons.check,
                                  color: Colors.grey,
                                )
                              : Container(),
                        ],
                      ),
                    );
                  }).toList();
                }),
          ],
        ),
        floatingActionButton: mainModel.isBuyer()
            ? FloatingActionButton(
                backgroundColor: primaryColor,
                onPressed: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => DOForm()),
                ),
                child: Icon(Icons.add),
              )
            : null,
        body: new ListView.builder(
            scrollDirection: Axis.vertical,
            padding: EdgeInsets.only(left: 15, right: 15, top: 15),
            shrinkWrap: true,
            itemCount: doModel.dos.length,
            itemBuilder: (BuildContext context, int index) {
              return Card(
                elevation: 10,
                color: Colors.white,
                child: Row(
                  children: <Widget>[
                    Expanded(
                      child: InkWell(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => DOApproval(
                                    doSubmission: doModel.dos[index])),
                          );
                        },
                        child: new Padding(
                          padding: const EdgeInsets.symmetric(vertical: 16.0),
                          child: new Row(
                            children: <Widget>[
                              new Padding(
                                padding: new EdgeInsets.symmetric(
                                    horizontal: 32.0 - dotSize / 2),
                                child: Padding(
                                  padding: EdgeInsets.all(5.0),
                                  child: Image.asset(
                                    "assets/do.png",
                                    width: 40,
                                    height: 40,
                                    color: primaryColor,
                                  ),
                                ),
                              ),
                              new Expanded(
                                child: new Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    new Text(
                                      doModel.dos[index].doNumber,
                                      style: new TextStyle(
                                          fontSize: 12.0, color: Colors.black),
                                    ),
                                    new Text(
                                      doModel.dos[index].deliveryDate == null
                                          ? ""
                                          : dateFormatter.format(
                                              doModel.dos[index].deliveryDate),
                                      style: new TextStyle(
                                          fontSize: 14.0, color: Colors.grey),
                                    ),
                                    !isBuyer
                                        ? new Text(
                                            doModel.dos[index].userName,
                                            style: new TextStyle(
                                                fontSize: 12.0,
                                                color: Colors.grey),
                                          )
                                        : Container()
                                  ],
                                ),
                              ),
                              Container(
                                padding: EdgeInsets.only(right: 15),
                                child: getStatus(doModel.dos[index].status),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }),
      ),
    );
  }
}