import 'dart:convert';

import 'package:cathaypay_mobile/utils/color_custom.dart';
import 'package:cathaypay_mobile/utils/utils.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:saver_gallery/saver_gallery.dart';
import 'package:screenshot/screenshot.dart';

import '../Home/HomePage.dart';
import '../Numpad.dart';
import '../api/api.dart';

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

  @override
  State<TopUpAmountPage> createState() => _TransferPromptPayDetailState();
}

class _TransferPromptPayDetailState extends State<TopUpAmountPage> {
  String number = '';
  TextEditingController price = TextEditingController();

  setValue(String val) {
    setState(() {
      number += val;
    });
    price.text = Utils.moneyFormat(number) + ".00";
  }

  backspace() {
    if (number.length > 0) {
      setState(() {
        number = number.substring(0, number.length - 1);
      });
      price.text = Utils.moneyFormat(number) + ".00";
    }
  }

  bool loading = false;
  String? myQrCode;

  initTopUp() {
    setState(() {
      loading = true;
    });
    var param = jsonEncode(<dynamic, dynamic>{
      "merchantLocalID": Api.merchantId,
      "amount": "${number}00",
      "invoice": "INV${Utils.getTimestamp()}",
      "ref1": "REF${Utils.getTimestamp()}01",
      "ref2": "REF${Utils.getTimestamp()}02",
      "paymentChannel": "PP",
      "responseClientURL": Api.callBackURL,
      "remark": ""
    });
    Api.post(context, Api.walletTopup, param).then((value) => {
          if (value != null) {initQrCode(value)} else {}
        });
  }

  saveQrCode() {
    // ImageGallerySaver.saveImage(base64Decode(myQrCode ?? ""));
    String fileName = "neopay_${DateTime.now().millisecondsSinceEpoch}.jpg";
    SaverGallery.saveImage(base64Decode(myQrCode ?? ""), fileName: fileName, skipIfExists: false);
    Utils.showAlertDialogCallback(
      context,
      "บันทึกสำเร็จ",
      (value) {
        Navigator.pushNamed(context, '/HomePage');
      },
    );
  }

  ScreenshotController screenshotController = ScreenshotController();

  captureQrCode() {
    screenshotController.capture().then((Uint8List? image) {
      if (image != null) {
        // ImageGallerySaver.saveImage(image);
        String fileName = "neopay_${DateTime.now().millisecondsSinceEpoch}.jpg";
        SaverGallery.saveImage(image, fileName: fileName, skipIfExists: false);
        Utils.showAlertDialogCallback(
          context,
          "บันทึกสำเร็จ",
          (value) {
            Navigator.pushNamed(context, '/HomePage');
          },
        );
      }
    }).catchError((onError) {
      print(onError);
    });
  }

