@uxf/datepicker

export const DatePicker: FC = () => {
    // prepare state to handle selected date
    const [selectedDate, setSelectedDate] = useState<OnDateChangeType>(null);

    const { activeMonths, firstDayOfWeek } = useDatePicker({
        selectedDate,
        minBookingDate: new Date(),
        onDateChange: setSelectedDate,
    });

    // you can use DatePickerContext that helps you avoid passing callbacks throught components
    return (
        <DatePickerContext.Provider value={{ addPropsHere }}>
            {activeMonths.map((month) => (
                <DateRangePickerMonth
                    firstDayOfWeek={firstDayOfWeek}
                    key={`${month.year}-${month.month}`}
                    month={month.month}
                    year={month.year}
                />
            ))}
        </DatePickerContext.Provider>
    );
};

export const DateRangePickerMonth: FC<UseMonthProps> = ({ firstDayOfWeek, month, year }) => {
    const { days, monthLabel } = useMonth({
        year,
        month,
        firstDayOfWeek,
    });

    return (
        <div>
            <p>{monthLabel}</p>
            <div style={{ display: "grid" }}>
                {days.map((day, index) => {
                    return <DateRangePickerDay date={day.date} key={day.dayLabel + index} day={day.dayLabel} />;
                })}
            </div>
        </div>
    );
};

export const DateRangePickerDay: FC<{ day: string; date: Date }> = ({ day, date }) => {
    const dayRef = useRef(null);
    const {
        focusedDate,
        isDateFocused,
        isDateSelected,
        isDateHovered,
        isDateBlocked,
        onDateSelect,
        onDateFocus,
        onDateHover,
    } = useContext(DatePickerContext);

    const { disabledDate, isSelected, isWithinHoverRange, onClick, isToday } = useDay<HTMLDivElement>({
        date,
        dayRef,
        focusedDate,
        isDateFocused,
        isDateSelected,
        isDateHovered,
        isDateBlocked,
        onDateFocus,
        onDateSelect,
        onDateHover,
    });

    if (!day) {
        return <div />;
    }

    return (
        <button
            type="button"
            ref={dayRef}
            onClick={onClick}
            className={clsx({
                day__disabled: disabledDate,
                day__selected: isSelected,
                day__today: isToday,
            })}
        >
            {day}
        </button>
    );
};