"use client";
/* 
  This is the date picker item component.
  It contains the following components:
  - DatePickerItem
*/
import { DATE_FORMAT } from "@/src/utils/commonVariables";
import React, { forwardRef, useEffect, useRef } from "react";
import DatePicker from "react-datepicker";
import styles from "./DatePickerItem.module.scss";

// Define the type interface for the props
interface DatePickerItemProps {
    checkInDate: Date | null;         // 'checkInDate' should be a Date | null
    setCheckInDate: React.Dispatch<React.SetStateAction<Date | null>>;
    disabled?: boolean // 'setCheckInDate' is a state setter function
    excludeDatesData?: Date[];
    isCheckIn?: boolean;
    setIsDateChangeFromCalendar?: React.Dispatch<React.SetStateAction<boolean>>
    isEditShow?: boolean
}

const BookingSummaryDatePicker: React.FC<DatePickerItemProps> = ({ isEditShow = true, checkInDate, setIsDateChangeFromCalendar, setCheckInDate, disabled = false, excludeDatesData, isCheckIn = false }) => {
    // Define the ref for the date picker
    const datePickerRef = useRef<any>(null);
    const increaseMonthRef = useRef(null);
    const decreaseMonthRef = useRef(null);


    /**
     * Handle the click event of the date picker wrapper
     */
    const handleWrapperClick = () => {
        if (disabled) return;
        if (datePickerRef.current) {
            datePickerRef.current.setOpen(true);
        }
    };

    /**
     * Custom input component for the date picker
     * @param {string} value - The value of the date picker
     * @param {function} onClick - The function to handle the click event of the date picker
     * @param {ref} ref - The ref for the date picker
     */
    const ExampleCustomInput = forwardRef<HTMLButtonElement, { value: string; onClick: () => void; }>(
        ({ value, onClick }, ref) => (
            <p className={`!mb-0 w-fit text-right text-blackColor font-fw500 flex justify-end gap-2 `}>
                <span className={`text-blackColor text-right shrink-0 fs-14 font-fw500`}>{value}</span>
                {isEditShow && value && <span className={`text-primaryColor cursor-pointer underline fs-14`} onClick={onClick}>Edit</span>}
            </p>
        )
    );
    // Define the display name for the custom input component
    ExampleCustomInput.displayName = 'ExampleCustomInput';

    /**
     * Handle the change event of date picker
     * @param {Date | null} date - The date to set the check in date to
     */
    const handleCheckInChange = (date: Date | null) => {
        setIsDateChangeFromCalendar(true);
        setCheckInDate(date);
    };

    /**
     * Handle the close event of the date picker
     */
    useEffect(() => {
        if (datePickerRef.current) {
            datePickerRef.current.setOpen(false);
        }
    }, [checkInDate]);

    return (
        <div className={`datePicker flex items-center justify-between gap-2.5 w-auto`}>
            <DatePicker
                popperPlacement="top"
                ref={datePickerRef}
                selected={checkInDate}
                onChange={handleCheckInChange}
                dateFormat={DATE_FORMAT}
                minDate={new Date()}
                disabled={disabled}
                excludeDates={excludeDatesData}
                customInput={<ExampleCustomInput value={checkInDate?.toLocaleDateString() || ""} onClick={() => { }} />}
                className={`border-none outline-none bg-transparent relative text-right ${styles.input} ${disabled ? 'cursor-default' : 'cursor-pointer'}`}
                renderCustomHeader={({
                    monthDate,
                    decreaseMonth,
                    increaseMonth,
                }) => {
                    increaseMonthRef.current = increaseMonth;
                    decreaseMonthRef.current = decreaseMonth;

                    return (
                        <div className="!bg-white">
                            <div className="!bg-white">
                                <span className="!text-size-fs14 !mb-1">{isCheckIn ? "Check in" : "Check out"}</span>
                            </div>
                            <div style={{ display: "flex", justifyContent: "space-between", background: "#eee", padding: "0.5em" }}>
                                <button type="button" className={`group`} onClick={decreaseMonth}>
                                    <i className={`Icon IconDownArrow rotate-90 w-[15px] h-[15px] !bg-blackColor group-hover:!bg-white`}></i>
                                </button>
                                <span>
                                    {monthDate.toLocaleString("default", {
                                        month: "long",
                                    })}{" "}
                                    {monthDate.getFullYear()}
                                </span>
                                <button type="button" className={`group`} onClick={increaseMonth}>
                                    <i className={`Icon IconDownArrow -rotate-90 w-[15px] h-[15px] !bg-blackColor group-hover:!bg-white`}></i>
                                </button>
                            </div>
                        </div>
                    );
                }}
            />
        </div>
    );
};

export default BookingSummaryDatePicker;