"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Calendar;
const tslib_1 = require("tslib");
const solid_1 = require("@heroicons/react/20/solid");
const react_1 = tslib_1.__importStar(require("react"));
const utils_1 = require("../utils");
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
function Calendar({ defaultDate, disabledDate, endDisabled, inputValue, max, min, onChangeDate, startDisabled, setIsCalendarVisible, }) {
    const currentDate = (0, utils_1.formatDate)(new Date());
    const [currentYear, setCurrentYear] = (0, react_1.useState)(new Date().getFullYear());
    const [currentMonth, setCurrentMonth] = (0, react_1.useState)(new Date().getMonth());
    const [calendar, setCalendar] = (0, react_1.useState)([]);
    const [daySelected, setDaySelected] = (0, react_1.useState)('');
    const checkToday = (dayOfWeek) => {
        var _a;
        const today = (_a = calendar.find((item) => item.date === currentDate)) === null || _a === void 0 ? void 0 : _a.dayOfWeek;
        return today === dayOfWeek;
    };
    (0, react_1.useEffect)(() => {
        const calendar = (0, utils_1.createMonthCalendarWithAdjacentMonths)(currentYear, currentMonth);
        const selectedCalendar = calendar.map((item) => ({
            ...item,
            isSelected: (0, utils_1.checkActive)(daySelected, item.date),
            disabled: (0, utils_1.checkDisabled)({
                startDisabled,
                endDisabled,
                date: item.date,
                disabledDate,
                max,
                min,
            }),
        }));
        setCalendar(selectedCalendar);
    }, [daySelected, currentMonth, currentYear, max, min]);
    (0, react_1.useEffect)(() => {
        const selectDate = (inputValue, daySplit) => {
            if (daySplit.length >= 3) {
                setDaySelected(inputValue);
                setCurrentMonth(parseInt(daySplit[1]) - 1);
                setCurrentYear(parseInt(daySplit[2]));
            }
        };
        if (inputValue) {
            // @ts-ignore
            const daySplit = inputValue === null || inputValue === void 0 ? void 0 : inputValue.split('-');
            selectDate(inputValue, daySplit);
        }
    }, [inputValue]);
    (0, react_1.useEffect)(() => {
        if (defaultDate) {
            // @ts-ignore
            setDaySelected(defaultDate);
            const daySplit = defaultDate === null || defaultDate === void 0 ? void 0 : defaultDate.split('-');
            setCurrentMonth(parseInt(daySplit[1]) - 1);
            setCurrentYear(parseInt(daySplit[2]));
        }
        else {
            return;
        }
    }, [max, min]);
    const handleClick = (day) => {
        if (!day.disabled) {
            const dateSelected = day.date.split('-');
            setCurrentMonth(parseInt(dateSelected[1]) - 1);
            setCurrentYear(parseInt(dateSelected[2]));
            setDaySelected(day.date);
            if (onChangeDate) {
                // @ts-ignore
                onChangeDate({
                    date: new Date(parseInt(dateSelected[2]), parseInt(dateSelected[1]) - 1, parseInt(dateSelected[0])),
                    format: day.date,
                });
            }
            if (setIsCalendarVisible) {
                setIsCalendarVisible(false);
            }
        }
        else
            return;
    };
    const handleChangeMonth = (type) => {
        if (type === 'next') {
            if (currentMonth === 11) {
                setCurrentMonth(0);
                setCurrentYear(currentYear + 1);
            }
            else
                setCurrentMonth(currentMonth + 1);
        }
        else {
            if (currentMonth === 0) {
                setCurrentMonth(11);
                setCurrentYear(currentYear - 1);
            }
            else
                setCurrentMonth(currentMonth - 1);
        }
    };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("div", { className: 'w-[21rem] rounded-lg border-[0.5px] border-gray-200 bg-white px-3 py-2 shadow-lg sm:w-[26rem]' },
            react_1.default.createElement("div", { className: 'text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 xl:col-start-9' },
                react_1.default.createElement("div", { className: 'flex items-center text-gray-900' },
                    react_1.default.createElement("button", { className: '-m-1.5 flex flex-none items-center justify-center rounded-lg p-1 text-gray-400 hover:bg-gray-200', onClick: () => handleChangeMonth('prev'), type: 'button' },
                        react_1.default.createElement("span", { className: 'sr-only' }, "Previous month"),
                        react_1.default.createElement(solid_1.ArrowLeftIcon, { "aria-hidden": 'true', className: 'h-5 w-5' })),
                    react_1.default.createElement("div", { className: 'flex-auto text-xs font-medium' }, (0, utils_1.getMonthName)(currentMonth) + ' ' + currentYear),
                    react_1.default.createElement("button", { className: '-m-1.5 flex flex-none items-center justify-center rounded-lg p-1 text-gray-400 hover:bg-gray-200', onClick: () => handleChangeMonth('next'), type: 'button' },
                        react_1.default.createElement("span", { className: 'sr-only' }, "Next month"),
                        react_1.default.createElement(solid_1.ArrowRightIcon, { "aria-hidden": 'true', className: 'h-5 w-5' }))),
                react_1.default.createElement("div", { className: 'mt-4 grid grid-cols-7 text-[0.75rem] text-xs font-normal text-gray-600' },
                    react_1.default.createElement("div", { className: classNames(checkToday(1) && '!font-semibold !text-gray-900') }, "T2"),
                    react_1.default.createElement("div", { className: classNames(checkToday(2) && '!font-semibold !text-gray-900') }, "T3"),
                    react_1.default.createElement("div", { className: classNames(checkToday(3) && '!font-semibold !text-gray-900') }, "T4"),
                    react_1.default.createElement("div", { className: classNames(checkToday(4) && '!font-semibold !text-gray-900') }, "T5"),
                    react_1.default.createElement("div", { className: classNames(checkToday(5) && '!font-semibold !text-gray-900') }, "T6"),
                    react_1.default.createElement("div", { className: classNames(checkToday(6) && '!font-semibold !text-gray-900') }, "T7"),
                    react_1.default.createElement("div", { className: classNames(checkToday(0) && '!font-semibold !text-gray-900') }, "CN")),
                react_1.default.createElement("div", { className: 'isolate mt-2 grid grid-cols-7 rounded-lg text-xs' }, calendar.map((day) => (react_1.default.createElement("button", { key: day.date, className: classNames('cursor-pointer rounded-lg py-[0.425rem] text-[0.75rem]  font-light text-gray-800 hover:!bg-indigo-900 hover:text-white focus:z-10', day.isCurrentMonth ? 'bg-white' : 'text-gray-300', day.isToday ? 'font-semibold text-gray-900' : 'font-normal', day.disabled && day.isCurrentMonth
                        ? '!cursor-default !text-gray-300 hover:!bg-transparent hover:!text-gray-300'
                        : '', !day.isToday && day.isCurrentMonth && !day.isSelected && !day.disabled && 'text-gray-700', day.isSelected && '!bg-indigo-800 text-white', !day.isCurrentMonth && 'hidden'), onClick: () => handleClick(day), style: { gridColumn: day.dayOfWeek === 0 ? 7 : day.dayOfWeek }, type: 'button' },
                    react_1.default.createElement("time", { className: '', dateTime: day.date }, day.date.split('-')[0].replace(/^0/, ''))))))))));
}
//# sourceMappingURL=Calendar.js.map