  initQrCode(value) {
    setState(() {
      myQrCode = value["data"]["qrImage"];
      loading = false;
    });
    showModalBottomSheet<void>(
        context: context,
        isScrollControlled: true,
        useSafeArea: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(
            top: Radius.circular(16),
          ),
        ),
        builder: (BuildContext context) {
          return Column(
            children: [
              Row(children: [
                IconButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    icon: Icon(
                      Icons.arrow_back_ios,
                      color: Colors.black,
                    )),
                Text(
                  "Wallet Topup".tr(),
                  style: TextStyle(
                    color: Color(0xff050505),
                    fontSize: 20,
                  ),
                ),
                Spacer(),
                IconButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    icon: Icon(
                      Icons.close,
                      color: Colors.black,
                    )),
              ]),
              Expanded(
                  child: Screenshot(
                      controller: screenshotController,
                      child: Container(
                        decoration: BoxDecoration(border: Border.all(width: 1.0, color: Colors.grey), color: Colors.white),
                        padding: EdgeInsets.all(20),
                        margin: EdgeInsets.all(20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Container(
                              alignment: Alignment.center,
                              margin: EdgeInsets.symmetric(horizontal: 15),
                              child: Image.memory(base64Decode(myQrCode ?? "")),
                            ),
                            SizedBox(
                              height: 20,
                            ),
                            Text(
                              "QR ของคุณได้ถูกสร้างแล้ว\nผู้จ่ายสามารถสแกนเพื่อเติมเงินได้".tr(),
                              style: TextStyle(
                                color: ColorCustom.greyBorder,
                                fontSize: 12,
                              ),
                              textAlign: TextAlign.center,
                            ),
                            SizedBox(
                              height: 20,
                            ),
                            Divider(
                              color: Colors.grey,
                              thickness: 1,
                            ),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  "ชื่อบัญชี".tr(),
                                  style: TextStyle(
                                    color: Color(0xff050505),
                                    fontSize: 16,
                                  ),
                                ),
                                Expanded(child: Container()),
                                Text(
                                  "${profile?.fullName}",
                                  style: TextStyle(
                                    color: Color(0xff050505),
                                    fontSize: 16,
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  "Member ID".tr(),
                                  style: TextStyle(
                                    color: Color(0xff050505),
                                    fontSize: 16,
                                  ),
                                ),
                                Expanded(child: Container()),
                                Text(
                                  "${profile?.maxCardMembers.first.maxCardID}",
                                  style: TextStyle(
                                    color: Color(0xff050505),
                                    fontSize: 16,
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Container(
                              padding: EdgeInsets.all(8),
                              decoration: BoxDecoration(
                                  border: Border.all(
                                    width: 1.0,
                                    color: Colors.green,
                                  ),
                                  borderRadius: BorderRadius.all(Radius.circular(5)),
                                  color: Colors.green.shade100),
                              child: Row(
                                children: [
                                  Text(
                                    "จำนวนเงิน".tr(),
                                    style: TextStyle(
                                      color: Color(0xff050505),
                                      fontSize: 20,
                                    ),
                                  ),
                                  Expanded(child: Container()),
                                  Text(
                                    Utils.moneyFormat(number) + ".00",
                                    style: TextStyle(
                                      color: Color(0xff050505),
                                      fontSize: 20,
                                    ),
                                  ),
                                ],
                              ),
                            )
                          ],
                        ),
                      ))),
              SizedBox(
                height: 20,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  InkWell(
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width / 3,
                      child: Card(
                        color: Color(0xff2d2d2d),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40),
                        ),
                        child: Container(
                          padding: EdgeInsets.all(10),
                          child: Text(
                            "ยกเลิก".tr(),
                            maxLines: 1,
                            textAlign: TextAlign.center,
                            style: GoogleFonts.kanit(
                              color: ColorCustom.white,
                              fontSize: 14,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      Navigator.pushNamed(context, '/HomePage');
                    },
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width / 3,
                      child: Card(
                        color: Colors.white,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40),
                        ),
                        child: Container(
                          padding: EdgeInsets.all(10),
                          child: Text(
                            "กลับสู่หน้าหลัก".tr(),
                            maxLines: 1,
                            textAlign: TextAlign.center,
                            style: GoogleFonts.kanit(
                              color: ColorCustom.greyBorder,
                              fontSize: 14,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      // saveQrCode();
                      captureQrCode();
                    },
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width / 3,
                      child: Card(
                        color: Colors.white,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(40),
                        ),
                        child: Container(
                          padding: EdgeInsets.all(10),
                          child: Text(
                            "Save QR".tr(),
                            textAlign: TextAlign.center,
                            style: GoogleFonts.kanit(
                              color: ColorCustom.greyBorder,
                              fontSize: 14,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 20,
              ),
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(20.0),
        child: Stack(
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Row(
                  children: [
                    IconButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        icon: Icon(
                          Icons.arrow_back_ios,
                          color: Colors.black,
                        )),
                    Expanded(
                      child: Text(
                        "Create QR code to specify the amount".tr(),
                        maxLines: 1,
                        style: TextStyle(
                          color: Color(0xff050505),
                          fontSize: 20,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    IconButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        icon: Icon(
                          Icons.close,
                          color: Colors.black,
                        )),
                  ],
                ),
                Expanded(
                  child: Container(
                    width: double.infinity,
                    alignment: Alignment.center,
                    child: TextField(
                      showCursor: true,
                      readOnly: true,
                      textAlign: TextAlign.center,
                      keyboardType: TextInputType.number,
                      inputFormatters: [
                        FilteringTextInputFormatter.allow(RegExp(r'[0-9.]')),
                      ],
                      controller: price,
                      style: TextStyle(fontSize: 30, color: Color(0xff9d001b)),
                      decoration: InputDecoration(
                        hintStyle: TextStyle(fontSize: 30, color: Color(0xff9d001b)),
                        hintText: '0.00',
                        border: InputBorder.none,
                        contentPadding: EdgeInsets.symmetric(horizontal: 16),
                      ),
                    ),
                  ),
                ),
                Container(
                  //  padding: EdgeInsets.symmetric(horizontal: 50.0),
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          NumpadButton(
                            text: '1',
                            onPressed: () => setValue('1'),
                          ),
                          NumpadButton(
                            text: '2',
                            onPressed: () => setValue('2'),
                          ),
                          NumpadButton(
                            text: '3',
                            onPressed: () => setValue('3'),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          NumpadButton(
                            text: '4',
                            onPressed: () => setValue('4'),
                          ),
                          NumpadButton(
                            text: '5',
                            onPressed: () => setValue('5'),
                          ),
                          NumpadButton(
                            text: '6',
                            onPressed: () => setValue('6'),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          NumpadButton(
                            text: '7',
                            onPressed: () => setValue('7'),
                          ),
                          NumpadButton(
                            text: '8',
                            onPressed: () => setValue('8'),
                          ),
                          NumpadButton(
                            text: '9',
                            onPressed: () => setValue('9'),
                          ),
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Visibility(
                            child: NumpadButton(
                              text: '0',
                              onPressed: () {},
                            ),
                            maintainSize: true,
                            maintainAnimation: true,
                            maintainState: true,
                            visible: false,
                          ),
                          /*  NumpadButton(
                            text: '.',
                            onPressed: () => setValue('.'),
                          ),*/
                          NumpadButton(
                            text: '0',
                            onPressed: () => setValue('0'),
                          ),
                          NumpadButton(
                            haveBorder: false,
                            icon: Icons.backspace,
                            onPressed: () => backspace(),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
                InkWell(
                  onTap: () async {
                    initTopUp();
                  },
                  child: SizedBox(
                    width: double.infinity,
                    child: Card(
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(40),
                      ),
                      child: Container(
                        padding: EdgeInsets.all(10),
                        child: Text(
                          "Create QR code".tr(),
                          textAlign: TextAlign.center,
                          style: GoogleFonts.kanit(
                            color: ColorCustom.greyBorder,
                            fontSize: 20,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
              ],
            ),
            loading
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : Container()
          ],
        ));
  }
}