import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/20/solid';
import { parse, subDays, format, isEqual } from 'date-fns';
import React, { useEffect, useState } from 'react';
import { caculateTotalDay, checkActive, checkDisabled, classNames, createMonthCalendarWithAdjacentMonths, formatDate, getMonthName, isValidDateFormat, } from '../utils';
import { PHXSelect } from '../../Select';
import { PHXInput } from '../../Input';
import { PHXButton } from '../../Button';
import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
const dayOfWeek = ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'];
const menuDay = [
    { id: 1, content: 'Hôm nay', active: true },
    { id: 2, content: 'Ngày hôm qua' },
    { id: 3, content: '7 ngày qua' },
    { id: 4, content: '30 ngày qua' },
    { id: 5, content: '90 ngày qua' },
    { id: 6, content: '365 ngày qua' },
];
export default function Calendar({ defaultDate, disabledDate, handleCancel, handleResult, inputValue, max, min, defaultRange, hide365Days = false, }) {
    const currentDate = formatDate(new Date());
    const [currentYear, setCurrentYear] = useState(new Date().getFullYear());
    const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());
    const [calendar, setCalendar] = useState([]);
    const [daySelected, setDaySelected] = useState('');
    const checkToday = (dayOfWeeks, curMonth) => {
        var _a;
        const today = (_a = calendar.find((item) => item.date === currentDate && item.currentMonth === curMonth)) === null || _a === void 0 ? void 0 : _a.dayOfWeek;
        return today === dayOfWeeks;
    };
    useEffect(() => {
        const selectDate = (inputValues, daySplit) => {
            if (daySplit.length >= 3) {
                setDaySelected(inputValues);
                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]);
    useEffect(() => {
        const calendars = createMonthCalendarWithAdjacentMonths(currentYear, currentMonth);
        const selectedCalendar = calendars.map((item) => ({
            ...item,
            currentMonth: currentMonth + 1,
            isSelected: checkActive(daySelected, item.date),
            disabled: checkDisabled({
                date: item.date,
                disabledDate,
                max,
                min,
            }),
        }));
        const calendars2 = createMonthCalendarWithAdjacentMonths(currentYear, currentMonth + 1);
        const selectedCalendar2 = calendars2.map((item) => ({
            ...item,
            currentMonth: currentMonth === 11 ? 1 : currentMonth + 2,
            isSelected: checkActive(daySelected, item.date),
            disabled: checkDisabled({
                date: item.date,
                disabledDate,
                max,
                min,
            }),
        }));
        const totalCalendar = [...selectedCalendar, ...selectedCalendar2];
        setCalendar(totalCalendar);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [daySelected, currentMonth, currentYear]);
    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);
        }
    };
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [hoveredDate, setHoveredDate] = useState(null);
    const [endDateHoverNoParse, setEndDateHoverNoParse] = useState('');
    const [startDateWatch, setStartDateWatch] = useState('');
    const [endDateWatch, setEndDateWatch] = useState('');
    const [startDateOld, setStartDateOld] = useState();
    const [endDateOld, setEndDateOld] = useState();
    const [menuSelectDay, setMenuSelectDay] = useState(menuDay);
    useEffect(() => {
        if ((defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.start) && (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.end)) {
            const totalDays = caculateTotalDay(defaultRange.start, defaultRange.end);
            const currentDateParse = parse(formatDate(new Date(defaultRange.end)), 'dd-MM-yyyy', new Date(defaultRange.end));
            setEndDate(currentDateParse);
            setStartDate(subDays(currentDateParse, totalDays));
            setEndDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
            setStartDateWatch(format(subDays(currentDateParse, totalDays), 'dd-MM-yyyy'));
            const daySplit = defaultRange.end.split('/');
            setCurrentMonth(parseInt(daySplit[1]) - 1);
            setCurrentYear(parseInt(daySplit[0]));
            return;
        }
        if (defaultDate) {
            const currentDateParse = parse(currentDate, 'dd-MM-yyyy', new Date());
            setEndDate(currentDateParse);
            setStartDate(subDays(currentDateParse, defaultDate - 1));
            setEndDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
            setStartDateWatch(format(subDays(currentDateParse, defaultDate - 1), 'dd-MM-yyyy'));
        }
        else {
            const currentDateDefault = formatDate(new Date());
            const currentDateParseDefault = parse(currentDateDefault, 'dd-MM-yyyy', new Date());
            setEndDateWatch(format(currentDateParseDefault, 'dd-MM-yyyy'));
            setStartDateWatch(format(currentDateParseDefault, 'dd-MM-yyyy'));
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [defaultDate, defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.start, defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.end]);
    const handleSelectMenuDay = (clickedItem) => {
        const currentDateParse = parse(currentDate, 'dd-MM-yyyy', new Date());
        switch (clickedItem) {
            case 1:
                setStartDate(currentDateParse);
                setEndDate(currentDateParse);
                setStartDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
                setEndDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
                break;
            case 2:
                // Ngày hôm qua
                setStartDate(subDays(currentDateParse, 1));
                setEndDate(subDays(currentDateParse, 1));
                setStartDateWatch(format(subDays(currentDateParse, 1), 'dd-MM-yyyy'));
                setEndDateWatch(format(subDays(currentDateParse, 1), 'dd-MM-yyyy'));
                break;
            case 3:
                // 7 ngày qua
                setEndDate(currentDateParse);
                setStartDate(subDays(currentDateParse, 6));
                setEndDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
                setStartDateWatch(format(subDays(currentDateParse, 6), 'dd-MM-yyyy'));
                break;
            case 4:
                // 30 ngày qua
                setEndDate(currentDateParse);
                setStartDate(subDays(currentDateParse, 29));
                setEndDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
                setStartDateWatch(format(subDays(currentDateParse, 29), 'dd-MM-yyyy'));
                break;
            case 5:
                // 90 ngày qua
                setEndDate(currentDateParse);
                setStartDate(subDays(currentDateParse, 89));
                setEndDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
                setStartDateWatch(format(subDays(currentDateParse, 89), 'dd-MM-yyyy'));
                break;
            case 6:
                // 365 ngày qua
                setEndDate(currentDateParse);
                setStartDate(subDays(currentDateParse, 364));
                setEndDateWatch(format(currentDateParse, 'dd-MM-yyyy'));
                setStartDateWatch(format(subDays(currentDateParse, 364), 'dd-MM-yyyy'));
                break;
            default:
                break;
        }
        const updatedMenuSelectDay = menuSelectDay.map((item) => item.id === clickedItem ? { ...item, active: true } : { ...item, active: false });
        setMenuSelectDay(updatedMenuSelectDay);
    };
    const checkAndSetMenuSelectDay = (timeStart, timeEnd) => {
        const currentDateParse = parse(currentDate, 'dd-MM-yyyy', new Date());
        const predefinedRanges = [
            { id: 1, start: currentDateParse, end: currentDateParse },
            {
                id: 2,
                start: subDays(currentDateParse, 1),
                end: subDays(currentDateParse, 1),
            },
            { id: 3, start: subDays(currentDateParse, 6), end: currentDateParse },
            { id: 4, start: subDays(currentDateParse, 29), end: currentDateParse },
            { id: 5, start: subDays(currentDateParse, 89), end: currentDateParse },
            { id: 6, start: subDays(currentDateParse, 364), end: currentDateParse },
        ];
        const startDateParsed = parse(timeStart, 'dd-MM-yyyy', new Date());
        const endDateParsed = parse(timeEnd, 'dd-MM-yyyy', new Date());
        const matchedItem = predefinedRanges.find((range) => isEqual(startDateParsed, range.start) && isEqual(endDateParsed, range.end));
        const updatedMenuSelectDay = menuSelectDay.map((item) => item.id === (matchedItem === null || matchedItem === void 0 ? void 0 : matchedItem.id) ? { ...item, active: true } : { ...item, active: false });
        setMenuSelectDay(updatedMenuSelectDay);
    };
    const handleSelectDate = (days) => {
        const day = days.date;
        if (days.disabled) {
            return;
        }
        const selectedDay = parse(day, 'dd-MM-yyyy', new Date());
        if (endDate.getTime() === startDate.getTime() && selectedDay.getTime() > startDate.getTime()) {
            setEndDate(selectedDay);
            setEndDateWatch(day);
        }
        else {
            setStartDate(selectedDay);
            setStartDateWatch(day);
            setEndDate(selectedDay);
            setEndDateWatch(day);
        }
    };
    useEffect(() => {
        if (endDateWatch && startDateWatch) {
            checkAndSetMenuSelectDay(startDateWatch, endDateWatch);
        }
    }, [endDateWatch, startDateWatch]);
    useEffect(() => {
        const initialMenu = hide365Days ? menuDay.filter((item) => item.id !== 6) : menuDay;
        const updatedMenuSelectDay = initialMenu.map((item) => (item.id === 1 ? { ...item, active: true } : item));
        setMenuSelectDay(updatedMenuSelectDay);
        setStartDate(parse(currentDate, 'dd-MM-yyyy', new Date()));
        setEndDate(parse(currentDate, 'dd-MM-yyyy', new Date()));
    }, [hide365Days]);
    const handleMouseOver = (days) => {
        const day = days.date;
        if (days.disabled) {
            return;
        }
        setHoveredDate(parse(day, 'dd-MM-yyyy', new Date()));
        setEndDateHoverNoParse(day);
    };
    useEffect(() => {
        const isValidStartDate = isValidDateFormat(startDateWatch);
        if (!isValidStartDate) {
            return;
        }
        setStartDate(parse(startDateWatch, 'dd-MM-yyyy', new Date()));
        setStartDateOld(startDateWatch);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [startDateWatch]);
    useEffect(() => {
        const isValidEndDate = isValidDateFormat(endDateWatch);
        if (!isValidEndDate) {
            return;
        }
        setEndDate(parse(endDateWatch, 'dd-MM-yyyy', new Date()));
        setEndDateOld(endDateWatch);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [endDateWatch]);
    const handleClickOutsite = (type) => {
        const isValidStartDate = isValidDateFormat(startDateWatch);
        const isValidEndDate = isValidDateFormat(endDateWatch);
        switch (type) {
            case 'start_date': {
                if (!isValidStartDate) {
                    setStartDateWatch(startDateOld);
                }
                return;
            }
            case 'end_date':
                if (!isValidEndDate) {
                    setEndDateWatch(endDateOld);
                }
                break;
            default:
                break;
        }
    };
    useEffect(() => {
        const currentDateParse = parse(currentDate, 'dd-MM-yyyy', new Date());
        handleResult(currentDateParse, currentDateParse);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const handleSubmit = () => {
        handleResult(startDate, endDate);
    };
    const handleRemove = () => {
        handleCancel();
    };
    const handleSelectDay = (event) => {
        const selectedValue = event.target.value;
        const findValueSelectDay = menuSelectDay.find((item) => item.content === selectedValue);
        handleSelectMenuDay(findValueSelectDay.id);
    };
    return (React.createElement("div", { className: 'max-w-[730px] rounded-lg border-[0.5px] border-gray-300 bg-white shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)]' },
        React.createElement("div", { className: 'flex pr-4' },
            React.createElement("div", { className: 'hidden w-48 p-1 text-sm lg:block' }, menuSelectDay.map((item) => (React.createElement("button", { key: item.id, className: `ml-1 mt-1 flex w-full items-center justify-between rounded-md px-3 py-1 text-start hover:cursor-pointer ${item.active ? 'bg-gray-200 font-medium text-gray-900' : 'font-light text-gray-600 hover:bg-gray-100'}`, onClick: () => handleSelectMenuDay(item.id), type: 'button' },
                item.content,
                item.active ? React.createElement(CheckIcon, { className: 'h-4 w-4' }) : null)))),
            React.createElement("div", null,
                React.createElement("div", { className: 'ml-2 block p-1 text-sm lg:hidden' },
                    React.createElement(PHXSelect, { onChange: handleSelectDay }, menuSelectDay.map((item) => {
                        var _a;
                        return (React.createElement("option", { key: item.id, selected: (_a = menuSelectDay.find((itemSelectDay) => itemSelectDay.id === item.id)) === null || _a === void 0 ? void 0 : _a.active }, item.content));
                    }))),
                React.createElement("div", { className: 'ml-3 w-[calc(100vw-130px)] py-3 md:w-[504px]' },
                    React.createElement("div", { className: 'mb-4 flex' },
                        React.createElement(PHXInput, { className: 'w-full', onBlur: () => handleClickOutsite('start_date'), onChange: (e) => setStartDateWatch(e.target.value), placeholder: 'DD-MM-YYYY', type: 'text', value: startDateWatch }),
                        React.createElement(ArrowRightIcon, { "aria-hidden": 'true', className: 'mx-3 my-auto h-5 w-10 text-gray-400' }),
                        React.createElement(PHXInput, { className: 'w-full', onBlur: () => handleClickOutsite('end_date'), onChange: (e) => setEndDateWatch(e.target.value), placeholder: 'DD-MM-YYYY', type: 'text', value: endDateWatch || '' })),
                    React.createElement("div", { className: 'block lg:hidden' },
                        React.createElement("div", { className: 'mx-auto flex w-full justify-between' },
                            React.createElement("div", { className: 'flex w-full items-center text-gray-900' },
                                React.createElement("button", { className: '-m-1.5 mr-12 flex flex-none items-center justify-center rounded-lg p-1 text-gray-500 hover:bg-gray-200', onClick: () => handleChangeMonth('prev'), type: 'button' },
                                    React.createElement("span", { className: 'sr-only' }, "Previous month"),
                                    React.createElement(ArrowLeftIcon, { "aria-hidden": 'true', className: 'h-5 w-5' })),
                                React.createElement("div", { className: 'flex-auto text-center text-xs font-medium' }, getMonthName(currentMonth) + ' ' + currentYear),
                                React.createElement("button", { className: '-m-1.5 ml-12 flex flex-none items-center justify-center rounded-lg p-1 text-gray-500 hover:bg-gray-200', onClick: () => handleChangeMonth('next'), type: 'button' },
                                    React.createElement("span", { className: 'sr-only' }, "Next month"),
                                    React.createElement(ArrowRightIcon, { "aria-hidden": 'true', className: 'h-5 w-5' })))),
                        React.createElement("div", { className: ' flex w-full ' }, [currentMonth + 1].map((month, idx) => (React.createElement("div", { key: idx, className: `w-full text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 xl:col-start-9 ${month === currentMonth + 1 ? 'mr-4' : ''}` },
                            React.createElement("div", { className: 'mt-4 grid grid-cols-7 text-[0.75rem] text-xs font-normal text-gray-600' }, dayOfWeek.map((item, index) => (React.createElement("div", { key: index + 1, className: classNames(checkToday(index === 7 ? 0 : index + 1, month) && '!font-semibold !text-gray-900') }, item)))),
                            React.createElement("div", { className: 'isolate mt-2 grid grid-cols-7 rounded-lg text-xs' }, calendar.map((day, index) => {
                                if (day.currentMonth === month) {
                                    const selectedDay = parse(day.date, 'dd-MM-yyyy', new Date());
                                    const hoveredDay = parse(endDateHoverNoParse, 'dd-MM-yyyy', new Date());
                                    const isInRange = startDate && endDate && selectedDay > startDate && selectedDay < endDate;
                                    const isHovered = hoveredDate &&
                                        startDate &&
                                        !endDate &&
                                        selectedDay >= startDate &&
                                        selectedDay <= hoveredDate;
                                    const isHighlighted = startDate && endDate && selectedDay > startDate && selectedDay < endDate;
                                    const isSelectedStartDate = startDate && selectedDay.getTime() === startDate.getTime();
                                    const isSelectedEndDate = endDate && selectedDay.getTime() === endDate.getTime();
                                    const isStartNoRange = startDate && !endDate;
                                    const isSelectedStart = startDate && endDate && isSelectedStartDate;
                                    const isSelectedEnd = startDate && endDate && isSelectedEndDate;
                                    const isInRangeDynamicStart = selectedDay <= hoveredDate && isSelectedStartDate;
                                    const isInRangeDynamicEnd = startDate && isHovered && hoveredDay.getTime() === selectedDay.getTime();
                                    return (React.createElement("button", { key: index, className: classNames(`cursor-pointer py-[0.425rem] text-[0.75rem] font-light text-gray-800  hover:text-white focus:z-10`, day.isCurrentMonth ? 'bg-white' : 'text-gray-300', day.isCurrentMonth ? 'bg-white' : 'text-gray-300', day.disabled ? '' : 'hover:rounded-lg hover:!bg-gray-900', 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', isSelectedStartDate && !day.disabled ? 'rounded-l-lg !bg-gray-800 text-white' : '', isSelectedEndDate && 'rounded-r-lg !bg-gray-800 text-white', isHovered && '!rounded-none !bg-gray-200', day.isSelected && '!bg-gray-800 text-white', isHighlighted && 'rounded-none !bg-gray-200', !day.isCurrentMonth && 'hidden', isStartNoRange && 'rounded-lg', isInRange && 'hover:rounded-none', isSelectedStart && 'hover:rounded-r-none', isSelectedEnd && 'hover:rounded-l-none', isInRangeDynamicStart && '!rounded-l-lg', isInRangeDynamicEnd && '!rounded-r-lg'), onClick: () => handleSelectDate(day), onMouseOver: () => handleMouseOver(day), style: {
                                            gridColumn: day.dayOfWeek === 0 ? 7 : day.dayOfWeek,
                                        }, type: 'button' },
                                        React.createElement("time", { className: '', dateTime: day.date }, day.date.split('-')[0].replace(/^0/, ''))));
                                }
                                return null;
                            }))))))),
                    React.createElement("div", { className: 'hidden lg:block' },
                        React.createElement("div", { className: 'mx-auto flex w-full justify-between' },
                            React.createElement("div", { className: 'flex items-center text-gray-900' },
                                React.createElement("button", { className: '-m-1.5 mr-12 flex flex-none items-center justify-center rounded-lg p-1 text-gray-500 hover:bg-gray-200', onClick: () => handleChangeMonth('prev'), type: 'button' },
                                    React.createElement("span", { className: 'sr-only' }, "Previous month"),
                                    React.createElement(ArrowLeftIcon, { "aria-hidden": 'true', className: 'h-5 w-5' })),
                                React.createElement("div", { className: 'flex-auto text-xs font-medium' }, getMonthName(currentMonth) + ' ' + currentYear)),
                            React.createElement("div", { className: 'flex items-center text-gray-900' },
                                React.createElement("div", { className: 'flex-auto text-xs font-medium' }, currentMonth === 11
                                    ? `Tháng 1 ${currentYear + 1}`
                                    : getMonthName(currentMonth + 1) + ' ' + currentYear),
                                React.createElement("button", { className: '-m-1.5 ml-12 flex flex-none items-center justify-center rounded-lg p-1 text-gray-500 hover:bg-gray-200', onClick: () => handleChangeMonth('next'), type: 'button' },
                                    React.createElement("span", { className: 'sr-only' }, "Next month"),
                                    React.createElement(ArrowRightIcon, { "aria-hidden": 'true', className: 'h-5 w-5' })))),
                        React.createElement("div", { className: 'flex  w-full ' }, [currentMonth + 1, currentMonth === 11 ? 1 : currentMonth + 2].map((month, idx) => (React.createElement("div", { key: idx, className: `w-full text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 xl:col-start-9 ${month === currentMonth + 1 ? 'mr-4' : ''}` },
                            React.createElement("div", { className: 'mt-4 grid grid-cols-7 text-[0.75rem] text-xs font-normal text-gray-600' }, dayOfWeek.map((item, index) => (React.createElement("div", { key: index + 1, className: classNames(checkToday(index === 7 ? 0 : index + 1, month) && '!font-semibold !text-gray-900') }, item)))),
                            React.createElement("div", { className: 'isolate mt-2 grid grid-cols-7 rounded-lg text-xs' }, calendar.map((day, index) => {
                                if (day.currentMonth === month) {
                                    const selectedDay = parse(day.date, 'dd-MM-yyyy', new Date());
                                    const hoveredDay = parse(endDateHoverNoParse, 'dd-MM-yyyy', new Date());
                                    const isInRange = startDate && endDate && selectedDay > startDate && selectedDay < endDate;
                                    const isHovered = hoveredDate &&
                                        startDate &&
                                        !endDate &&
                                        selectedDay >= startDate &&
                                        selectedDay <= hoveredDate;
                                    const isHighlighted = startDate && endDate && selectedDay > startDate && selectedDay < endDate;
                                    const isSelectedStartDate = startDate && selectedDay.getTime() === startDate.getTime();
                                    const isSelectedEndDate = endDate && selectedDay.getTime() === endDate.getTime();
                                    const isStartNoRange = startDate && !endDate;
                                    const isSelectedStart = startDate && endDate && isSelectedStartDate;
                                    const isSelectedEnd = startDate && endDate && isSelectedEndDate;
                                    const isInRangeDynamicStart = selectedDay <= hoveredDate && isSelectedStartDate;
                                    const isInRangeDynamicEnd = startDate && isHovered && hoveredDay.getTime() === selectedDay.getTime();
                                    return (React.createElement("button", { key: index, className: classNames(`cursor-pointer py-[0.425rem] text-[0.75rem] font-light text-gray-800  hover:text-white focus:z-10`, day.isCurrentMonth ? 'bg-white' : 'text-gray-300', day.isCurrentMonth ? 'bg-white' : 'text-gray-300', day.disabled ? '' : 'hover:rounded-lg hover:!bg-gray-900', 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', isSelectedStartDate && !day.disabled ? 'rounded-l-lg !bg-gray-800 text-white' : '', isSelectedEndDate && 'rounded-r-lg !bg-gray-800 text-white', isHovered && '!rounded-none !bg-gray-200', day.isSelected && '!bg-gray-800 text-white', isHighlighted && 'rounded-none !bg-gray-200', !day.isCurrentMonth && 'hidden', isStartNoRange && 'rounded-lg', isInRange && 'hover:rounded-none', isSelectedStart && 'hover:rounded-r-none', isSelectedEnd && 'hover:rounded-l-none', isInRangeDynamicStart && '!rounded-l-lg', isInRangeDynamicEnd && '!rounded-r-lg'), onClick: () => handleSelectDate(day), onMouseOver: () => handleMouseOver(day), style: {
                                            gridColumn: day.dayOfWeek === 0 ? 7 : day.dayOfWeek,
                                        }, type: 'button' },
                                        React.createElement("time", { className: '', dateTime: day.date }, day.date.split('-')[0].replace(/^0/, ''))));
                                }
                                return null;
                            })))))))))),
        React.createElement("div", { className: 'flex justify-end border-t py-4 pr-4' },
            React.createElement(PHXButton, { onClick: handleRemove, secondary: true, size: 'micro' }, "Hu\u1EF7"),
            React.createElement(PHXButton, { className: 'ml-2', onClick: handleSubmit, primary: true, size: 'micro' }, "X\u00E1c nh\u1EADn"))));
}
//# sourceMappingURL=Calendar.js.map