"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXDateRangePicker = PHXDateRangePicker;
const tslib_1 = require("tslib");
const solid_1 = require("@heroicons/react/20/solid");
const date_fns_1 = require("date-fns");
const react_1 = tslib_1.__importStar(require("react"));
const Calendar_1 = tslib_1.__importDefault(require("./components/Calendar"));
const utils_1 = require("./utils");
const ErrorMessage_1 = tslib_1.__importDefault(require("../../commons/ErrorMessage"));
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
function PHXDateRangePicker({ className, defaultValue, disabled, disabledDate, error, errorType, label, max, min, onChange, position_component, origin = 'bottom-left', isFullWidth = false, defaultRange, hide365Days = false, }) {
    const message = (type) => {
        let errorMessage = '';
        switch (type) {
            case 'required-field':
                errorMessage = 'Vui lòng nhập thông tin';
                break;
            default:
                break;
        }
        return errorMessage;
    };
    const inputRef = (0, react_1.useRef)(null);
    const calendarRef = (0, react_1.useRef)(null);
    const [isCalendarVisible, setIsCalendarVisible] = (0, react_1.useState)(false);
    const handleToggleCalendar = () => {
        setIsCalendarVisible(!isCalendarVisible);
    };
    (0, react_1.useEffect)(() => {
        const handleClickOutside = (event) => {
            if (calendarRef.current &&
                !calendarRef.current.contains(event.target) &&
                inputRef.current &&
                !inputRef.current.contains(event.target)) {
                setIsCalendarVisible(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    (0, react_1.useEffect)(() => {
        if ((defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.start) && (defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.end)) {
            const totalDays = (0, utils_1.caculateTotalDay)(defaultRange.start, defaultRange.end);
            const endDate = new Date(defaultRange.end);
            const startDate = (0, date_fns_1.subDays)(endDate, totalDays);
            const formattedStartDate = (0, date_fns_1.format)(startDate, 'dd-MM-yyyy');
            const formattedEndDate = (0, date_fns_1.format)(endDate, 'dd-MM-yyyy');
            const parsedStartDate = (0, date_fns_1.parse)(formattedStartDate, 'dd-MM-yyyy', new Date());
            const parsedEndDate = (0, date_fns_1.parse)(formattedEndDate, 'dd-MM-yyyy', new Date());
            handleResult(parsedStartDate, parsedEndDate);
            return;
        }
        if (defaultValue) {
            const endDate = new Date();
            const startDate = (0, date_fns_1.subDays)(endDate, defaultValue - 1);
            const formattedStartDate = (0, date_fns_1.format)(startDate, 'dd-MM-yyyy');
            const formattedEndDate = (0, date_fns_1.format)(endDate, 'dd-MM-yyyy');
            const parsedStartDate = (0, date_fns_1.parse)(formattedStartDate, 'dd-MM-yyyy', new Date());
            const parsedEndDate = (0, date_fns_1.parse)(formattedEndDate, 'dd-MM-yyyy', new Date());
            handleResult(parsedStartDate, parsedEndDate);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [defaultValue, defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.start, defaultRange === null || defaultRange === void 0 ? void 0 : defaultRange.end]);
    const [viewResult, setViewResult] = (0, react_1.useState)('Ngày hôm nay');
    const handleResult = (startDate, endDate) => {
        if (!startDate || !endDate) {
            return;
        }
        const startDateResult = (0, date_fns_1.format)(startDate, 'yyyy/MM/dd');
        const endDateResult = (0, date_fns_1.format)(endDate, 'yyyy/MM/dd');
        if (onChange && startDateResult && endDateResult) {
            onChange({ startDate: startDateResult, endDate: endDateResult });
        }
        const viewDate = (0, utils_1.formatViewResult)(startDate, endDate);
        setViewResult(viewDate);
        setIsCalendarVisible(false);
    };
    const handleCancel = () => {
        setIsCalendarVisible(false);
    };
    return (react_1.default.createElement("div", { className: className },
        label && react_1.default.createElement("label", { className: 'mb-1 block text-xs font-normal text-gray-700' }, label),
        react_1.default.createElement("div", { className: 'relative' },
            react_1.default.createElement("button", { disabled: disabled, className: classNames(`bg-white px-2.5 py-1 transition-all relative flex items-center justify-center text-xs rounded-lg font-normal text-gray-900 shadow-[inset_0_0_0_1px_#e3e3e3] active:bg-[#f7f7f7] active:shadow-[inset_0_2px_1px_0_#1a1a1a33,inset_-1px_0_1px_0_#1a1a1a1f,inset_1px_0_1px_0_#1a1a1a1f] md:shadow-[inset_0_-1px_0_0_#b5b5b5,inset_0_0_0_1px_#0000001a,inset_0_0.5px_0_1.5px_#fff]  ${isCalendarVisible
                    ? 'shadow-[inset_0_2px_1px_0_#1a1a1a33,inset_-1px_0_1px_0_#1a1a1a1f,inset_1px_0_1px_0_#1a1a1a1f]'
                    : ''}`, 'before:transtion-opacity shadow-[inset_0_1px_theme(colors.white/0.07),0_0.12px_0_theme(colors.gray.900/0.5)] group relative isolate flex items-center justify-center overflow-hidden transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)] before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:bg-gradient-to-b before:from-white/20 before:opacity-50 before:duration-300 before:ease-[cubic-bezier(0.4,0.36,0,1)] after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-gradient-to-b after:from-white/10 after:from-[46%] after:to-[54%] after:mix-blend-overlay hover:before:opacity-100', isFullWidth ? 'w-full' : '', className), onClick: handleToggleCalendar, ref: inputRef, type: 'button' },
                react_1.default.createElement(solid_1.CalendarDaysIcon, { className: 'mr-1 h-4 w-4 text-gray-500' }),
                viewResult),
            error && errorType ? react_1.default.createElement(ErrorMessage_1.default, { message: message(errorType) }) : null,
            react_1.default.createElement("div", { ref: calendarRef, className: position_component === 'left'
                    ? classNames('left-30 absolute right-[8px] top-10 z-50', isCalendarVisible ? '' : 'hidden')
                    : classNames('absolute z-50', origin === 'top-left' && '-top-60 left-0', origin === 'top-right' && '-top-60 right-0', origin === 'bottom-left' && 'left-0 top-10', origin === 'bottom-right' && 'right-0 top-10', isCalendarVisible ? '' : 'hidden') },
                react_1.default.createElement(Calendar_1.default, { defaultDate: defaultValue, disabledDate: disabledDate, handleCancel: handleCancel, handleResult: handleResult, max: max, min: min, defaultRange: defaultRange, hide365Days: hide365Days })))));
}
//# sourceMappingURL=DatePicker.js.map