import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:qyuota/config/colors.dart';
import 'package:qyuota/config/text_style.dart';
import 'package:qyuota/widget/custom_button.dart';
import 'package:qyuota/widget/custom_textfield.dart';

import '../../config/images.dart';

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

  @override
  State<TopupBalanceScreen> createState() => _TopupBalanceScreenState();
}

class _TopupBalanceScreenState extends State<TopupBalanceScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                child: Container(
                  color: ConstColors.primaryColor,
                  child: Padding(
                    padding: const EdgeInsets.only(left: 20, right: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(
                            height: MediaQuery.of(context).padding.top + 15),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            InkWell(
                              onTap: () {
                                Navigator.pop(context);
                              },
                              child: const Icon(
                                Icons.arrow_back,
                                color: ConstColors.whiteColor,
                              ),
                            ),
                            Text(
                              "Top Up",
                              style: pSemiBold18.copyWith(
                                fontSize: 20,
                                color: ConstColors.whiteColor,
                              ),
                            ),
                            const Icon(
                              Icons.arrow_back,
                              color: Colors.transparent,
                            ),
                          ],
                        ),
                        const SizedBox(height: 20),
                        Text(
                          "Pilih atau masukkan nomor telepon",
                          style: pSemiBold18.copyWith(
                            fontSize: 20,
                            color: ConstColors.whiteColor,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: ListView(
                  padding: EdgeInsets.zero,
                  physics: const ClampingScrollPhysics(),
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                          left: 20, right: 20, top: 80, bottom: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const SizedBox(height: 20),
                          Row(
                            children: [
                              card("5000"),
                              const SizedBox(width: 15),
                              card("10000"),
                            ],
                          ),
                          const SizedBox(height: 15),
                          Row(
                            children: [
                              card("15000"),
                              const SizedBox(width: 15),
                              card("20000"),
                            ],
                          ),
                          const SizedBox(height: 15),
                          Row(
                            children: [
                              card("50000"),
                              const SizedBox(width: 15),
                              card("100000"),
                            ],
                          ),
                          const SizedBox(height: 15),
                          Row(
                            children: [
                              card("200000"),
                              const SizedBox(width: 15),
                              card("500000"),
                            ],
                          ),
                          const SizedBox(height: 20),
                          CustomButton(
                            text: "Lanjutkan",
                            color: ConstColors.skyColor,
                            onTap: () {
                              Get.bottomSheet(
                                Container(
                                  height: Get.height / 2,
                                  width: Get.width,
                                  decoration: const BoxDecoration(
                                    color: ConstColors.whiteColor,
                                    borderRadius: BorderRadius.only(
                                      topLeft: Radius.circular(15),
                                      topRight: Radius.circular(15),
                                    ),
                                  ),
                                  child: Padding(
                                    padding: const EdgeInsets.only(
                                        left: 20,
                                        right: 20,
                                        top: 20,
                                        bottom: 20),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "Detail Transaksi",
                                          style: pSemiBold20.copyWith(
                                            fontSize: 16,
                                          ),
                                        ),
                                        const SizedBox(height: 20),
                                        Row(
                                          children: [
                                            Container(
                                              height: 36,
                                              width: 36,
                                              decoration: const BoxDecoration(
                                                image: DecorationImage(
                                                  image: AssetImage(
                                                    DefaultImages.p17,
                                                  ),
                                                ),
                                              ),
                                            ),
                                            const SizedBox(width: 14),
                                            Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              children: [
                                                Text(
                                                  "Hayung",
                                                  style: pSemiBold20.copyWith(
                                                    fontSize: 16,
                                                  ),
                                                ),
                                                const SizedBox(height: 5),
                                                Text(
                                                  "+0123456789",
                                                  style: pRegular14.copyWith(
                                                    fontSize: 12,
                                                    color:
                                                        ConstColors.lightColor,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ],
                                        ),
                                        const SizedBox(height: 20),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Column(
                                              mainAxisAlignment:
                                                  MainAxisAlignment.center,
                                              crossAxisAlignment:
                                                  CrossAxisAlignment.start,
                                              children: [
                                                Text(
                                                  "Saldo",
                                                  style: pSemiBold20.copyWith(
                                                    fontSize: 16,
                                                  ),
                                                ),
                                                const SizedBox(height: 5),
                                                Text(
                                                  "\Rp100000",
                                                  style: pRegular14.copyWith(
                                                    fontSize: 12,
                                                    color:
                                                        ConstColors.lightColor,
                                                  ),
                                                ),
                                              ],
                                            ),
                                            Row(
                                              children: [
                                                Padding(
                                                  padding:
                                                      const EdgeInsets.only(
                                                          top: 10),
                                                  child: Text(
                                                    "\$",
                                                    style: pSemiBold20.copyWith(
                                                      fontSize: 14,
                                                      color: ConstColors
                                                          .primaryColor,
                                                    ),
                                                  ),
                                                ),
                                                const SizedBox(width: 2),
                                                Text(
                                                  "50",
                                                  style: pSemiBold20.copyWith(
                                                    fontSize: 20,
                                                    color: ConstColors
                                                        .primaryColor,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ],
                                        ),
                                        const SizedBox(height: 10),
                                        Divider(
                                          color: ConstColors.lightTextColor
                                              .withOpacity(0.8),
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Text(
                                              "Total",
                                              style: pSemiBold20.copyWith(
                                                fontSize: 20,
                                              ),
                                            ),
                                            Row(
                                              children: [
                                                Padding(
                                                  padding:
                                                      const EdgeInsets.only(
                                                          top: 10),
                                                  child: Text(
                                                    "\$",
                                                    style: pSemiBold20.copyWith(
                                                      fontSize: 14,
                                                      color: ConstColors
                                                          .primaryColor,
                                                    ),
                                                  ),
                                                ),
                                                const SizedBox(width: 2),
                                                Text(
                                                  "50",
                                                  style: pSemiBold20.copyWith(
                                                    fontSize: 34,
                                                    color: ConstColors
                                                        .primaryColor,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ],
                                        ),
                                        const Expanded(child: SizedBox()),
                                        CustomButton(
                                          text: "Continue",
                                          color: ConstColors.skyColor,
                                          onTap: () {
                                            Navigator.pop(context);
                                          },
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              );
                            },
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(top: 180, left: 20, right: 20),
            child: Container(
              height: 110,
              width: Get.width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: ConstColors.whiteColor,
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xff4E568C).withOpacity(0.1),
                    blurRadius: 2,
                  )
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CustomTextField(
                      title: "Phone number",
                      hintText: "Phone number",
                      textEditingController:
                          TextEditingController(text: "+123456789"),
                      suffix: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: SvgPicture.asset(
                          DefaultImages.p12,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Widget card(String text) {
  return Expanded(
    child: Container(
      height: 70,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: ConstColors.whiteColor,
        boxShadow: [
          BoxShadow(
            color: const Color(0xff4E568C).withOpacity(0.1),
            blurRadius: 2,
          )
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 10),
            child: Text(
              "\Rp",
              style: pSemiBold18.copyWith(
                fontSize: 10,
                color: ConstColors.lightColor,
              ),
            ),
          ),
          const SizedBox(width: 2),
          Text(
            text,
            style: pSemiBold18.copyWith(
              fontSize: 32,
            ),
          ),
        ],
      ),
    ),
  );
}