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/images.dart';
import 'package:qyuota/config/text_style.dart';
import 'package:qyuota/view/profile/package_screen.dart';
import 'package:qyuota/view/profile/profile_view.dart';
import 'package:qyuota/widget/custom_button.dart';

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

  @override
  State<ReceiptScreen> createState() => _ReceiptScreenState();
}

class _ReceiptScreenState extends State<ReceiptScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                child: Container(
                  color: ConstColors.primaryColor,
                  child: Column(
                    children: [
                      SizedBox(height: MediaQuery.of(context).padding.top + 15),
                      Padding(
                        padding: const EdgeInsets.only(left: 20, right: 20),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            InkWell(
                              onTap: () {
                                Navigator.pop(context);
                              },
                              child: const Icon(
                                Icons.arrow_back,
                                color: ConstColors.whiteColor,
                              ),
                            ),
                            Text(
                              "Payment Method",
                              style: pSemiBold18.copyWith(
                                fontSize: 20,
                                color: ConstColors.whiteColor,
                              ),
                            ),
                            SizedBox(
                              height: 24,
                              width: 24,
                              child: SvgPicture.asset(
                                DefaultImages.p14,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: ListView(
                  padding: EdgeInsets.zero,
                  physics: const ClampingScrollPhysics(),
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 20, right: 20, top: 100, bottom: 20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Select your payment method",
                            style: pSemiBold20.copyWith(
                              fontSize: 20,
                            ),
                          ),
                          const SizedBox(height: 20),
                          Column(
                            children: [
                              for (var i = 0; i < 3; i++)
                                Padding(
                                  padding: const EdgeInsets.only(bottom: 15),
                                  child: Container(
                                    height: 54,
                                    width: Get.width,
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(12),
                                      border: Border.all(
                                        color: i == 0 ? ConstColors.primaryColor : ConstColors.lightTextColor.withOpacity(0.5),
                                      ),
                                    ),
                                    child: Padding(
                                      padding: const EdgeInsets.only(left: 14, right: 14),
                                      child: Row(
                                        children: [
                                          Container(
                                            height: 18,
                                            width: 18,
                                            decoration: BoxDecoration(
                                              shape: BoxShape.circle,
                                              border: Border.all(
                                                color: i == 0 ? ConstColors.primaryColor : ConstColors.lightTextColor,
                                              ),
                                            ),
                                            child: Padding(
                                              padding: const EdgeInsets.all(3.0),
                                              child: CircleAvatar(
                                                backgroundColor: i == 0 ? ConstColors.primaryColor : Colors.transparent,
                                              ),
                                            ),
                                          ),
                                          const SizedBox(width: 14),
                                          Text(
                                            i == 0
                                                ? "Apple Pay"
                                                : i == 1
                                                    ? "Virtual Bank Account"
                                                    : "Credit Card",
                                            style: pRegular14.copyWith(
                                              fontSize: 14,
                                            ),
                                          ),
                                          const Expanded(child: SizedBox()),
                                          Container(
                                            height: 23,
                                            width: i == 0
                                                ? 57
                                                : i == 1
                                                    ? 53
                                                    : 34,
                                            decoration: BoxDecoration(
                                              image: DecorationImage(
                                                image: AssetImage(
                                                  i == 0
                                                      ? DefaultImages.p19
                                                      : i == 1
                                                          ? DefaultImages.p20
                                                          : DefaultImages.p21,
                                                ),
                                                fit: BoxFit.fill,
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                            ],
                          ),
                          const SizedBox(height: 20),
                          Text(
                            "Voucher Code",
                            style: pSemiBold20.copyWith(
                              fontSize: 20,
                            ),
                          ),
                          const SizedBox(height: 15),
                          Container(
                            height: 56,
                            width: Get.width,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(12),
                              color: ConstColors.whiteColor,
                              boxShadow: [
                                BoxShadow(
                                  color: const Color(0xff4E568C).withOpacity(0.06),
                                ),
                              ],
                            ),
                            child: Padding(
                              padding: const EdgeInsets.only(left: 20, right: 20),
                              child: row(
                                DefaultImages.p13,
                                "Insert your voucher code",
                                "",
                              ),
                            ),
                          ),
                          const SizedBox(height: 20),
                          CustomButton(
                            text: "Proccesed",
                            color: ConstColors.skyColor,
                            onTap: () {
                              Get.to(
                                const PackageScreen(),
                                transition: Transition.rightToLeft,
                              );
                            },
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20, right: 20, top: 100),
            child: Container(
              height: 207,
              width: Get.width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(12),
                color: ConstColors.whiteColor,
                boxShadow: [
                  BoxShadow(
                    color: const Color(0xff4E568C).withOpacity(0.06),
                  ),
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text(
                          "PowerNet. 20 GB",
                          style: pSemiBold20.copyWith(
                            fontSize: 16,
                          ),
                        ),
                        const SizedBox(height: 5),
                        Text(
                          "20 GB / 24 hour",
                          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(
                              "PowerNet. 20 GB",
                              style: pSemiBold20.copyWith(
                                fontSize: 16,
                              ),
                            ),
                            const SizedBox(height: 5),
                            Text(
                              "\$18",
                              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(
                              "18",
                              style: pSemiBold20.copyWith(
                                fontSize: 20,
                                color: ConstColors.primaryColor,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                    const SizedBox(height: 8),
                    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(
                              "18",
                              style: pSemiBold20.copyWith(
                                fontSize: 34,
                                color: ConstColors.primaryColor,
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}