import 'package:flutter/material.dart';
import 'package:mc_common_app/classes/consts.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/extensions/string_extensions.dart';
import 'package:mc_common_app/generated/locale_keys.g.dart';
import 'package:mc_common_app/models/appointments_models/appointment_list_model.dart';
import 'package:mc_common_app/models/services_models/service_model.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/utils/dialogs_and_bottomsheets.dart';
import 'package:mc_common_app/utils/enums.dart';
import 'package:mc_common_app/view_models/appointments_view_model.dart';
import 'package:mc_common_app/widgets/button/show_fill_button.dart';
import 'package:mc_common_app/widgets/common_widgets/app_bar.dart';
import 'package:mc_common_app/widgets/common_widgets/card_button_with_icon.dart';
import 'package:mc_common_app/widgets/extensions/extensions_widget.dart';
import 'package:provider/provider.dart';
import 'package:easy_localization/easy_localization.dart';

class AppointmentDetailView extends StatelessWidget {
  final AppointmentListModel appointmentListModel;

  const AppointmentDetailView({Key? key, required this.appointmentListModel}) : super(key: key);

  Widget getBaseActionButtonWidget({required Color color, required String text, Color textColor = MyColors.white, required Function() onPressed}) {
    return Expanded(
      child: ShowFillButton(
        maxHeight: 55,
        title: text,
        onPressed: onPressed,
        backgroundColor: color,
        txtColor: textColor,
        fontSize: 18,
      ),
    );
  }

