import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';
import 'package:qyuota/config/colors.dart';
import 'package:qyuota/config/images.dart';
import 'package:qyuota/config/text_style.dart';
import 'package:qyuota/view/tab_screen.dart';
import 'package:qyuota/widget/custom_button.dart';

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

  @override
  State<VerifyScreen> createState() => _VerifyScreenState();
}

class _VerifyScreenState extends State<VerifyScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ConstColors.primaryColor,
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                child: Container(
                  width: Get.width,
                  decoration: const BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                        DefaultImages.bg,
                      ),
                      fit: BoxFit.fill,
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 30),
                    child: Image.asset(
                      DefaultImages.welcome,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  width: Get.width,
                  decoration: const BoxDecoration(
                    color: ConstColors.whiteColor,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15),
                    ),
                  ),
                  child: ListView(
                    padding: EdgeInsets.zero,
                    physics: const ClampingScrollPhysics(),
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(
                            left: 20, right: 20, top: 30, bottom: 20),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Verifikasi nomor telepon",
                              style: pSemiBold18.copyWith(
                                fontSize: 34,
                                height: 1.4,
                              ),
                            ),
                            const SizedBox(height: 50),
                            Center(
                              child: Pinput(
                                defaultPinTheme: PinTheme(
                                  height: 42,
                                  width: 68,
                                  textStyle: pSemiBold18.copyWith(
                                    fontSize: 20,
                                  ),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(8),
                                    color: ConstColors.lightColor
                                        .withOpacity(0.05),
                                    border: Border.all(
                                      color: ConstColors.lightColor
                                          .withOpacity(0.2),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            const SizedBox(height: 20),
                            Text(
                              "Kode dikirim ke +123456789",
                              style: pRegular14.copyWith(
                                fontSize: 12,
                                color: ConstColors.lightColor,
                              ),
                            ),
                            const SizedBox(height: 20),
                            Row(
                              children: [
                                Text(
                                  "Tidak menerima kode? ",
                                  style: pRegular14.copyWith(
                                    fontSize: 16,
                                    color: ConstColors.lightColor,
                                  ),
                                ),
                                Text(
                                  "Kirim ulang",
                                  style: pRegular14.copyWith(
                                    fontSize: 16,
                                    color: ConstColors.skyColor,
                                  ),
                                ),
                              ],
                            ),
                            const SizedBox(height: 50),
                            CustomButton(
                              text: "Verifikasi",
                              color: ConstColors.skyColor,
                              onTap: () {
                                Get.to(
                                  const TabScreen(),
                                  transition: Transition.rightToLeft,
                                );
                              },
                            ),
                            const SizedBox(height: 20),
                            Center(
                              child: Text(
                                "Butuh bantuan?",
                                style: pSemiBold20.copyWith(
                                  fontSize: 14,
                                  color: ConstColors.skyColor,
                                ),
                              ),
                            ),
                            const SizedBox(height: 20),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: Get.height / 3.4, left: 60),
            child: SizedBox(
              height: 70,
              width: 70,
              child: Image.asset(
                DefaultImages.circle,
                fit: BoxFit.fill,
              ),
            ),
          ),
        ],
      ),
    );
  }
}