import 'dart:convert';

import 'package:cathaypay_mobile/Home/HomePage.dart';
import 'package:cathaypay_mobile/TopUp/topup_amout.dart';
import 'package:cathaypay_mobile/TopUp/topup_my_qr.dart';
import 'package:cathaypay_mobile/utils/utils.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../Home/home_bottom_menu_widget.dart';
import '../api/api.dart';
import '../model/transaction_model.dart';

class TopUpMenuPage extends StatefulWidget {
  const TopUpMenuPage({Key? key}) : super(key: key);

  @override
  State<TopUpMenuPage> createState() => _TopUpMenuPageState();
}

class _TopUpMenuPageState extends State<TopUpMenuPage> {
  bool _is_history = false;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          flexibleSpace: Image(
            image: AssetImage('images/home/Head.png'),
            fit: BoxFit.cover,
          ),
          leading: CupertinoButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Icon(
              Icons.chevron_left,
              color: Colors.white,
            ),
          ),
          elevation: 0,
          title: Text(
            "Wallet Topup".tr(),
            textAlign: TextAlign.center,
            style: GoogleFonts.kanit(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
        body: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 15),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    InkWell(
                      onTap: () {
                        setState(() {
                          _is_history = false;
                        });
                      },
                      child: Column(
                        children: [
                          Text(
                            "Create Transaction".tr(),
                            style: GoogleFonts.kanit(
                              color: Colors.black,
                              fontSize: 14,
                              fontWeight: FontWeight.w300,
                            ),
                          ),
                          Container(
                            width: 63,
                            height: 2,
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: _is_history ? Colors.transparent : Color(0xffd0315a),
                                width: 2,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        setState(() {
                          _is_history = true;
                        });
                      },
                      child: Column(
                        children: [
                          Text(
                            "Transaction History".tr(),
                            style: GoogleFonts.kanit(
                              color: Color(0xff565656),
                              fontSize: 14,
                              fontWeight: FontWeight.w300,
                            ),
                          ),
                          Container(
                            width: 63,
                            height: 2,
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: _is_history ? Color(0xffd0315a) : Colors.transparent,
                                width: 2,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Divider(
                color: Color.fromRGBO(196, 196, 196, 1),
                thickness: 1,
                height: 1,
              ),
              _is_history ? TopUpHistory() : TopUpListMenu(),
              Expanded(child: Container()),
              HomeBottomMenuWidget()
            ],
          ),
        ),
      ),
    );
  }
}

class TopUpListMenu extends StatefulWidget {
  const TopUpListMenu({Key? key}) : super(key: key);

  @override
  State<TopUpListMenu> createState() => _TopUpListMenuState();
}

