import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';

import '../PinCodeVadidate.dart';
import 'TransferCathayPayDialog.dart';

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

  @override
  State<TransferCathayPay> createState() => _TransferCathayPayState();
}

class _TransferCathayPayState extends State<TransferCathayPay> {
  TextEditingController _phone = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Row(
            children: [
              IconButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  icon: Icon(
                    Icons.arrow_back_ios,
                    color: Colors.black,
                  )),
              Text(
                "โอนเงินให้สมาชิก NEO PAY",
                style: TextStyle(
                  color: Color(0xff050505),
                  fontSize: 20,
                ),
              )
            ],
          ),
          Spacer(),
          Container(
            child: TextField(
              keyboardType: TextInputType.number,
              inputFormatters: [
                FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
              ],
              controller: _phone,
              decoration: InputDecoration(
                hintText: 'เบอร์โทรศัพท์ผู้รับ',
                border: InputBorder.none,
                contentPadding: EdgeInsets.symmetric(horizontal: 16),
              ),
            ),
            margin: EdgeInsets.symmetric(horizontal: 20),
            height: 48,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(100),
              color: Color(0xfff2f2f2),
            ),
          ),
          Spacer(),
          InkWell(
            onTap: () async {
              showModalBottomSheet<void>(
                  context: context,
                  isScrollControlled: true,
                  useSafeArea: true,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(16),
                    ),
                  ),
                  builder: (BuildContext context) {
                    return TransferCathayPayDetail();
                  });
            },
            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,
          )
        ],
      ),
    );
  }
}

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

  @override
  State<TransferCathayPayDetail> createState() => _TransferCathayPayDetailState();
}

class _TransferCathayPayDetailState extends State<TransferCathayPayDetail> {
  @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: GoogleFonts.kanit(
              color: Colors.black,
              fontSize: 20,
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Text(
                    "ชื่อ",
                    style: TextStyle(
                      color: Color(0xff65676b),
                      fontSize: 16,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    height: 48,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      color: Color(0xfff2f2f2),
                    ),
                    child: Row(
                      children: [
                        Spacer(),
                        Text(
                          "กมลรวี กอสัมพันธ์",
                          textAlign: TextAlign.right,
                          style: TextStyle(
                            color: Color(0xff65676b),
                            fontSize: 20,
                          ),
                        ),
                        SizedBox(
                          width: 20,
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Row(
                    children: [
                      Text(
                        "เบอร์โทรศัพท์",
                        style: TextStyle(
                          color: Color(0xff65676b),
                          fontSize: 14,
                          fontWeight: FontWeight.w300,
                        ),
                      ),
                      Spacer(),
                      Text(
                        "089 - 108 - 0891",
                        textAlign: TextAlign.right,
                        style: TextStyle(
                          color: Color(0xff65676b),
                          fontSize: 16,
                        ),
                      )
                    ],
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "จำนวนเงินที่โอน / จ่าย",
                    style: TextStyle(
                      color: Color(0xff65676b),
                      fontSize: 16,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Container(
                    height: 48,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                      color: Color(0xfff2f2f2),
                    ),
                    child: Row(
                      children: [
                        Spacer(),
                        Text(
                          "5,000.00",
                          textAlign: TextAlign.right,
                          style: TextStyle(
                            color: Color(0xff65676b),
                            fontSize: 20,
                          ),
                        ),
                        SizedBox(
                          width: 20,
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text(
                    "ใช้แต้ม NEO PAY แทนเงินสด",
                    style: TextStyle(
                      color: Color(0xff65676b),
                      fontSize: 16,
                      fontWeight: FontWeight.w300,
                    ),
                  ),
                  Text(
                    "คะแนนของคุณ : 12,000 แต้ม",
                    style: TextStyle(
                      color: Color(0xff9d001b),
                      fontSize: 14,
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Container(
                        width: 161,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: Color(0xfff2f2f2),
                        ),
                        padding: const EdgeInsets.symmetric(
                          horizontal: 20,
                          vertical: 6,
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.end,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              "10 แต้ม",
                              textAlign: TextAlign.right,
                              style: TextStyle(
                                color: Color(0xff65676b),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Text(
                        "=",
                        textAlign: TextAlign.right,
                        style: TextStyle(
                          color: Color(0xff65676b),
                          fontSize: 24,
                        ),
                      ),
                      Container(
                        width: 161,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: Color(0xff9d001b),
                        ),
                        padding: const EdgeInsets.symmetric(
                          horizontal: 20,
                          vertical: 6,
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.end,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              "100 บาท",
                              textAlign: TextAlign.right,
                              style: TextStyle(
                                color: Colors.white,
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                  Center(
                    child: Text(
                      "1 แต้ม = 10 สตางค์",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: Color(0xff65676b),
                        fontSize: 14,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                  ),
                  Container(
                    child: Column(
                      children: [
                        SizedBox(
                          height: 20,
                        ),
                        Row(
                          children: [
                            Text(
                              "ยอดเงินทั้งหมด",
                              style: TextStyle(
                                color: Color(0xff65676b),
                                fontSize: 16,
                              ),
                            ),
                            Spacer(),
                            Text(
                              "4.990.00",
                              textAlign: TextAlign.right,
                              style: TextStyle(
                                color: Color(0xff9d001b),
                                fontSize: 16,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                            Text(
                              " บาท",
                              textAlign: TextAlign.right,
                              style: TextStyle(
                                color: Color(0xff65676b),
                                fontSize: 16,
                              ),
                            )
                          ],
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        InkWell(
                          onTap: () async {
                            final result = await Navigator.push(
                              context,
                              MaterialPageRoute(builder: (context) => PinCodeValidatePage()),
                            );
                            if (result == true) {
                              showDialog(
                                  context: context,
                                  builder: (BuildContext context) {
                                    return TransferCathayPayDialog();
                                  });
                            }
                          },
                          child: Container(
                            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: 10,
                        ),
                      ],
                    ),
                    height: 136,
                    color: Colors.transparent,
                  ),
                  SizedBox(
                    height: 10,
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}