import 'dart:io';

import 'package:fcs/domain/entities/invoice.dart';
import 'package:fcs/helpers/theme.dart';
import 'package:fcs/localization/app_translations.dart';
import 'package:fcs/pages/invoice/payment_page_edit.dart';
import 'package:fcs/pages/widgets/image_file_picker.dart';
import 'package:fcs/pages/widgets/input_text.dart';
import 'package:fcs/pages/widgets/local_text.dart';
import 'package:fcs/pages/widgets/local_title.dart';
import 'package:fcs/pages/widgets/progress.dart';
import 'package:fcs/pages/widgets/show_img.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:image_picker/image_picker.dart';
import 'package:intl/intl.dart';

class PaymentPage extends StatefulWidget {
  final Invoice invoice;
  PaymentPage({this.invoice});

  @override
  _PaymentPageState createState() => _PaymentPageState();
}

class _PaymentPageState extends State<PaymentPage> {
  TextEditingController _amountController = new TextEditingController();
  var dateFormatter = new DateFormat('dd MMM yyyy');

  Invoice _invoice = new Invoice();
  bool _isLoading = false;

  bool isNew;
  File _file;

  @override
  void initState() {
    if (widget.invoice != null) {
      _invoice = widget.invoice;
    }
    super.initState();
  }

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

  final DateFormat dateFormat = DateFormat("d MMM yyyy");

  @override
  Widget build(BuildContext context) {
    final amountBox = InputText(
        labelTextKey: 'pm.amount',
        controller: _amountController,
        iconData: FontAwesomeIcons.moneyBill);

    final receiptFileBox = Row(children: [
      LocalText(context, 'pm.attachment', fontSize: 16, color: Colors.grey),
      _file != null
          ? InkWell(
              onTap: () async {
                await _dialog(context);
              },
              child: Chip(
                label: Icon(Icons.image, color: primaryColor),
              ),
            )
          : IconButton(
              icon: Icon(Icons.attachment, color: primaryColor),
              onPressed: () async {
                await _dialog(context);
              }),
    ]);

    final payBox = Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      Container(
          height: 50,
          width: 100,
          alignment: Alignment.center,
          child: Text(AppTranslations.of(context).text("pm.pay"),
              textAlign: TextAlign.center,
              style: TextStyle(color: Colors.white, fontSize: 14)),
          color: primaryColor)
    ]);

    return LocalProgress(
      inAsyncCall: _isLoading,
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          leading: new IconButton(
            icon: new Icon(CupertinoIcons.back),
            onPressed: () => Navigator.of(context).pop(),
          ),
          backgroundColor: primaryColor,
          title: Text(AppTranslations.of(context).text("pm_.title")),
        ),
        body: ListView(
          padding: const EdgeInsets.all(10.0),
          children: <Widget>[
            amountBox,
            SizedBox(height: 10),
            receiptFileBox,
            SizedBox(height: 10),
            payBox,
            Divider(),
            SizedBox(height: 10),
            LocalTitle(textKey: "pm.receipt"),
            Column(
              children: getCustomFeeRows(context),
            ),
            SizedBox(height: 25),
          ],
        ),
      ),
    );
  }

  getCustomFeeRows(BuildContext context) {
    List<Widget> dataRow = [];

    dataRow = [].asMap().entries.map((receipt) {
      var r = receipt.value;
      var k = receipt.key + 1;
      return Container(
        height: 50,
        decoration: BoxDecoration(
            border: Border(bottom: BorderSide(color: Colors.grey))),
        padding:
            const EdgeInsets.only(left: 5.0, right: 5.0, top: 5.0, bottom: 5.0),
        child: InkWell(
          onTap: () {
            Navigator.of(context).push(CupertinoPageRoute(
                builder: (context) => PaymentPageEdit(receipt: r)));
          },
          child: Row(
            children: [
              Expanded(flex: 2, child: Text('${r.date}')),
              Expanded(
                flex: 2,
                child: InkWell(
                  onTap: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => ShowImage(
                                // localImage: attachment.value.fileUrl,
                                localImage: 'assets/logo.jpg',
                                url: null,
                                fileName: 'image')));
                  },
                  child: Chip(
                    label: Icon(Icons.image, color: primaryColor),
                  ),
                ),
              ),
              Expanded(flex: 1, child: Center(child: Text('pending'))),
              Expanded(flex: 1, child: Center(child: Text('\$ ${r.amount}'))),
            ],
          ),
        ),
      );
    }).toList();

    dataRow.insert(
        0,
        Container(
          decoration: BoxDecoration(
              border: Border(bottom: BorderSide(color: Colors.grey))),
          padding: const EdgeInsets.only(
              left: 5.0, right: 5.0, top: 10.0, bottom: 15.0),
          child: Row(
            children: [
              Expanded(
                  flex: 2,
                  child: Text('Date', style: TextStyle(color: Colors.grey))),
              Expanded(
                  flex: 2,
                  child: Text('File',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.grey))),
              Expanded(
                  flex: 1,
                  child: Text('Status',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.grey))),
              Expanded(
                  flex: 1,
                  child: Text('Fee',
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.grey))),
            ],
          ),
        ));

    dataRow.insert(
        dataRow.length,
        Container(
          padding: const EdgeInsets.only(
              left: 5.0, right: 5.0, top: 15.0, bottom: 15.0),
          child: Row(
            children: [
              Expanded(
                flex: 2,
                child: Center(
                  child: LocalText(
                    context,
                    'pm.remaining_balance',
                    color: Colors.black,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(),
              ),
              Expanded(
                  flex: 1,
                  child: Center(
                      child: Text('\$ 300',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 16.0)))),
            ],
          ),
        ));
    return dataRow;
  }

  Future<void> _dialog(BuildContext context) {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          content: Container(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      IconButton(
                          icon: Icon(
                            FontAwesomeIcons.camera,
                            size: 30,
                            color: primaryColor,
                          ),
                          onPressed: () async {
                            // Navigator.pop(context);
                            // cameraPress();
                            var selectedFile =
                                await pickImage(ImageSource.camera);
                            setState(() {
                              _file = selectedFile;
                            });
                            Navigator.pop(context);
                          }),
                      Text("Camera")
                    ],
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      IconButton(
                          icon: Icon(
                            Icons.photo_library,
                            size: 30,
                            color: primaryColor,
                          ),
                          onPressed: () async {
                            // Navigator.pop(context);
                            // photoPress();
                            var selectedFile =
                                await pickImage(ImageSource.gallery);
                            setState(() {
                              _file = selectedFile;
                            });
                            Navigator.pop(context);
                          }),
                      Text("Gallery")
                    ],
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }

  pickImage(ImageSource source) async {
    var tempImage = await ImagePicker.pickImage(source: source);
    return tempImage;
  }
}