import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:fcs/model/main_model.dart';
import 'package:fcs/pages/banks/bank_edit.dart';
import 'package:fcs/theme/theme.dart';
import 'package:fcs/vo/bank_account.dart';
import 'package:fcs/widget/local_text.dart';
import 'package:fcs/widget/progress.dart';

class BankAccounts extends StatefulWidget {
  const BankAccounts({Key key}) : super(key: key);
  @override
  _BankAccountsState createState() => _BankAccountsState();
}

class _BankAccountsState extends State<BankAccounts> {
  bool isLoading = false;
  bool isEdit = false;

  final TextEditingController bankNameCtl = TextEditingController();
  final TextEditingController accountNameCtl = TextEditingController();
  final TextEditingController accountNumberCtl = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    MainModel mainModel = Provider.of<MainModel>(context);
    List<BankAccount> bankAccounts = mainModel.setting.bankAccounts;

    bool isOwnerAndAbove =
        mainModel.user != null && mainModel.user.isOwnerAndAbove();
    bool hasAdmin = mainModel.user != null && mainModel.user.hasAdmin();

    return WillPopScope(
      onWillPop: () {
        if (isEdit) {
          setState(() {
            isEdit = false;
          });
          return Future.value(false);
        }
        return Future.value(true);
      },
      child: LocalProgress(
        inAsyncCall: isLoading,
        child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            automaticallyImplyLeading: !isEdit,
            title: LocalText(context, 'banks.title',
                color: Colors.white, fontSize: 20),
            backgroundColor: primaryColor,
            actions: <Widget>[
              (isOwnerAndAbove || hasAdmin)
                  ? isEdit
                      ? IconButton(
                          icon: Icon(Icons.done),
                          onPressed: () {
                            setState(() {
                              isEdit = false;
                            });
                          },
                        )
                      : IconButton(
                          icon: Icon(Icons.edit),
                          onPressed: () {
                            _edit();
                          },
                        )
                  : Container()
            ],
          ),
          floatingActionButton: isEdit
              ? FloatingActionButton(
                  backgroundColor: primaryColor,
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => BankEdit()),
                    );
                  },
                  child: const Icon(
                    Icons.add,
                    color: Colors.white,
                  ),
                )
              : null,
          body: new ListView.builder(
              scrollDirection: Axis.vertical,
              padding: EdgeInsets.only(top: 15),
              shrinkWrap: true,
              itemCount: bankAccounts.length,
              itemBuilder: (BuildContext context, int index) {
                return _item(context, bankAccounts[index]);
              }),
        ),
      ),
    );
  }

  _item(BuildContext context, BankAccount bankAccount) {
    return InkWell(
      onTap: isEdit
          ? () => Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => BankEdit(
                          bankAccount: bankAccount,
                        )),
              )
          : null,
      child: Row(
        children: <Widget>[
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  padding: const EdgeInsets.all(2.0),
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: primaryColor,
                      width: 1.0,
                    ),
                  ),
                  child: Image.network(
                    bankAccount.bankLogo,
                    height: 80,
                    width: 80,
                  ),
                ),
              ),
            ],
          ),
          Expanded(
            child: new Row(
              children: <Widget>[
                new Expanded(
                  child: new Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(3.0),
                        child: new Text(
                          bankAccount.bankName,
                          style: new TextStyle(
                              fontSize: 20.0, color: Colors.black),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(3.0),
                        child: new Text(
                          bankAccount.accountName,
                          style:
                              new TextStyle(fontSize: 16.0, color: Colors.grey),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(3.0),
                        child: Row(
                          children: <Widget>[
                            Text(
                              bankAccount.accountNumber,
                              style: new TextStyle(
                                  fontSize: 16.0, color: Colors.grey),
                            ),
                            InkWell(
                              onTap: () {
                                Clipboard.setData(ClipboardData(
                                    text: bankAccount.accountNumber));
                                _showToast(context, bankAccount.bankName);
                              },
                              child: Padding(
                                padding: const EdgeInsets.only(left: 7.0),
                                child: Icon(
                                  Icons.content_copy,
                                  color: Colors.grey,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Future<void> _displayEditDialog(BuildContext context) async {
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('Edit'),
            content: Column(
              children: <Widget>[
                TextField(
                  controller: bankNameCtl,
                  keyboardType: TextInputType.numberWithOptions(decimal: true),
                  decoration: InputDecoration(hintText: "Enter Bank Name"),
                ),
                TextField(
                  controller: accountNameCtl,
                  keyboardType: TextInputType.numberWithOptions(decimal: true),
                  decoration: InputDecoration(hintText: "Enter Account Name"),
                ),
                TextField(
                  controller: accountNumberCtl,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(hintText: "Enter Account Number"),
                ),
                IconButton(icon: Icon(Icons.photo_library), onPressed: null)
              ],
            ),
            actions: <Widget>[
              FlatButton(
                child: const Text('Cancel'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              FlatButton(
                  child: const Text('Ok'),
                  onPressed: () {
                    Navigator.of(context).pop();
                  }),
            ],
          );
        });
  }

  void _edit() {
    setState(() {
      isEdit = true;
    });
  }

  void _showToast(BuildContext context, String bankName) {
    final scaffold = Scaffold.of(context);
    scaffold.showSnackBar(
      SnackBar(
        content: Text('copied "$bankName" account number to clipboard'),
        backgroundColor: primaryColor,
        duration: Duration(seconds: 1),
      ),
    );
  }
}