import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:uco_mobile_poc/app/core/constants/app_assets.dart';
import 'package:uco_mobile_poc/app/core/extensions/build_context_ext.dart';
import 'package:uco_mobile_poc/app/custom_widgets/custom_app_bar.dart';
import 'package:uco_mobile_poc/app/custom_widgets/custom_button.dart';
import 'package:uco_mobile_poc/app/custom_widgets/custom_text.dart';
import 'package:uco_mobile_poc/app/modules/sign_up/views/shared/camera_screen.dart';
import 'package:uco_mobile_poc/app/res/app_theme.dart';

import '../../../core/constants/translation_keys.dart';
import '../../../res/app_colors.dart';
import '../../../res/app_dimensions.dart';
import '../controllers/sign_up_screen_step3_controller.dart';

class SignUpScreenStep3View extends GetView<SignUpScreenStep3Controller> {
  final String imagePath;

  const SignUpScreenStep3View({this.imagePath = "", Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SignUpScreenStep3Controller>(builder: (controller) {
      return Scaffold(
        appBar: DashBoardAppBar(
          title: TranslationKeys.makeTranslation(TranslationKeys.textUploadKYC),
          onBackButtonPressed: () {
            Get.back();
          },
        ),
        persistentFooterButtons: [
          Padding(
            padding: const EdgeInsets.only(bottom: 10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CustomButton(
                  onPressed: () async {
                    controller.validateAndSubmit();
                  },
                  buttonText: TranslationKeys.makeTranslation(TranslationKeys.textNext),
                  buttonPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 40),
                  buttonColor: AppColors.colorButton,
                  textStyle: const TextStyle(color: AppColors.white),
                ),
                const SizedBox(width: 15),
                CustomButton(
                    onPressed: () {
                      controller.skipAndSubmit();
                    },
                    buttonText: TranslationKeys.makeTranslation(TranslationKeys.textSkipKYC),
                    icon: SvgPicture.asset(AppAssets.ic_next, height: 15, width: 15),
                    textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(color: AppColors.black, fontWeight: FontWeight.w400, fontSize: 13),
                    iconPadding: const EdgeInsets.only(left: 10),
                    buttonPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 20),
                    sideBorder: const BorderSide(color: AppColors.colorBorderSkipBtn, width: 1.0),
                    buttonColor: AppColors.colorSkipBtn),
              ],
            ),
          ),
        ],
        body: Obx(() {
          return Padding(
            padding: EdgeInsets.symmetric(vertical: AppDimensions.screenVerticalPadding, horizontal: AppDimensions.screenHorizontalPadding),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                CustomText(TranslationKeys.makeTranslation(TranslationKeys.textChooseDocumentType), style: AppThemeData.labelStyle),
                const SizedBox(height: 5),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    CustomButton(
                      onPressed: () {
                        controller.updateDocTypeScreen(signDocTypeScreen.cnic);
                      },
                      buttonText: TranslationKeys.makeTranslation(TranslationKeys.textCNIC),
                      textStyle: context.textTheme.bodySmall?.copyWith(color: controller.docTypeScreen.value == signDocTypeScreen.cnic ? Colors.white : AppColors.colorTitle),
                      buttonPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                      buttonColor: controller.docTypeScreen.value == signDocTypeScreen.cnic ? AppColors.colorPrimary : AppColors.colorPrimaryLight,
                      radius: 5,
                    ),
                    const SizedBox(width: 10),
                    CustomButton(
                      onPressed: () {
                        controller.updateDocTypeScreen(signDocTypeScreen.driving);
                      },
                      buttonText: TranslationKeys.makeTranslation(TranslationKeys.textDivingLicense),
                      textStyle: context.textTheme.bodySmall?.copyWith(color: controller.docTypeScreen.value == signDocTypeScreen.driving ? Colors.white : AppColors.colorTitle),
                      buttonPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                      buttonColor: controller.docTypeScreen.value == signDocTypeScreen.driving ? AppColors.colorPrimary : AppColors.colorPrimaryLight,
                      radius: 5,
                    ),
                    const SizedBox(width: 10),
                    CustomButton(
                      onPressed: () {
                        controller.updateDocTypeScreen(signDocTypeScreen.passport);
                      },
                      buttonText: TranslationKeys.makeTranslation(TranslationKeys.textPassport),
                      textStyle: context.textTheme.bodySmall?.copyWith(color: controller.docTypeScreen.value == signDocTypeScreen.passport ? Colors.white : AppColors.colorTitle),
                      buttonPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                      buttonColor: controller.docTypeScreen.value == signDocTypeScreen.passport ? AppColors.colorPrimary : AppColors.colorPrimaryLight,
                      radius: 5,
                    ),
                  ],
                ),
                const SizedBox(height: 10),
                CustomText(
                  TranslationKeys.makeTranslation(
                    TranslationKeys.textDocumentsDescription,
                  ),
                  style: AppThemeData.labelStyle,
                ),
                const SizedBox(height: 20),
                CNICScreen(docType: controller.docTypeScreen.value),
                const SizedBox(height: 15),
              ],
            ),
          );
        }),
      );
    });
  }
}

