import 'package:fcs/domain/entities/invoice.dart';
import 'package:fcs/helpers/theme.dart';
import 'package:fcs/localization/app_translations.dart';
import 'package:fcs/pages/main/util.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/multi_img_controller.dart';
import 'package:fcs/pages/widgets/multi_img_file.dart';
import 'package:fcs/pages/widgets/my_data_table.dart';
import 'package:fcs/pages/widgets/number_cell.dart';
import 'package:fcs/pages/widgets/progress.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.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;

  @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),
      IconButton(
          icon: Icon(Icons.attachment, color: primaryColor), onPressed: () {})
    ]);

    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")),
          actions: [
            IconButton(icon: Icon(Icons.cloud_upload), onPressed: () {})
          ],
        ),
        body: ListView(
          padding: const EdgeInsets.all(10.0),
          children: <Widget>[
            amountBox,
            SizedBox(height: 10),
            receiptFileBox,
            SizedBox(height: 10),
            Divider(),
            SizedBox(height: 10),
            LocalTitle(textKey: "pm.receipt"),
            Column(
              children: getCustomFeeRows(context),
            ),
            SizedBox(height: 25),
          ],
        ),
      ),
    );
  }

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

    dataRow = _invoice.receipts.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: Row(
          children: [
            Expanded(flex: 2, child: Text(dateFormatter.format(r.date))),
            Expanded(
                flex: 2,
                child: Center(child: Text('receipt' + k.toString() + '.png'))),
            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('Product', 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;
  }
}