import 'package:cathaypay_mobile/eFX/EFXBuy.dart';
import 'package:cathaypay_mobile/eFX/EFXSell.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

  @override
  State<EFXPage> createState() => _EFXPageState();
}

class _EFXPageState extends State<EFXPage> {
  bool _is_history = false;

  @override
  Widget build(BuildContext context) {
    return 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: [
              Padding(
                padding: const EdgeInsets.only(top: 15),
                child: 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
                  ? Container()
                  : Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          SizedBox(
                            height: 20,
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10, bottom: 10),
                            width: MediaQuery.of(context).size.width,
                            child: Row(
                              children: [
                                SizedBox(
                                  width: 20,
                                ),
                                Text(
                                  "สกุลเงินต่างประเทศของฉัน",
                                  style: TextStyle(
                                    color: Color(0xff050505),
                                    fontSize: 20,
                                  ),
                                ),
                              ],
                            ),
                            height: 54,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0x19000000),
                                  blurRadius: 4,
                                  offset: Offset(1, 1),
                                ),
                              ],
                              color: Colors.white,
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10, bottom: 10),
                            width: MediaQuery.of(context).size.width,
                            child: Row(
                              children: [
                                SizedBox(
                                  width: 20,
                                ),
                                Image(
                                  image: AssetImage('images/usa.png'),
                                  fit: BoxFit.cover,
                                ),
                                Text(
                                  "  USA",
                                  style: TextStyle(
                                    color: Color(0xff050505),
                                    fontSize: 20,
                                  ),
                                ),
                                Spacer(),
                                Text(
                                  "200",
                                  style: TextStyle(
                                    color: Color(0xff050505),
                                    fontSize: 20,
                                  ),
                                ),
                                SizedBox(
                                  width: 20,
                                )
                              ],
                            ),
                            height: 54,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0x19000000),
                                  blurRadius: 4,
                                  offset: Offset(1, 1),
                                ),
                              ],
                              color: Colors.white,
                            ),
                          ),
                          Container(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "   อัตราแลกเปลี่ยน",
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 20,
                                  ),
                                ),
                                Text(
                                  "    อัพเดทข้อมูลเมื่อ 17 มกราคม 2566",
                                  style: TextStyle(
                                    color: Colors.white,
                                  ),
                                )
                              ],
                            ),
                            margin: EdgeInsets.only(top: 10, bottom: 10),
                            width: MediaQuery.of(context).size.width,
                            height: 54,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0x19000000),
                                  blurRadius: 4,
                                  offset: Offset(1, 1),
                                ),
                              ],
                              color: Color(0xffd0315a),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10, bottom: 10),
                            width: MediaQuery.of(context).size.width,
                            child: Row(
                              children: [
                                SizedBox(
                                  width: 20,
                                ),
                                Expanded(
                                  flex: 2,
                                  child: Text(
                                    "สกุลเงิน",
                                    style: TextStyle(
                                      color: Color(0xff050505),
                                      fontSize: 14,
                                    ),
                                  ),
                                ),
                                Expanded(
                                    flex: 1,
                                    child: Center(
                                      child: Text(
                                        "ราคาขาย",
                                        style: TextStyle(
                                          color: Color(0xff050505),
                                          fontSize: 14,
                                        ),
                                      ),
                                    )),
                                SizedBox(
                                  width: 20,
                                ),
                                Expanded(
                                    flex: 1,
                                    child: Center(
                                      child: Text(
                                        "ราคาซื้อ",
                                        style: TextStyle(
                                          color: Color(0xff050505),
                                          fontSize: 14,
                                        ),
                                      ),
                                    )),
                                SizedBox(
                                  width: 20,
                                ),
                              ],
                            ),
                            height: 54,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0x19000000),
                                  blurRadius: 4,
                                  offset: Offset(1, 1),
                                ),
                              ],
                              color: Colors.white,
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10, bottom: 10),
                            width: MediaQuery.of(context).size.width,
                            child: Row(
                              children: [
                                SizedBox(
                                  width: 20,
                                ),
                                Expanded(
                                  flex: 2,
                                  child: Row(
                                    children: [
                                      Image(
                                        image: AssetImage('images/usa.png'),
                                        fit: BoxFit.cover,
                                      ),
                                      Text(
                                        "  USA",
                                        style: TextStyle(
                                          color: Color(0xff050505),
                                          fontSize: 20,
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                                Expanded(
                                    flex: 1,
                                    child: InkWell(
                                      onTap: () {
                                        showModalBottomSheet<void>(
                                            context: context,
                                            isScrollControlled: true,
                                            useSafeArea: true,
                                            builder: (BuildContext context) {
                                              return EFXSell();
                                            });
                                      },
                                      child: Container(
                                        decoration: BoxDecoration(
                                          borderRadius:
                                          BorderRadius.circular(100),
                                          border: Border.all(
                                            color: Color(0xff9d001b),
                                            width: 1,
                                          ),
                                          color: Colors.white,
                                        ),
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 17,
                                          vertical: 2,
                                        ),
                                        child: Text(
                                          "30.44",
                                          maxLines: 1,
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            color: Color(0xff9d001b),
                                            fontSize: 15,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ),
                                    )),
                                SizedBox(
                                  width: 20,
                                ),
                                Expanded(
                                    flex: 1,
                                    child: InkWell(
                                      onTap: () {
                                        showModalBottomSheet<void>(
                                            context: context,
                                            isScrollControlled: true,
                                            useSafeArea: true,
                                            builder: (BuildContext context) {
                                              return EFXBuy();
                                            });
                                      },
                                      child: Container(
                                        decoration: BoxDecoration(
                                          borderRadius:
                                          BorderRadius.circular(100),
                                          color: Color(0xff9d001b),
                                        ),
                                        padding: const EdgeInsets.symmetric(
                                          horizontal: 17,
                                          vertical: 2,
                                        ),
                                        child:   Text(
                                          "31.44",
                                          maxLines: 1,
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 15,
                                            fontWeight: FontWeight.w500,
                                          ),
                                        ),
                                      ),
                                    )),
                                SizedBox(
                                  width: 20,
                                ),
                              ],
                            ),
                            height: 54,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  color: Color(0x19000000),
                                  blurRadius: 4,
                                  offset: Offset(1, 1),
                                ),
                              ],
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    )
            ],
          ),
        ));
  }
}