class _TopUpListMenuState extends State<TopUpListMenu> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              SizedBox(
                height: 20,
              ),
              /*InkWell(
            onTap: () {
              showModalBottomSheet<void>(
                  context: context,
                  isScrollControlled: true,
                  useSafeArea: true,
                  builder: (BuildContext context) {
                    return SafeArea(child: TopUpPage());
                  });
            },
            child: Container(
              child: Row(
                children: [
                  Container(
                    width: 56,
                    height: 56,
                    child: Image(
                      image: AssetImage('images/bank/kbank.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                  Text(
                    "KASIKORNBANK",
                    style: GoogleFonts.kanit(
                      color: Color(0xff65676b),
                      fontSize: 16,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  Spacer(),
                  Text(
                    "XXX-X-XX141-2",
                    textAlign: TextAlign.right,
                    style: TextStyle(
                      color: Color(0xff050505),
                      fontFamily: "Kanit",
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  )
                ],
              ),
              height: 56,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                boxShadow: [
                  BoxShadow(
                    color: Color(0x26000000),
                    blurRadius: 2,
                    offset: Offset(0.75, 1.50),
                  ),
                ],
                color: Color(0xfffbfbfb),
              ),
            ),
          ),
          SizedBox(
            height: 20,
          ),
          InkWell(
            onTap: () {
              showModalBottomSheet<void>(
                  context: context,
                  isScrollControlled: true,
                  useSafeArea: true,
                  builder: (BuildContext context) {
                    return SafeArea(child: TopUpAddBank());
                  });
            },
            child: Container(
              child: Row(
                children: [
                  SizedBox(
                    width: 20,
                  ),
                  Icon(Icons.add, color: Color(0xff565656)),
                  Text(
                    "เพิ่มบัญชีธนาคาร",
                    style: GoogleFonts.kanit(
                      color: Color(0xff65676b),
                      fontSize: 18,
                    ),
                  ),
                  Spacer(),
                  Container(
                    width: 56,
                    height: 56,
                    child: Image(
                      image: AssetImage('images/bank/bookbank.png'),
                      fit: BoxFit.cover,
                    ),
                  ),
                  SizedBox(
                    width: 20,
                  )
                ],
              ),
              height: 56,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                boxShadow: [
                  BoxShadow(
                    color: Color(0x26000000),
                    blurRadius: 2,
                    offset: Offset(0.75, 1.50),
                  ),
                ],
                color: Color(0xfffbfbfb),
              ),
            ),
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            child: Row(
              children: [
                SizedBox(
                  width: 20,
                ),
                Icon(Icons.add, color: Color(0xff565656)),
                Text(
                  "เพิ่มบัตรเครดิต / เดบิต",
                  style: GoogleFonts.kanit(
                    color: Color(0xff65676b),
                    fontSize: 18,
                  ),
                ),
                Spacer(),
                Container(
                  width: 66,
                  height: 23,
                  child: Image(
                    image: AssetImage('images/bank/visa_master.png'),
                    fit: BoxFit.cover,
                  ),
                ),
                SizedBox(
                  width: 20,
                )
              ],
            ),
            height: 56,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(100),
              boxShadow: [
                BoxShadow(
                  color: Color(0x26000000),
                  blurRadius: 2,
                  offset: Offset(0.75, 1.50),
                ),
              ],
              color: Color(0xfffbfbfb),
            ),
          ),
          SizedBox(
            height: 20,
          ),*/
              InkWell(
                onTap: () {
                  showModalBottomSheet<void>(
                      context: context,
                      isScrollControlled: true,
                      useSafeArea: true,
                      builder: (BuildContext context) {
                        return TopUpAmountPage();
                      });
                },
                child: Container(
                  child: Row(
                    children: [
                      SizedBox(
                        width: 20,
                      ),
                      Text(
                        "QR Topup From Bank",
                        style: GoogleFonts.kanit(
                          color: Color(0xff65676b),
                          fontSize: 18,
                        ),
                      ),
                      Spacer(),
                      Icon(
                        Icons.qr_code,
                        size: 23,
                      ),
                      SizedBox(
                        width: 20,
                      )
                    ],
                  ),
                  height: 56,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(100),
                    boxShadow: [
                      BoxShadow(
                        color: Color(0x26000000),
                        blurRadius: 2,
                        offset: Offset(0.75, 1.50),
                      ),
                    ],
                    color: Color(0xfffbfbfb),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              InkWell(
                onTap: () {
                  showModalBottomSheet<void>(
                      context: context,
                      isScrollControlled: true,
                      useSafeArea: true,
                      builder: (BuildContext context) {
                        return TopUpMyQrPage();
                      });
                },
                child: Container(
                  child: Row(
                    children: [
                      SizedBox(
                        width: 20,
                      ),
                      Text(
                        "QR Topup From Agent",
                        style: GoogleFonts.kanit(
                          color: Color(0xff65676b),
                          fontSize: 18,
                        ),
                      ),
                      Spacer(),
                      Icon(
                        Icons.qr_code,
                        size: 23,
                      ),
                      SizedBox(
                        width: 20,
                      )
                    ],
                  ),
                  height: 56,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(100),
                    boxShadow: [
                      BoxShadow(
                        color: Color(0x26000000),
                        blurRadius: 2,
                        offset: Offset(0.75, 1.50),
                      ),
                    ],
                    color: Color(0xfffbfbfb),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class TopUpHistory extends StatefulWidget {
  const TopUpHistory({Key? key}) : super(key: key);

  @override
  State<TopUpHistory> createState() => _TopUpHistoryState();
}

class _TopUpHistoryState extends State<TopUpHistory> {
  List<Transactions> listTrans = [];

  getTransaction() {
    listTrans.clear();
    var date = DateTime.now();
    var start = DateFormat('yyyy-MM-dd').format(DateTime.now());
    var end = DateFormat('yyyy-MM-dd').format(DateTime(date.year - 1, date.month, date.day));
    var param = jsonEncode(<dynamic, dynamic>{
      "id": "",
      "requestUserID": "",
      "invoiceId": "",
      "referencE1": "",
      "referencE2": "",
      "paymentStatus": "WALLETADDED",
      "paymentChannel": "",
      "createDatefrom": end,
      "createDateto": start,
      "requestName": profile?.userName,
      "fullName": ""
    });

    Api.postAdmin(context, Api.getTransactionTopUp, param).then((value) => {
          if (value != null)
            {
              print("postAdmin   $value"),
              value.forEach((v) {
                listTrans.add(Transactions.fromJson(v));
              }),
              refresh()
            }
          else
            {
              print("postAdmin   nullllll"),
            }
        });
  }

  refresh() {
    setState(() {});
  }

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

  @override
  Widget build(BuildContext context) {
    return Expanded(
        child: ListView.builder(
            itemCount: listTrans.length,
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              Transactions transactions = listTrans[index];
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      Utils.convertDateToDay(transactions.updateDate ?? "", context),
                      style: GoogleFonts.kanit(
                        color: Color(0xff565656),
                        fontSize: 16,
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.grey.shade100,
                      ),
                      child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text(
                                  transactions.paymentChannel ?? "",
                                  style: GoogleFonts.kanit(
                                    color: Color(0xff65676b),
                                    fontSize: 16,
                                    fontWeight: FontWeight.w300,
                                  ),
                                ),
                                Spacer(),
                                Text(
                                  "${transactions.amount ?? ""} ${"Baht".tr()}",
                                  textAlign: TextAlign.right,
                                  style: GoogleFonts.kanit(
                                    color: Color(0xff65676b),
                                    fontSize: 16,
                                  ),
                                )
                              ],
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Text(
                              transactions.fullName ?? "",
                              style: TextStyle(
                                color: Color(0xff65676b),
                                fontSize: 16,
                              ),
                            ),
                            Text(
                              Utils.convertDateToTime(transactions.updateDate ?? ""),
                              style: TextStyle(
                                color: Color(0xff65676b),
                                fontSize: 14,
                                fontWeight: FontWeight.w300,
                              ),
                            ),
                            Text(
                              Utils.convertDateToTime("Trans.ID. ${transactions.ePaymentTransactionID}" ?? ""),
                              style: TextStyle(
                                color: Color(0xff65676b),
                                fontSize: 14,
                                fontWeight: FontWeight.w300,
                              ),
                            ),
                            // Row(
                            //   children: [
                            //     Spacer(),
                            //     Icon(
                            //       Icons.keyboard_arrow_down,
                            //       color: Colors.grey.shade400,
                            //       size: 30,
                            //     )
                            //   ],
                            // ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              );
            }));
  }
}