import 'dart:io';

import 'package:dotted_border/dotted_border.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:gap/gap.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'package:traderscircuit/controller/kyc_controller.dart';

import '../../Utils/Common/ImagePicker.dart';
import '../../Utils/Common/commonBotton.dart';
import '../../Utils/text.dart';
import '../onBoarding/splashScreen1.dart';

class UploadKYCImage extends StatefulWidget {
  const UploadKYCImage({super.key});

  @override
  State<UploadKYCImage> createState() => _UploadKYCImageState();
}

class _UploadKYCImageState extends State<UploadKYCImage> {
  KYCController kycController = Get.put(KYCController());
  String type = Get.arguments["type"];
  @override
  Widget build(BuildContext context) {
    return Obx(
      () => WillPopScope(
        onWillPop: () async {
          type == "pan front"
              ? kycController.panFrontImage.value = ""
              : type == "pan back"
                  ? kycController.panBackImage.value = ""
                  : type == "aadhar front"
                      ? kycController.aadharFrontImage.value = ""
                      : kycController.aadharBackImage.value = "";
          await Future.delayed(const Duration(milliseconds: 210));

          return true;
        },
        child: Scaffold(
          bottomNavigationBar: (type == "pan front" &&
                      kycController.panFrontImage.isNotEmpty) ||
                  (type == "pan back" &&
                      kycController.panBackImage.isNotEmpty) ||
                  (type == "aadhar front" &&
                      kycController.aadharFrontImage.isNotEmpty) ||
                  (type == "aadhar back" &&
                      kycController.aadharBackImage.isNotEmpty)
              ? Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 17, vertical: 100),
                  child: Row(
                    children: [
                      Expanded(
                        child: SizedBox(
                          width: 191.w,
                          child: kycBtn(
                            text: "Retake",
                            onTap: () {
                              if (type == "pan front") {
                                kycController.panFrontImage.value = "";
                              } else if (type == "pan back") {
                                kycController.panBackImage.value = "";
                              } else if (type == "aadhar front") {
                                kycController.aadharFrontImage.value = "";
                              } else {
                                kycController.aadharBackImage.value = "";
                              }
                            },
                            bgClr: const Color(0xFF111313),
                            borderClr: const Color(0xff4A73FB),
                          ),
                        ),
                      ),
                      const Gap(16),
                      Expanded(
                        child: SizedBox(
                          width: 191.w,
                          child: kycBtn(
                            text: "Submit",
                            onTap: () {
                              Get.back();
                            },
                            bgClr: const Color(0xff4A73FB),
                            borderClr: const Color(0xff4A73FB),
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              : const SizedBox(),
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.transparent,
            automaticallyImplyLeading: false,
            toolbarHeight: 80,
            leadingWidth: 56.w,
            leading: Padding(
              padding: EdgeInsets.only(left: 16.w, top: 20.h),
              child: GestureDetector(
                onTap: () async {
                  type == "pan front"
                      ? kycController.panFrontImage.value = ""
                      : type == "pan back"
                          ? kycController.panBackImage.value = ""
                          : type == "aadhar front"
                              ? kycController.aadharFrontImage.value = ""
                              : kycController.aadharBackImage.value = "";
                  await Future.delayed(const Duration(milliseconds: 210));
                  Get.back(result: false);
                },
                child: Padding(
                  padding: EdgeInsets.only(left: 8.w),
                  child: Icon(
                    Icons.arrow_back_ios,
                    color: Colors.white,
                    size: 25.r,
                  ),
                ),
              ),
            ),
          ),
          backgroundColor: Colors.black,
          extendBody: true,
          body: Stack(
            children: [
              const CommonBlurLeft(),
              const CommonBlurRight(),
              Stack(
                children: [
                  Padding(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 16, vertical: 0),
                    child: ListView(
                      physics: const NeverScrollableScrollPhysics(),
                      children: [
                        (type == "pan front" &&
                                    kycController.panFrontImage.isNotEmpty) ||
                                (type == "pan back" &&
                                    kycController.panBackImage.isNotEmpty) ||
                                (type == "aadhar front" &&
                                    kycController
                                        .aadharFrontImage.isNotEmpty) ||
                                (type == "aadhar back" &&
                                    kycController.aadharBackImage.isNotEmpty)
                            ? text24W500("Preview")
                            : text24W500(type.contains("pan")
                                ? "Upload Image of pan card"
                                : "Upload Image of Aadhar card"),
                        (type == "pan front" &&
                                    kycController.panFrontImage.isNotEmpty) ||
                                (type == "pan back" &&
                                    kycController.panBackImage.isNotEmpty) ||
                                (type == "aadhar front" &&
                                    kycController
                                        .aadharFrontImage.isNotEmpty) ||
                                (type == "aadhar back" &&
                                    kycController.aadharBackImage.isNotEmpty)
                            ? const SizedBox()
                            : const Gap(14),
                        (type == "pan front" &&
                                    kycController.panFrontImage.isNotEmpty) ||
                                (type == "pan back" &&
                                    kycController.panBackImage.isNotEmpty) ||
                                (type == "aadhar front" &&
                                    kycController
                                        .aadharFrontImage.isNotEmpty) ||
                                (type == "aadhar back" &&
                                    kycController.aadharBackImage.isNotEmpty)
                            ? const SizedBox()
                            : text18W400(
                                type.contains("front") ? "Front" : " Back"),
                        const Gap(40),
                        InkWell(
                          onTap: () async {
                            if ((type == "pan front" &&
                                    kycController.panFrontImage.isNotEmpty) ||
                                (type == "pan back" &&
                                    kycController.panBackImage.isNotEmpty) ||
                                (type == "aadhar front" &&
                                    kycController
                                        .aadharFrontImage.isNotEmpty) ||
                                (type == "aadhar back" &&
                                    kycController.aadharBackImage.isNotEmpty)) {
                            } else {
                              var result = await ImagePickerMethod()
                                  .getImage(ImageSource.gallery);
                              if (type == "pan front") {
                                kycController.panFrontImage.value = result;
                              } else if (type == "pan back") {
                                kycController.panBackImage.value = result;
                              } else if (type == "aadhar front") {
                                kycController.aadharFrontImage.value = result;
                              } else {
                                kycController.aadharBackImage.value = result;
                              }
                            }
                          },
                          child: DottedBorder(
                            radius: const Radius.circular(10),
                            borderType: BorderType.RRect,
                            color: const Color(0xFF393939),
                            strokeWidth: 1,
                            child: Container(
                              width: Get.width,
                              height: 170,
                              decoration: ShapeDecoration(
                                gradient: LinearGradient(
                                  begin: const Alignment(0.98, -0.21),
                                  end: const Alignment(-0.98, 0.21),
                                  colors: [
                                    Colors.white
                                        .withOpacity(0.03999999910593033),
                                    Colors.white
                                        .withOpacity(0.05999999865889549)
                                  ],
                                ),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10),
                                ),
                              ),
                              child: (type == "pan front" &&
                                      kycController.panFrontImage.isNotEmpty)
                                  ? Padding(
                                      padding: const EdgeInsets.symmetric(
                                          vertical: 17, horizontal: 30),
                                      child: Image(
                                        image: FileImage(
                                          File(
                                            kycController.panFrontImage.value,
                                          ),
                                        ),
                                        fit: BoxFit.cover,
                                        width: Get.width,
                                        height: 150.h,
                                      ),
                                    )
                                  : (type == "pan back" &&
                                          kycController.panBackImage.isNotEmpty)
                                      ? Padding(
                                          padding: const EdgeInsets.symmetric(
                                              vertical: 17, horizontal: 30),
                                          child: Image(
                                            image: FileImage(
                                              File(
                                                kycController
                                                    .panBackImage.value,
                                              ),
                                            ),
                                            fit: BoxFit.cover,
                                            width: Get.width,
                                            height: 150.h,
                                          ),
                                        )
                                      : (type == "aadhar front" &&
                                              kycController
                                                  .aadharFrontImage.isNotEmpty)
                                          ? Padding(
                                              padding:
                                                  const EdgeInsets.symmetric(
                                                      vertical: 17,
                                                      horizontal: 30),
                                              child: Image(
                                                image: FileImage(
                                                  File(
                                                    kycController
                                                        .aadharFrontImage.value,
                                                  ),
                                                ),
                                                fit: BoxFit.cover,
                                                width: Get.width,
                                                height: 150.h,
                                              ),
                                            )
                                          : (type == "aadhar back" &&
                                                  kycController.aadharBackImage
                                                      .isNotEmpty)
                                              ? Padding(
                                                  padding: const EdgeInsets
                                                      .symmetric(
                                                      vertical: 17,
                                                      horizontal: 30),
                                                  child: Image(
                                                    image: FileImage(
                                                      File(
                                                        kycController
                                                            .aadharBackImage
                                                            .value,
                                                      ),
                                                    ),
                                                    fit: BoxFit.cover,
                                                    width: Get.width,
                                                    height: 150.h,
                                                  ),
                                                )
                                              : Column(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment.center,
                                                  children: [
                                                    SvgPicture.asset(
                                                        "assets/images/svg/upload-cloud.svg"),
                                                    text16W400(
                                                        "Upload from gallery")
                                                  ],
                                                ),
                            ),
                          ),
                        ),
                        const Gap(20),
                        (type == "pan front" &&
                                    kycController.panFrontImage.isNotEmpty) ||
                                (type == "pan back" &&
                                    kycController.panBackImage.isNotEmpty) ||
                                (type == "aadhar front" &&
                                    kycController
                                        .aadharFrontImage.isNotEmpty) ||
                                (type == "aadhar back" &&
                                    kycController.aadharBackImage.isNotEmpty)
                            ? const SizedBox()
                            : InkWell(
                                onTap: () async {
                                  var result = await ImagePickerMethod()
                                      .getImage(ImageSource.camera);
                                  if (type == "pan front") {
                                    kycController.panFrontImage.value = result;
                                  } else if (type == "pan back") {
                                    kycController.panBackImage.value = result;
                                  } else if (type == "aadhar front") {
                                    kycController.aadharFrontImage.value =
                                        result;
                                  } else {
                                    kycController.aadharBackImage.value =
                                        result;
                                  }
                                },
                                child: Container(
                                  width: Get.width,
                                  height: 47,
                                  decoration: ShapeDecoration(
                                    gradient: LinearGradient(
                                      begin: const Alignment(0.98, -0.21),
                                      end: const Alignment(-0.98, 0.21),
                                      colors: [
                                        Colors.white
                                            .withOpacity(0.03999999910593033),
                                        Colors.white
                                            .withOpacity(0.05999999865889549)
                                      ],
                                    ),
                                    shape: RoundedRectangleBorder(
                                      side: const BorderSide(
                                          width: 1, color: Color(0xFF393939)),
                                      borderRadius: BorderRadius.circular(8),
                                    ),
                                  ),
                                  child: Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      SvgPicture.asset(
                                          "assets/images/svg/camera.svg"),
                                      const Gap(10),
                                      text16W400('Click an image')
                                    ],
                                  ),
                                ),
                              ),
                      ],
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}