import 'package:cathaypay_mobile/TopUp/TopUp.dart';
import 'package:cathaypay_mobile/TopUp/TopUpAddBank.dart';
import 'package:cathaypay_mobile/Withdraw/WithDraw.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

  @override
  State<WithDrawMenuPage> createState() => _WithDrawMenuPageState();
}

class _WithDrawMenuPageState extends State<WithDrawMenuPage> {
  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(
            "เติมเงิน",
            textAlign: TextAlign.center,
            style: GoogleFonts.kanit(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
        body: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  InkWell(
                    onTap: () {
                      setState(() {
                        _is_history = false;
                      });
                    },
                    child: Column(
                      children: [
                        Text(
                          "ทำรายการ",
                          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(
                          "ประวัติ",
                          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 ? WithDrawHistory() : WithDrawListMenu()
            ],
          ),
        ),
      ),
    );
  }
}

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

  @override
  State<WithDrawListMenu> createState() => _WithDrawListMenuState();
}

class _WithDrawListMenuState extends State<WithDrawListMenu> {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 20, right: 20),
      child: Column(
        children: [
          InkWell(onTap: (){
            showModalBottomSheet<void>(
                context: context,
                isScrollControlled: true,useSafeArea: true,
                builder: (BuildContext context) {
                  return SafeArea(child: WithDrawPage());
                });
          },
            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(0x3f000000),
                    blurRadius: 4,
                    offset: Offset(0, 4),
                  ),
                ],
                color: Color(0xfffbfbfb),
              ),
            ),
          ),

        ],
      ),
    );
  }
}

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

  @override
  State<WithDrawHistory> createState() => _WithDrawHistoryState();
}

class _WithDrawHistoryState extends State<WithDrawHistory> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 3,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "8 เม.ย. 66",
                  style: GoogleFonts.kanit(
                    color: Color(0xff565656),
                    fontSize: 16,
                  ),
                ),
                Container(
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Text(
                              "เติมเงิน",
                              style: GoogleFonts.kanit(
                                color: Color(0xff65676b),
                                fontSize: 16,
                                fontWeight: FontWeight.w300,
                              ),
                            ),
                            Spacer(),
                            Text(
                              "200.00 บาท",
                              textAlign: TextAlign.right,
                              style: GoogleFonts.kanit(
                                color: Color(0xff65676b),
                                fontSize: 16,
                              ),
                            )
                          ],
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          "CATHAY PAY",
                          style: TextStyle(
                            color: Color(0xff65676b),
                            fontSize: 16,
                          ),
                        ),
                        Text(
                          "12:40 น.",
                          style: TextStyle(
                            color: Color(0xff65676b),
                            fontSize: 14,
                            fontWeight: FontWeight.w300,
                          ),
                        ),
                        Row(
                          children: [
                            Spacer(),
                            Icon(
                              Icons.keyboard_arrow_down,
                              color: Colors.grey.shade400,
                              size: 30,
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.grey.shade100,
                  ),
                ),
              ],
            ),
          );
        });
  }
}