import 'dart:convert';

import 'package:cathaypay_mobile/GetPaid/GetPaidDialog.dart';
import 'package:cathaypay_mobile/Numpad.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

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

  @override
  State<GetPaidByAmount> createState() => _GetPaidByAmountState();
}

class _GetPaidByAmountState extends State<GetPaidByAmount> {
  bool is_amount = false;
  final TextEditingController _amount = TextEditingController();

  setValue(String val) {
    setState(() {
      _amount.text += val;
    });
  }

  backspace(String text) {
    if (_amount.text.length > 0) {
      setState(() {
        _amount.text = _amount.text.substring(0, _amount.text.length - 1);
      });
    }
  }

  QrCodeModel? myQrCode;

  initMyQr() {
    if (_amount.text.isNotEmpty) {
      var param = jsonEncode(<dynamic, dynamic>{"MobileDeviceNo": profile?.phoneNumber ?? "", "Note": "qrCode", "Amount": int.parse(_amount.text)});
      Api.post(context, Api.qrCodeTransfer, param).then((value) => {
            if (value != null) {initQrCode(value)} else {}
          });
    }
  }

  initQrCode(value) {
    myQrCode = QrCodeModel.fromJson(value["data"]);
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return GetPaidDialog(
            qrCodeModel: myQrCode!,
            price: int.parse(_amount.text),
          );
        });
  }

  var amount = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          actions: [
            CupertinoButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: IconButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                icon: const Icon(
                  Icons.clear,
                  color: Colors.grey,
                ),
              ),
            )
          ],
          elevation: 0,
          title: Text(
            "รับเงิน",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.black,
              fontSize: 20,
            ),
          ),
        ),
        body: Container(
          child: Column(
            children: [
              SizedBox(
                height: 60,
              ),
              Center(
                child: Text(
                  "฿ ${_amount.text}",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Color(0xff9d001b),
                    fontSize: 40,
                  ),
                ),
              ),
              SizedBox(
                height: 100,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                    child: InkWell(
                      onTap: () {
                        setState(() {
                          is_amount = true;
                        });
                      },
                      child: Container(
                        padding: EdgeInsets.symmetric(vertical: 10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: is_amount ? Color(0xff2d2d2d) : Color(0xfff2f2f2),
                        ),
                        child: Center(
                          child: Text(
                            "ระบุจำนวนเงิน",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: is_amount ? Colors.white : Color(0xff050505),
                              fontSize: 16,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Expanded(
                      child: InkWell(
                          onTap: () {
                            setState(() {
                              is_amount = false;
                            });
                          },
                          child: Container(
                            padding: EdgeInsets.symmetric(vertical: 10),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(100),
                              color: is_amount ? Color(0xfff2f2f2) : Color(0xff2d2d2d),
                            ),
                            child: Center(
                              child: Text(
                                "ระบุสินค้า",
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  color: is_amount ? Color(0xff050505) : Colors.white,
                                  fontSize: 16,
                                ),
                              ),
                            ),
                          ))),
                  SizedBox(
                    width: 10,
                  ),
                ],
              ),
              is_amount
                  ? Expanded(
                      child: Column(
                      children: [
                        Expanded(
                          child: Column(
                            children: <Widget>[
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  NumpadButtonSmall(
                                    text: '1',
                                    onPressed: () => setValue('1'),
                                  ),
                                  NumpadButtonSmall(
                                    text: '2',
                                    onPressed: () => setValue('2'),
                                  ),
                                  NumpadButtonSmall(
                                    text: '3',
                                    onPressed: () => setValue('3'),
                                  ),
                                ],
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  NumpadButtonSmall(
                                    text: '4',
                                    onPressed: () => setValue('4'),
                                  ),
                                  NumpadButtonSmall(
                                    text: '5',
                                    onPressed: () => setValue('5'),
                                  ),
                                  NumpadButtonSmall(
                                    text: '6',
                                    onPressed: () => setValue('6'),
                                  ),
                                ],
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  NumpadButtonSmall(
                                    text: '7',
                                    onPressed: () => setValue('7'),
                                  ),
                                  NumpadButtonSmall(
                                    text: '8',
                                    onPressed: () => setValue('8'),
                                  ),
                                  NumpadButtonSmall(
                                    text: '9',
                                    onPressed: () => setValue('9'),
                                  ),
                                ],
                              ),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  SizedBox(
                                    width: 70,
                                    height: 70,
                                  ),
                                  NumpadButtonSmall(
                                    text: '0',
                                    onPressed: () => setValue('0'),
                                  ),
                                  NumpadButtonSmall(
                                    haveBorder: false,
                                    icon: Icons.backspace,
                                    onPressed: () => backspace(_amount.text),
                                  ),
                                ],
                              )
                            ],
                          ),
                        ),
                        InkWell(
                          onTap: () async {
                            initMyQr();
                          },
                          child: Container(
                            margin: EdgeInsets.only(left: 20, right: 20),
                            width: MediaQuery.of(context).size.width,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(40),
                              color: Color(0xff9d001b),
                            ),
                            padding: const EdgeInsets.symmetric(
                              horizontal: 10,
                              vertical: 12,
                            ),
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(
                                  width: 106,
                                  height: 32,
                                  child: Text(
                                    "เรียกเก็บเงิน",
                                    textAlign: TextAlign.center,
                                    style: GoogleFonts.kanit(
                                      color: Colors.white,
                                      fontSize: 20,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        )
                      ],
                    ))
                  : Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Container(
                        margin: const EdgeInsets.symmetric(vertical: 10),
                        child: Column(
                          children: [
                            Column(
                              children: [
                                Row(
                                  children: [
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "สินค้า 01",
                                          style: TextStyle(
                                            color: Color(0xff050505),
                                            fontSize: 16,
                                          ),
                                        ),
                                        SizedBox(
                                          width: 118,
                                          height: 24,
                                          child: Text(
                                            "฿ ${_amount.text}",
                                            style: TextStyle(
                                              color: Color(0xff65676b),
                                              fontSize: 14,
                                              fontFamily: "Kanit",
                                              fontWeight: FontWeight.w300,
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                    Spacer(),
                                    IconButton(
                                      onPressed: () {
                                        setState(() {
                                          amount++;
                                          _amount.text = ((int.tryParse(_amount.text) ?? 0) * amount).toString();
                                        });
                                      },
                                      icon: const Icon(
                                        Icons.add_circle_outline,
                                        color: Colors.grey,
                                      ),
                                    ),
                                    Text(
                                      amount.toString(),
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 18,
                                      ),
                                    ),
                                    IconButton(
                                      onPressed: () {
                                        if (amount > 0) {
                                          setState(() {
                                            amount--;
                                            _amount.text = ((int.tryParse(_amount.text) ?? 0) * amount).toString();
                                          });
                                        }
                                      },
                                      icon: const Icon(Icons.remove_circle_outline, color: Colors.grey),
                                    )
                                  ],
                                ),
                                Divider(color: Color.fromRGBO(101, 103, 107, 1), thickness: 1)
                              ],
                            ),
                            SizedBox(
                              height: 20,
                            ),
                            InkWell(
                              onTap: () async {
                                initMyQr();
                              },
                              child: Container(
                                margin: EdgeInsets.only(left: 20, right: 20),
                                width: MediaQuery.of(context).size.width,
                                height: 51,
                                decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(40),
                                  color: Color(0xff9d001b),
                                ),
                                padding: const EdgeInsets.symmetric(
                                  horizontal: 10,
                                  vertical: 12,
                                ),
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    SizedBox(
                                      width: 106,
                                      height: 32,
                                      child: Text(
                                        "เรียกเก็บเงิน",
                                        textAlign: TextAlign.center,
                                        style: GoogleFonts.kanit(
                                          color: Colors.white,
                                          fontSize: 20,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 20,
                            )
                          ],
                        ),
                      ),
                    )
            ],
          ),
        ));
  }
}