import 'package:easy_localization/easy_localization.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/date_util.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/features/emergency_services/emergency_services_view_model.dart';
import 'package:hmg_patient_app_new/generated/locale_keys.g.dart';
import 'package:hmg_patient_app_new/presentation/emergency_services/er_online_checkin/er_online_checkin_payment_page.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';
import 'package:hmg_patient_app_new/widgets/appbar/collapsing_list_view.dart';
import 'package:hmg_patient_app_new/widgets/buttons/custom_button.dart';
import 'package:hmg_patient_app_new/widgets/chip/app_custom_chip_widget.dart';
import 'package:hmg_patient_app_new/widgets/routes/custom_page_route.dart';
import 'package:provider/provider.dart';

class ErOnlineCheckinPaymentDetailsPage extends StatelessWidget {
  ErOnlineCheckinPaymentDetailsPage({super.key});

  late AppState appState;
  late EmergencyServicesViewModel emergencyServicesViewModel;

  @override
  Widget build(BuildContext context) {
    appState = getIt.get<AppState>();
    emergencyServicesViewModel = Provider.of<EmergencyServicesViewModel>(context, listen: false);
    return Scaffold(
      backgroundColor: AppColors.bgScaffoldColor,
      body: Column(
        children: [
          Expanded(
            child: CollapsingListView(
              title: LocaleKeys.emergencyCheckIn.tr(context: context),
              child: SingleChildScrollView(
                child: Padding(
                  padding: EdgeInsets.all(24.h),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
                          color: AppColors.whiteColor,
                          borderRadius: 20.h,
                          hasShadow: true,
                        ),
                        child: Padding(
                          padding: EdgeInsets.all(14.h),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              LocaleKeys.erVisitDetails.tr().toText18(color: AppColors.textColor, isBold: true),
                              SizedBox(height: 24.h),
                              Row(
                                children: [
                                  "${appState.getAuthenticatedUser()!.firstName!} ${appState.getAuthenticatedUser()!.lastName!}".toText14(color: AppColors.textColor, isBold: true),
                                ],
                              ),
                              SizedBox(height: 12.h),
                              Wrap(
                                direction: Axis.horizontal,
                                spacing: 4.w,
                                runSpacing: 6.h,
                                children: [
                                  AppCustomChipWidget(
                                    labelText: "${LocaleKeys.fileno.tr(context: context)}.: ${appState.getAuthenticatedUser()!.patientId!.toString()}",
                                  ),
                                  AppCustomChipWidget(
                                    labelText: LocaleKeys.erClinic.tr(),
                                  ),
                                  AppCustomChipWidget(
                                    labelText: emergencyServicesViewModel.selectedHospital!.name,
                                  ),
                                  AppCustomChipWidget(
                                    icon: AppAssets.calendar,
                                    labelText: DateUtil.formatDateToDate(DateTime.now(), false),
                                    labelPadding: EdgeInsetsDirectional.only(start: -4.w, end: 8.w),
                                  ),
                                ],
                              ),
                              SizedBox(height: 12.h),
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
          Container(
            decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
              color: AppColors.whiteColor,
              borderRadius: 24.r,
              hasShadow: true,
            ),
            child: SizedBox(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          LocaleKeys.amountBeforeTax.tr().toText18(isBold: true),
                          Utils.getPaymentAmountWithSymbol(emergencyServicesViewModel.erOnlineCheckInPaymentDetailsResponse.patientShare.toString().toText16(isBold: true), AppColors.blackColor, 13,
                              isSaudiCurrency: true),
                        ],
                      ),
                      SizedBox(height: 4.h),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(child: "".toText12(isBold: true, color: AppColors.greyTextColor)),
                          LocaleKeys.vatWithAmount
                              .tr(namedArgs: {"amount": emergencyServicesViewModel.erOnlineCheckInPaymentDetailsResponse.patientTaxAmount.toString()})
                              .toText14(isBold: true, color: AppColors.greyTextColor, letterSpacing: -1),
                        ],
                      ),
                      SizedBox(height: 18.h),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          SizedBox(
                            width: 200.h,
                            child: Utils.getPaymentMethods(),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Utils.getPaymentAmountWithSymbol(
                                  emergencyServicesViewModel.erOnlineCheckInPaymentDetailsResponse.patientShareWithTax.toString().toText24(isBold: true), AppColors.blackColor, 17,
                                  isSaudiCurrency: true),
                            ],
                          ),
                        ],
                      )
                    ],
                  ).paddingOnly(left: 16.h, top: 24.h, right: 16.h, bottom: 0.h),
                  CustomButton(
                    text: LocaleKeys.payNow.tr(),
                    onPressed: () {
                      Navigator.of(context).push(
                        CustomPageRoute(page: ErOnlineCheckinPaymentPage()),
                      );
                    },
                    backgroundColor: AppColors.infoColor,
                    borderColor: AppColors.infoColor.withOpacity(0.01),
                    textColor: AppColors.whiteColor,
                    fontSize: 16.f,
                    isBold: true,
                    borderRadius: 12.r,
                    padding: EdgeInsets.symmetric(horizontal: 10.w),
                    height: 56.h,
                    icon: AppAssets.appointment_pay_icon,
                    iconColor: AppColors.whiteColor,
                    iconSize: 18.h,
                  ).paddingSymmetrical(16.h, 24.h),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