class CNICScreen extends StatelessWidget {
  const CNICScreen({super.key, required this.docType});

  final signDocTypeScreen docType;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SignUpScreenStep3Controller>(builder: (controller) {
      return Column(
        children: [
          SizedBox(
            height: 120,
            child: Row(
              children: [
                Expanded(
                  flex: 10,
                  child: GestureDetector(
                    onTap: () async {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => CameraOverlayScreen(
                                    isFront: true,
                                    docType: docType,
                                  ))).then((value) {
                      });
                    },
                    child: Card(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          SvgPicture.asset(AppAssets.ic_camera, height: 41, width: 41, fit: BoxFit.cover),
                          const SizedBox(height: 10),
                          CustomText(
                            TranslationKeys.makeTranslation(TranslationKeys.textFront),
                            style: AppThemeData.labelStyle,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                signDocTypeScreen.passport == docType
                    ? const SizedBox()
                    : const SizedBox(
                        width: 10,
                      ),
                signDocTypeScreen.passport == docType
                    ? const SizedBox()
                    : Expanded(
                        flex: 10,
                        child: GestureDetector(
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => CameraOverlayScreen(isFront: false, docType: docType),
                              ),
                            ).then((value) => {});
                          },
                          child: Card(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                SvgPicture.asset(AppAssets.ic_camera, height: 41, width: 41, fit: BoxFit.cover),
                                const SizedBox(height: 10),
                                CustomText(
                                  TranslationKeys.makeTranslation(TranslationKeys.textBack),
                                  style: AppThemeData.labelStyle,
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
          const SizedBox(height: 10),
          Obx(() {
            return SizedBox(
              height: 200,
              width: context.getWidth,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  (controller.frontPath.value.isEmpty)
                      ? const Spacer()
                      : Expanded(
                          child: AspectRatio(
                            aspectRatio: 1.5,
                            child: Container(
                              decoration: BoxDecoration(
                                  image: DecorationImage(
                                fit: BoxFit.fitWidth,
                                alignment: FractionalOffset.center,
                                image: FileImage(
                                  File(controller.frontPath.value),
                                ),
                              )),
                            ),
                          ),
                        ),

                  const SizedBox(width: 20),

                  signDocTypeScreen.passport == docType
                      ? const SizedBox()
                      : (controller.backPath.value.isEmpty)
                          ? const Spacer()
                          : Expanded(
                              child: AspectRatio(
                                aspectRatio: 1.5,
                                child: Container(
                                  decoration: BoxDecoration(
                                      image: DecorationImage(
                                    fit: BoxFit.fitWidth,
                                    alignment: FractionalOffset.center,
                                    image: FileImage(
                                      File(controller.backPath.value),
                                    ),
                                  )),
                                ),
                              ),
                            ),
                         ],
                       ),
                     );
                   }),
                 ],
               );
              }
            );
          }
        }
