import 'package:easy_localization/easy_localization.dart';
import 'package:family_bottom_sheet/family_bottom_sheet.dart';
import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_assets.dart';
import 'package:hmg_patient_app_new/core/app_state.dart';
import 'package:hmg_patient_app_new/core/dependencies.dart';
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/lab/collapsing_list_view.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/common_bottom_sheet.dart';
import 'package:hmg_patient_app_new/widgets/input_widget.dart';

import 'widgets/select-medical_file.dart';

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

  @override
  State<RechargeWalletPage> createState() => _RechargeWalletPageState();
}

class _RechargeWalletPageState extends State<RechargeWalletPage> {
  FocusNode textFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    AppState appState = getIt.get<AppState>();
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
              child: CollapsingListView(
            title: LocaleKeys.createAdvancedPayment.tr(context: context),
            child: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.all(24.h),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 135.h,
                      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                        color: AppColors.whiteColor,
                        borderRadius: 24.h,
                        hasShadow: false,
                        side: BorderSide(color: AppColors.textColor, width: 2.h),
                      ),
                      child: Padding(
                        padding: EdgeInsets.all(16.h),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            "Enter an amount".needTranslation.toText14(color: AppColors.greyTextColor, weight: FontWeight.w500),
                            Spacer(),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: [
                                Utils.getPaymentAmountWithSymbol(
                                    SizedBox(
                                      width: 150.h,
                                      child: TextInputWidget(
                                        labelText: "",
                                        hintText: "",
                                        isEnable: true,
                                        prefix: null,
                                        isAllowRadius: true,
                                        isBorderAllowed: false,
                                        isAllowLeadingIcon: true,
                                        autoFocus: true,
                                        fontSize: 40,
                                        padding: EdgeInsets.symmetric(horizontal: 8.h, vertical: 0.h),
                                        focusNode: textFocusNode,
                                        isWalletAmountInput: true,
                                        // leadingIcon: AppAssets.student_card,
                                      ),
                                    ),
                                    AppColors.textColor,
                                    13.h,
                                    isExpanded: false),
                                const Spacer(),
                                "SAR".needTranslation.toText20(color: AppColors.greyTextColor, weight: FontWeight.w500),
                              ],
                            ),
                          ],
                        ),
                      ),
                    ),
                    SizedBox(height: 24.h),
                    Container(
                      decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                        color: AppColors.whiteColor,
                        borderRadius: 24.h,
                        hasShadow: false,
                      ),
                      child: Padding(
                        padding: EdgeInsets.all(16.h),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    Utils.buildSvgWithAssets(icon: AppAssets.my_account_icon, width: 40.h, height: 40.h),
                                    SizedBox(width: 8.h),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        LocaleKeys.myAccount.tr(context: context).toText16(color: AppColors.textColor, weight: FontWeight.w500),
                                        "${LocaleKeys.medicalFile.tr(context: context)}: ${appState.getAuthenticatedUser()!.patientId}"
                                            .toText14(color: AppColors.greyTextColor, weight: FontWeight.w500),
                                      ],
                                    ),
                                  ],
                                ),
                                Utils.buildSvgWithAssets(icon: AppAssets.arrow_down, width: 25.h, height: 25.h),
                              ],
                            ).onPress(() async {
                              // showCommonBottomSheetWithoutHeight(context, title: "Select Medical File".needTranslation, child: SelectMedicalFile(), callBackFunc: () {}, isFullScreen: false);
                              // showCommonBottomSheetWithoutHeight(context, title: "Select Medical File".needTranslation, child: const MultiPageBottomSheet(), callBackFunc: () {}, isFullScreen: false);
                              await FamilyModalSheet.show<void>(
                                context: context,
                                contentBackgroundColor: AppColors.scaffoldBgColor,
                                backgroundColor: AppColors.bottomSheetBgColor,
                                mainContentPadding: EdgeInsets.all(24.h),
                                isScrollControlled: true,
                                safeAreaMinimum: EdgeInsets.zero,
                                useSafeArea: false,
                                sheetAnimationStyle: AnimationStyle(
                                  duration: Duration(milliseconds: 500), // Custom animation duration
                                  reverseDuration: Duration(milliseconds: 300), // Custom reverse animation duration
                                ),
                                builder: (ctx) {
                                  return const MultiPageBottomSheet();
                                },

                                // Optional configurations
                              );
                            }),
                            SizedBox(height: 16.h),
                            Divider(color: AppColors.borderOnlyColor.withValues(alpha: 0.1), height: 1.h),
                            SizedBox(height: 16.h),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    Utils.buildSvgWithAssets(icon: AppAssets.select_hospital_icon, width: 40.h, height: 40.h),
                                    SizedBox(width: 8.h),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        LocaleKeys.hospital.tr(context: context).toText16(color: AppColors.textColor, weight: FontWeight.w500),
                                        "Olaya".toText14(color: AppColors.greyTextColor, weight: FontWeight.w500),
                                      ],
                                    ),
                                  ],
                                ),
                                Utils.buildSvgWithAssets(icon: AppAssets.arrow_down, width: 25.h, height: 25.h),
                              ],
                            ),
                            SizedBox(height: 16.h),
                            Divider(color: AppColors.borderOnlyColor.withValues(alpha: 0.1), height: 1.h),
                            SizedBox(height: 16.h),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    Utils.buildSvgWithAssets(icon: AppAssets.email_icon, width: 40.h, height: 40.h),
                                    SizedBox(width: 8.h),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        LocaleKeys.email.tr(context: context).toText12(color: AppColors.greyTextColor, fontWeight: FontWeight.w500),
                                        "${appState.getAuthenticatedUser()!.emailAddress}".toText16(color: AppColors.textColor, weight: FontWeight.w500),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                            SizedBox(height: 16.h),
                            Divider(color: AppColors.borderOnlyColor.withValues(alpha: 0.1), height: 1.h),
                            SizedBox(height: 16.h),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  children: [
                                    Utils.buildSvgWithAssets(icon: AppAssets.notes_icon, width: 40.h, height: 40.h),
                                    SizedBox(width: 8.h),
                                    Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        LocaleKeys.notes.tr(context: context).toText12(color: AppColors.greyTextColor, fontWeight: FontWeight.w500),
                                        "Lorem Ipsum".toText16(color: AppColors.textColor, weight: FontWeight.w500),
                                      ],
                                    ),
                                  ],
                                ),
                              ],
                            ),
                            SizedBox(height: 8.h),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          )),
          Container(
            decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
              color: AppColors.whiteColor,
              borderRadius: 24.h,
              hasShadow: false,
            ),
            child: CustomButton(
              text: LocaleKeys.next.tr(context: context),
              onPressed: () {},
              backgroundColor: AppColors.primaryRedColor,
              borderColor: AppColors.primaryRedColor,
              textColor: AppColors.whiteColor,
              fontSize: 16,
              fontWeight: FontWeight.w500,
              borderRadius: 12,
              padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
              height: 50.h,
              icon: AppAssets.appointment_pay_icon,
              iconColor: AppColors.whiteColor,
              iconSize: 18.h,
            ).paddingSymmetrical(24.h, 24.h),
          ),
        ],
      ),
    );
  }
}
