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:qr_flutter/qr_flutter.dart';
import 'package:saver_gallery/saver_gallery.dart';
import 'package:screenshot/screenshot.dart';

import '../Home/HomePage.dart';
import '../api/api.dart';
import '../model/qrcode.dart';

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

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

class _TransferPromptPayDetailState extends State<TopUpMyQrPage> {
  @override
  void initState() {
    initMyQr();
    super.initState();
  }

  bool loading = false;

  QrCodeModel? myQrCode;

  initMyQr() {
    var param = jsonEncode(<dynamic, dynamic>{
      "MobileDeviceNo": profile?.phoneNumber ?? "",
      "Note": "myQr",
    });
    Api.post(context, Api.myQrCode, param).then((value) => {
          if (value != null) {initQrCode(value)} else {}
        });
  }

  saveQrCode() {
    // ImageGallerySaver.saveImage(base64Decode(myQrCode?.qrCodeData ?? ""));
    String fileName = "neopay_${DateTime.now().millisecondsSinceEpoch}.jpg";
    SaverGallery.saveImage(base64Decode(myQrCode?.qrCodeData ?? ""), 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 = QrCodeModel.fromJson(value["data"]);
      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(
    //               "เติมเงิน",
    //               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?.qrCodeData ?? "")),
    //                         ),*/
    //                         Container(
    //                           margin: EdgeInsets.symmetric(horizontal: 15),
    //                           alignment: Alignment.center,
    //                           // child: Image.memory(
    //                           //   base64Decode(myQrCode?.qrCodeImage ?? ""),
    //                           //   fit: BoxFit.fitWidth,
    //                           // ),
    //                           child: QrImageView(
    //                             data: '${myQrCode?.qrText}|${profile?.phoneNumber}|${profile?.fullName}',
    //                             version: QrVersions.auto,
    //                             size: 200.0,
    //                           ),
    //                         ),
    //                         SizedBox(
    //                           height: 20,
    //                         ),
    //                         Text(
    //                           "QR ของคุณได้ถูกสร้างแล้ว\nผู้จ่ายสามารถสแกนเพื่อเติมเงินได้",
    //                           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(
    //                               "ชื่อบัญชี",
    //                               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(
    //                               "หมายเลขสมาชิก",
    //                               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(
    //                                 "จำนวนเงิน",
    //                                 style: TextStyle(
    //                                   color: Color(0xff050505),
    //                                   fontSize: 20,
    //                                 ),
    //                               ),
    //                               Expanded(child: Container()),
    //                               Text(
    //                                 Utils.moneyFormat(price.text),
    //                                 style: TextStyle(
    //                                   color: Color(0xff050505),
    //                                   fontSize: 20,
    //                                 ),
    //                               ),
    //                             ],
    //                           ),
    //                         )
    //                       ],
    //                     ),
    //                   ))),
    //           SizedBox(
    //             height: 20,
    //           ),
    //           Row(
    //             mainAxisAlignment: MainAxisAlignment.spaceAround,
    //             children: [
    //               InkWell(
    //                   onTap: () {
    //                     Navigator.of(context).pop();
    //                   },
    //                   child: Container(
    //                     margin: EdgeInsets.only(bottom: 15),
    //                     width: MediaQuery.of(context).size.width / 3.5,
    //                     height: 46,
    //                     decoration: BoxDecoration(
    //                       borderRadius: BorderRadius.circular(100),
    //                       color: Color(0xff2d2d2d),
    //                     ),
    //                     child: Center(
    //                         child: Text(
    //                       "ยกเลิก",
    //                       textAlign: TextAlign.center,
    //                       style: TextStyle(
    //                         color: Colors.white,
    //                         fontSize: 16,
    //                         fontWeight: FontWeight.w300,
    //                       ),
    //                     )),
    //                   )),
    //               InkWell(
    //                   onTap: () {
    //                     Navigator.pushNamed(context, '/HomePage');
    //                   },
    //                   child: Container(
    //                     margin: EdgeInsets.only(bottom: 15),
    //                     width: MediaQuery.of(context).size.width / 3.5,
    //                     height: 46,
    //                     decoration: BoxDecoration(
    //                       borderRadius: BorderRadius.circular(100),
    //                       color: Color(0xffad022c),
    //                     ),
    //                     child: Center(
    //                         child: Text(
    //                       "กลับสู่หน้าหลัก",
    //                       textAlign: TextAlign.center,
    //                       style: TextStyle(
    //                         color: Colors.white,
    //                         fontSize: 16,
    //                         fontWeight: FontWeight.w300,
    //                       ),
    //                     )),
    //                   )),
    //               InkWell(
    //                   onTap: () {
    //                     // saveQrCode();
    //                     captureQrCode();
    //                   },
    //                   child: Container(
    //                     margin: EdgeInsets.only(bottom: 15),
    //                     width: MediaQuery.of(context).size.width / 3.5,
    //                     height: 46,
    //                     decoration: BoxDecoration(
    //                       borderRadius: BorderRadius.circular(100),
    //                       color: Color(0xffad022c),
    //                     ),
    //                     child: Center(
    //                         child: Text(
    //                       "บันทึก QR",
    //                       textAlign: TextAlign.center,
    //                       style: TextStyle(
    //                         color: Colors.white,
    //                         fontSize: 16,
    //                         fontWeight: FontWeight.w300,
    //                       ),
    //                     )),
    //                   )),
    //             ],
    //           ),
    //           SizedBox(
    //             height: 20,
    //           ),
    //         ],
    //       );
    //     });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(20.0),
        child: 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?.qrCodeData ?? "")),
                            ),*/
                          Container(
                            margin: EdgeInsets.symmetric(horizontal: 15),
                            alignment: Alignment.center,
                            // child: Image.memory(
                            //   base64Decode(myQrCode?.qrCodeImage ?? ""),
                            //   fit: BoxFit.fitWidth,
                            // ),
                            child: QrImageView(
                              data: '${myQrCode?.qrText}|${profile?.phoneNumber}|${profile?.fullName}',
                              version: QrVersions.auto,
                              size: 200.0,
                            ),
                          ),
                          SizedBox(
                            height: 20,
                          ),
                          Text(
                            "QR ของคุณได้ถูกสร้างแล้ว\nผู้จ่ายสามารถสแกนเพื่อเติมเงินได้",
                            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(
                                "หมายเลขสมาชิก".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,
                          ),
                        ],
                      ),
                    ))),
            SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                InkWell(
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width / 3.5,
                    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.5,
                    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.5,
                    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,
            ),
          ],
        ));
  }
}