import 'package:flutter/material.dart';
import 'package:ftc_mobile_app/dialogs/widgets/holiday_request_sent_dialog.dart';
import 'package:ftc_mobile_app/dialogs/widgets/holidays_data_dialog.dart';
import 'package:ftc_mobile_app/ftc_mobile_app.dart';
import 'package:ftc_mobile_app/models/staffWorkload/StaffWorkloadResponse.dart';
import 'package:ftc_mobile_app/utilities/extensions/custom_extensions.dart';
import 'package:get/get.dart';
import '../../custom_widgets/label_value_box_widget.dart';

class BookHolidayScreen extends StatefulWidget {
  const BookHolidayScreen({Key? key}) : super(key: key);

  @override
  State<BookHolidayScreen> createState() => _BookHolidayScreenState();
}

class _BookHolidayScreenState extends State<BookHolidayScreen> {
  final controller = Get.put(BookHolidayScreenController());

  @override
  Widget build(BuildContext context) {
    return CustomScaffold(
      backgroundColor: CustomAppColors.kPrimaryColor,
      screenKey: controller.screenKey,
      onScreenTap: controller.removeFocus,
      showAppBar: true,
      appBar: CustomAppBarTitleOnly(
        context,
        titleText: 'Book a Holiday',
      ),
      body: ListView(
        children: [
          Obx(() {
            return InkWell(
              onTap: () => _onTotalHolidaysBoxTap(controller.myWorkLoads()),
              child: LabelValueBoxWidget(
                label: 'Total Holidays Left',
                value:
                    '${controller.myWorkLoads()?.holidaysRemaining ?? 0} days (${controller.myWorkLoads()?.holidayAlwnNoOfHours ?? 0} hours)',
                trailing: const Icon(
                  Icons.arrow_right_rounded,
                  color: Colors.black,
                ),
              ).addPaddingHorizontal(16),
            );
          }),
          10.verticalSpace,
          Obx(
            () => CalendarWidget(
              markedDatesMap: controller.markedDatesMap(),
              minDate: DateTime.now().subtract(10.days),
              targetDateTime: controller.targetDateTime.value,
              canSelectRange: true,
              rangeStart: controller.holidayStartDate(),
              rangeEnd: controller.holidayEndDate(),
              onRangeSelect: controller.onRangeSelect,
              onDayTap: (date, _) => controller.targetDateTime(date),
            ),
          ),
          10.verticalSpace,
          Padding(
            padding: REdgeInsets.symmetric(horizontal: 16.0, vertical: 10),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //Start End date boxes
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Obx(
                        () => LabelValueBoxWidget(
                          label: "Start Date",
                          value: DateFormatter()
                              .getHolidayDate(controller.holidayStartDate()),
                        ),
                      ),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 14.r),
                      child: Icon(
                        Icons.arrow_forward,
                        size: 20.0.sp,
                      ),
                    ),
                    Expanded(
                      child: Obx(
                        () => LabelValueBoxWidget(
                          label: "End Date",
                          value: DateFormatter()
                              .getHolidayDate(controller.holidayEndDate()),
                        ),
                      ),
                    ),
                  ],
                ),
                10.verticalSpace,
                SizedBox(
                    width: double.infinity,
                    child: Obx(() => LabelValueBoxWidget(
                          label: "Holiday Request",
                          value:
                              "${controller.holidayDays()} Days (${controller.holidayHours()} Hours)",
                        ))),
                20.verticalSpace,
                AgreeToRulesWidget(
                  agreeToRules: controller.agreeToRules,
                  onTapViewBookingRules: () {},
                ),
                25.verticalSpace,
                RequestHolidayButton(
                  onTap: _onRequestHolidayButtonTap,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  _onTotalHolidaysBoxTap(StaffWorkLoads? workLoads) {
    DateTime date = DateTime.now();
    if (workLoads?.endDate.isNotNullOrEmpty() == true) {
      date = DateTime.parse(workLoads!.endDate!);
    }

    final holidayData = HolidayModel(
      carriedOver: "${workLoads?.carriedOverHours ?? 0} hours",
      holidayEntitlement:
          "${workLoads?.holidayEntitlement?.numberOfWeeks ?? 0} weeks (${workLoads?.holidayEntitlement?.numberOfDays ?? 0} days, ${workLoads?.holidayEntitlement?.numberOfHours ?? 0} hours)",
      holidayAllowance:
          "${workLoads?.holidayAlwnNoOfDys ?? 0} days (${workLoads?.holidayAlwnNoOfHours ?? 0} hours)",
      remainingHolidays:
          "${workLoads?.holidaysRemaining ?? 0} days (${workLoads?.holidayAlwnNoOfHours ?? 0} hours)",
      timeLeftBeforeYearEnd: "${date.difference(DateTime.now()).inDays} days",
    );

    showDialog(
        context: context,
        builder: (BuildContext context) {
          return HolidaysDataDialog(holidayModel: holidayData);
        });
  }

  _onRequestHolidayButtonTap() async {
    final isSuccess = await controller.requestHoliday();

    if (isSuccess) {
      Get.dialog(HolidayRequestSentDialog(
        holidayStartDate:
            DateFormatter().getHolidayDate(controller.holidayStartDate.value),
        holidayEndDate:
            DateFormatter().getHolidayDate(controller.holidayEndDate.value),
        holidayTotalTime:
            "${controller.holidayDays()} Days (${controller.holidayHours()} Hours)",
      ));
    }
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

class AgreeToRulesWidget extends StatelessWidget {
  final RxBool agreeToRules;
  final VoidCallback onTapViewBookingRules;

  const AgreeToRulesWidget({
    super.key,
    required this.agreeToRules,
    required this.onTapViewBookingRules,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        InkWell(
          onTap: agreeToRules.toggle,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Obx(
                () => Ink(
                  width: 24.r,
                  height: 24.r,
                  child: Checkbox(
                    value: agreeToRules.value,
                    activeColor: CustomAppColors.kSecondaryColor,
                    onChanged: (value) {
                      agreeToRules.value = value ?? false;
                    },
                  ),
                ),
              ),
              10.horizontalSpace,
              CustomTextWidget(
                isExpanded: false,
                text: 'Agree to the booking rules',
                fontColor: Colors.black,
                fontSize: 10.0.sp,
                fontWeight: FontWeight.w400,
              ),
            ],
          ),
        ),
        // const Spacer(),
        // InkWell(
        //   onTap: () {},
        //   child: Padding(
        //     padding: REdgeInsets.only(left: 8.0, top: 4.r, bottom: 4.r),
        //     child: CustomTextWidget(
        //       isExpanded: false,
        //       text: 'View Booking Rules',
        //       fontColor: CustomAppColors.kBlackColor,
        //       fontWeight: FontWeight.bold,
        //       fontSize: 10.sp,
        //     ),
        //   ),
        // ),
      ],
    );
  }
}

class RequestHolidayButton extends StatelessWidget {
  final VoidCallback onTap;

  const RequestHolidayButton({super.key, required this.onTap});

  @override
  Widget build(BuildContext context) {
    // final BookHolidayScreenController controller =
    //     Get.put(BookHolidayScreenController());
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: 60.h,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: CustomAppColors.kSecondaryColor,
          borderRadius: BorderRadius.circular(2.r),
        ),
        child: const CustomTextWidget(
            text: "REQUEST HOLIDAY", fontColor: CustomAppColors.kPrimaryColor),
      ),
    );
  }
}