import 'package:fcs/domain/entities/payment_method.dart';
import 'package:fcs/helpers/theme.dart';
import 'package:fcs/pages/main/model/main_model.dart';
import 'package:fcs/pages/payment_methods/model/payment_method_model.dart';
import 'package:fcs/pages/payment_methods/payment_method_editor.dart';
import 'package:fcs/pages/main/util.dart';
import 'package:fcs/pages/widgets/display_text.dart';
import 'package:fcs/pages/widgets/local_app_bar.dart';
import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/progress.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_vector_icons/flutter_vector_icons.dart';
import 'package:provider/provider.dart';

class PaymentMethodPage extends StatefulWidget {
  @override
  _PaymentMethodPageState createState() => _PaymentMethodPageState();
}

class _PaymentMethodPageState extends State<PaymentMethodPage> {
  GlobalKey<ScaffoldMessengerState> key = GlobalKey<ScaffoldMessengerState>();
  bool _isLoading = false;
  @override
  Widget build(BuildContext context) {
    PaymentMethodModel mainModel = Provider.of<PaymentMethodModel>(context);
    bool isEditable =
        context.select((MainModel m) => m.paymentMethodsEditable());

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        key: key,
        appBar: LocalAppBar(
            labelKey: "pm.title",
            backgroundColor: Colors.white,
            labelColor: primaryColor,
            arrowColor: primaryColor),
        body: Padding(
          padding: const EdgeInsets.all(12.0),
          child: ListView.separated(
            separatorBuilder: (context, index) => Divider(
              color: Colors.black,
            ),
            itemCount: mainModel.paymentMethods.length,
            itemBuilder: (BuildContext context, int index) {
              var method = mainModel.paymentMethods[index];
              return _item(method, isEditable);
            },
          ),
        ),
        floatingActionButton: isEditable
            ? FloatingActionButton.extended(
                onPressed: () {
                  Navigator.push(
                    context,
                    CupertinoPageRoute(
                        builder: (context) => PaymentMethodEditor()),
                  );
                },
                icon: Icon(Icons.add),
                label: LocalText(context, "pm.new", color: Colors.white),
                backgroundColor: primaryColor,
              )
            : Container(),
      ),
    );
  }

  _item(PaymentMethod method, bool isEditable) {
    final accountName = _itemRow(method.accountName!, "pm.account.name",
        iconData: MaterialCommunityIcons.bank);
    final accountNumber = _itemRow(method.account!, "pm.account.no",
        iconData: MaterialCommunityIcons.checkbook);
    final phone = _itemRow(method.phone!, "pm.phone", iconData: Icons.phone);
    final email = _itemRow(method.email!, "pm.email", iconData: Icons.mail);
    final link = _itemRow(method.link!, "pm.link", iconData: Icons.link);

    return InkWell(
      onTap: isEditable
          ? () {
              Navigator.push(
                context,
                CupertinoPageRoute(
                    builder: (context) => PaymentMethodEditor(
                          paymentMethod: method,
                        )),
              );
            }
          : null,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              method.name!,
              style: TextStyle(
                  color: primaryColor,
                  fontWeight: FontWeight.bold,
                  fontSize: 18),
            ),
          ),
          accountName,
          accountNumber,
          phone,
          email,
          link
        ],
      ),
    );
  }

  _itemRow(String text, String labelKey, {IconData? iconData}) {
    return text == ""
        ? Container()
        : Row(
            children: [
              Expanded(
                child: DisplayText(
                  text: text,
                  labelTextKey: labelKey,
                  iconData: iconData,
                ),
              ),
              IconButton(
                icon: Icon(Icons.content_copy, color: Colors.grey),
                onPressed: () => _copy(getLocalString(context, labelKey), text),
              )
            ],
          );
  }

  _copy(String title, String data) {
    Clipboard.setData(ClipboardData(text: data));
    _showToast(title);
  }

  void _showToast(String title) {
    final ScaffoldMessengerState scaffold =
        key.currentState as ScaffoldMessengerState;
    scaffold.showSnackBar(
      SnackBar(
        content: Text('copied "$title" data to clipboard'),
        backgroundColor: secondaryColor,
        duration: Duration(seconds: 1),
      ),
    );
  }
}