  Widget getArrivedBottomActionButton({required BuildContext context, required AppointmentPaymentStatusEnum appointmentPaymentStatusEnum}) {
    final appointmentVM = context.read<AppointmentsVM>();
    switch (appointmentPaymentStatusEnum) {
      case AppointmentPaymentStatusEnum.defaultStatus:
      case AppointmentPaymentStatusEnum.paid:
      case AppointmentPaymentStatusEnum.payLater:
      case AppointmentPaymentStatusEnum.payPartial:
        return Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            children: [
              getBaseActionButtonWidget(
                color: MyColors.grey98Color.withOpacity(0.3),
                textColor: MyColors.lightTextColor,
                onPressed: () {},
                text: LocaleKeys.workInProgress.tr(),
              ),
            ],
          ),
        );
      case AppointmentPaymentStatusEnum.payNow:
        return Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            children: [
              getBaseActionButtonWidget(
                color: MyColors.darkPrimaryColor,
                textColor: MyColors.white,
                onPressed: () {
                  if (appointmentListModel.remainingAmount != null && appointmentListModel.remainingAmount! > 0.0) {
                    appointmentVM.onPayNowPressedForAppointment(
                      context: context,
                      appointmentID: appointmentListModel.id ?? 0,
                    );
                  }
                },
                text: LocaleKeys.payNow.tr(),
              ),
            ],
          ),
        );
    }
  }

  Widget buildBottomActionButton({required AppointmentStatusEnum appointmentStatusEnum, required BuildContext context}) {
    switch (appointmentStatusEnum) {
      case AppointmentStatusEnum.booked:
        return Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            children: [
              getBaseActionButtonWidget(color: MyColors.redColor, onPressed: () => appointmentCancelConfirmationSheet(context), text: "Cancel"),
              12.width,
              getBaseActionButtonWidget(
                  color: MyColors.greenColor,
                  onPressed: () {
                    context.read<AppointmentsVM>().onConfirmAppointmentPressed(context: context, appointmentId: appointmentListModel.id);
                  },
                  text: LocaleKeys.confirm.tr()),
            ],
          ),
        );
      case AppointmentStatusEnum.confirmed:
        return Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            children: [
              getBaseActionButtonWidget(color: MyColors.redColor, onPressed: () => appointmentCancelConfirmationSheet(context), text: "Cancel"),
            ],
          ),
        );
      case AppointmentStatusEnum.visitCompleted:
        return Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            children: [
              getBaseActionButtonWidget(
                color: MyColors.grey98Color.withOpacity(0.3),
                textColor: MyColors.lightTextColor,
                onPressed: () {},
                text: LocaleKeys.visitCompleted.tr(),
              ),
            ],
          ),
        );

      case AppointmentStatusEnum.arrived:
      case AppointmentStatusEnum.workStarted:
        return getArrivedBottomActionButton(appointmentPaymentStatusEnum: appointmentListModel.appointmentPaymentStatusEnum ?? AppointmentPaymentStatusEnum.defaultStatus, context: context);
      case AppointmentStatusEnum.cancelled:
        return Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            children: [
              getBaseActionButtonWidget(color: MyColors.grey98Color.withOpacity(0.3), textColor: MyColors.lightTextColor, onPressed: () {}, text: "Cancelled"),
            ],
          ),
        );
      case AppointmentStatusEnum.allAppointments:
        return SizedBox();
      case AppointmentStatusEnum.rescheduled:
        return Align(
          alignment: Alignment.bottomCenter,
          child: Row(
            children: [
              getBaseActionButtonWidget(color: MyColors.redColor, onPressed: () => appointmentCancelConfirmationSheet(context), text: "Cancel"),
              12.width,
              getBaseActionButtonWidget(
                  color: MyColors.greenColor,
                  onPressed: () {
                    context.read<AppointmentsVM>().onConfirmAppointmentPressed(context: context, appointmentId: appointmentListModel.id);
                  },
                  text: LocaleKeys.confirm.tr()),
            ],
          ),
        );
      default:
        return SizedBox();
    }
  }

  void appointmentCancelConfirmationSheet(BuildContext context) {
    final appointmentsVm = context.read<AppointmentsVM>();
    return actionConfirmationBottomSheet(
      context: context,
      title: LocaleKeys.youWantCancelAppointment.tr().toText(fontSize: 28, isBold: true, letterSpacing: -1.44),
      subtitle: LocaleKeys.appointmentCancelledCannotUndoAction.tr(),
      actionButtonYes: Expanded(
        child: ShowFillButton(
          maxHeight: 55,
          title: LocaleKeys.yes.tr(),
          fontSize: 15,
          onPressed: () {
            Navigator.pop(context);
            appointmentsVm.onCancelAppointmentPressed(context: context, appointmentListModel: appointmentListModel);
          },
        ),
      ),
      actionButtonNo: Expanded(
        child: ShowFillButton(
          maxHeight: 55,
          isFilled: false,
          borderColor: MyColors.darkPrimaryColor,
          title: LocaleKeys.no.tr(),
          txtColor: MyColors.darkPrimaryColor,
          fontSize: 15,
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    AppointmentsVM appointmentsVM = context.read<AppointmentsVM>();
    return Scaffold(
      appBar: CustomAppBar(
        title: LocaleKeys.appointment.tr(),
        profileImageUrl: MyAssets.bnCar,
        isRemoveBackButton: false,
        isDrawerEnabled: false,
      ),
      body: Container(
        padding: const EdgeInsets.only(bottom: 10, left: 21, right: 21),
        child: Stack(
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                appointmentListModel.providerName!.toText(fontSize: 16, isBold: true),
                Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    MyAssets.miniClockDark.buildSvg(
                      height: 12,
                      width: 12,
                      fit: BoxFit.fill,
                    ),
                    5.width,
                    "${appointmentListModel.duration ?? ""}  ${appointmentListModel.appointmentDate!.toFormattedDateWithoutTime()}".toText(fontSize: 12, isBold: true, color: MyColors.lightTextColor),
                  ],
                ),
                13.height,
                if (appointmentListModel.appointmentServicesList != null && appointmentListModel.appointmentServicesList!.isNotEmpty) ...[
                  Column(
                    children: List.generate(appointmentListModel.appointmentServicesList!.length, (index) {
                      ServiceModel service = appointmentListModel.appointmentServicesList![index];
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              // MyAssets.maintenanceIcon.buildSvg(
                              //   height: 10,
                              //   width: 10,
                              //   fit: BoxFit.fill,
                              // ),
                              // 10.width,
                              "${index + 1}. ${service.providerServiceDescription}".toText(fontSize: 14, isBold: true),
                            ],
                          ),
                          if (service.serviceItems != null && service.serviceItems!.isNotEmpty) ...[
                            Column(
                              children: List.generate(
                                service.serviceItems!.length,
                                (index) => "${service.serviceItems![index].name}".toText(
                                  textAlign: TextAlign.start,
                                  fontSize: 12,
                                  color: MyColors.lightTextColor,
                                ),
                              ),
                            ).paddingOnly(left: 15),
                          ],
                          5.height,
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              ((service.currentTotalServicePrice).toString()).toText(fontSize: 25, isBold: true),
                              2.width,
                              LocaleKeys.sar.tr().toText(color: MyColors.lightTextColor, fontSize: 16, isBold: true).paddingOnly(bottom: 5),
                              const Icon(Icons.arrow_drop_down, size: 30)
                            ],
                          ).onPress(() => appointmentsVM.priceBreakDownClicked(context, service)),
                        ],
                      );
                    }),
                  ),
                ],
                15.height,
                if (appointmentListModel.appointmentStatusEnum == AppointmentStatusEnum.booked || appointmentListModel.appointmentStatusEnum == AppointmentStatusEnum.confirmed) ...[
                  Row(
                    children: [
                      CardButtonWithIcon(
                        title: LocaleKeys.rescheduleAppointment.tr(),
                        onCardTapped: () {
                          context.read<AppointmentsVM>().onRescheduleAppointmentPressed(context: context, appointmentListModel: appointmentListModel);
                        },
                        icon: MyAssets.scheduleAppointmentIcon.buildSvg(),
                      ),
                      if (appointmentListModel.appointmentStatusEnum == AppointmentStatusEnum.booked) ...[
                        10.width,
                        CardButtonWithIcon(
                          title: LocaleKeys.payforAppointment.tr(),
                          onCardTapped: () {
                            context.read<AppointmentsVM>().onConfirmAppointmentPressed(context: context, appointmentId: appointmentListModel.id);
                          },
                          icon: MyAssets.creditCardIcon.buildSvg(),
                        ),
                      ],
                    ],
                  ),
                  15.height,
                ],
              ],
            ).toWhiteContainer(width: double.infinity, allPading: 12),
            buildBottomActionButton(appointmentStatusEnum: appointmentListModel.appointmentStatusEnum!, context: context),
          ],
        ),
      ),
    );
  }
}
