"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXTimePicker = PHXTimePicker;
const tslib_1 = require("tslib");
const outline_1 = require("@heroicons/react/24/outline");
const react_1 = tslib_1.__importStar(require("react"));
const Time_1 = tslib_1.__importDefault(require("./component/Time"));
const ErrorMessage_1 = tslib_1.__importDefault(require("../../commons/ErrorMessage"));
const utils_1 = require("./utils");
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
function PHXTimePicker({ className, defaultValue, disabled, readOnly, error, errorType, errorMessageCustom, id = 'time-picker', origin = 'bottom-left', label, onChange, register, step, min, max, helpText, placeholder, setValueUseForm, keySetValueUseForm, hideDisable = false, }) {
    const message = (type) => {
        let errorMessage = '';
        switch (type) {
            case 'required-field':
                errorMessage = 'Vui lòng nhập thông tin';
                break;
            case 'custom-message':
                errorMessage = errorMessageCustom;
                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 [inputValue, setInputValue] = (0, react_1.useState)('');
    const [isOnChange, setIsOnChange] = (0, react_1.useState)(false);
    const handleToggleCalendar = () => {
        setIsCalendarVisible((prev) => !prev);
    };
    (0, react_1.useEffect)(() => {
        if (defaultValue) {
            // @ts-ignore
            setInputValue(defaultValue);
        }
        else {
            return;
        }
    }, [defaultValue]);
    (0, react_1.useEffect)(() => {
        const modalElement = document.getElementById('modal');
        const handleClickOutside = (event) => {
            setTimeout(() => {
                if (calendarRef.current &&
                    !calendarRef.current.contains(event.target) &&
                    inputRef.current &&
                    !inputRef.current.contains(event.target)) {
                    setIsCalendarVisible(false);
                    const inputElement = document.getElementById(`${id}-after`);
                    if (inputElement && isOnChange) {
                        inputElement.focus();
                        setIsOnChange(false);
                        inputElement.blur();
                    }
                }
            }, 200);
        };
        document.addEventListener('mousedown', handleClickOutside);
        if (modalElement) {
            modalElement.addEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);
    const handleChange = (val) => {
        const inputElement = document.getElementById(`${id}-after`);
        if (inputElement)
            inputElement.focus();
        setInputValue(val);
        if (setValueUseForm && keySetValueUseForm) {
            setValueUseForm(keySetValueUseForm, val);
        }
        if (onChange) {
            onChange(val);
        }
    };
    const handleChangeInput = (event) => {
        setIsOnChange(true);
        let value = event.target.value;
        // Chỉ cho phép nhập các ký tự số và :
        value = value.replace(/[^0-9:]/g, '');
        // Kiểm tra xem giá trị có độ dài phù hợp để thêm dấu : tự động
        if (value.length === 2 && !value.includes(':')) {
            value = value + ':';
        }
        // Xóa dấu : nếu người dùng xóa nó
        if (value.length === 2 && event.nativeEvent.inputType === 'deleteContentBackward') {
            value = value.substring(0, value.length - 1);
        }
        // Cập nhật giá trị thời gian
        setInputValue(value);
        if (value.length === 5 && /^\d{2}:\d{2}$/.test(value)) {
            const [hour, minute] = value.split(':').map(Number);
            if (hour < 0 || hour > 23 || minute < 0 || minute > 59) {
                setInputValue(min || '00:00');
            }
            const inputMinutes = hour * 60 + minute;
            const minMinutes = min ? (0, utils_1.toMinutes)(min) : undefined;
            const maxMinutes = max ? (0, utils_1.toMinutes)(max) : undefined;
            if ((minMinutes && inputMinutes < minMinutes) || (maxMinutes && inputMinutes > maxMinutes)) {
                setInputValue(min || '00:00');
            }
        }
        if (onChange) {
            onChange(value);
        }
    };
    const value = () => {
        switch (true) {
            case !!defaultValue && !!inputValue:
                return inputValue;
            case !!defaultValue && !inputValue:
                return defaultValue;
            default:
                return inputValue;
        }
    };
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: className },
            label && react_1.default.createElement("label", { className: 'block mb-1 text-xs font-normal text-gray-700' }, label),
            react_1.default.createElement("div", { className: 'relative' },
                react_1.default.createElement("label", { ref: inputRef, className: 'absolute top-0 h-[1.875rem] w-full rounded-lg py-4', htmlFor: id, onClick: handleToggleCalendar }),
                react_1.default.createElement("input", { className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 pl-9 text-xs font-normal shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:bg-gray-50 focus:outline-none focus:outline-offset-1 focus:outline-indigo-500 focus:ring-transparent', disabled ? '!border-gray-100 bg-gray-100 text-gray-400 hover:!bg-gray-100' : '', error ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : ''), disabled: disabled, id: id, onChange: (event) => handleChangeInput(event), value: value(), placeholder: placeholder, readOnly: readOnly }),
                react_1.default.createElement("input", { className: 'hidden rounded-lg', id: `${id}-after`, style: {
                        content: '',
                        position: 'absolute',
                        height: 0,
                        top: 0,
                        zIndex: -100,
                    }, ...register, value: value(), readOnly: readOnly }),
                error && errorType ? react_1.default.createElement(ErrorMessage_1.default, { message: message(errorType) }) : null,
                react_1.default.createElement("div", { className: 'absolute left-3 top-2' },
                    react_1.default.createElement(outline_1.ClockIcon, { className: 'w-4 h-4 text-gray-500' })),
                react_1.default.createElement("div", { ref: calendarRef, className: classNames('absolute z-50 w-full max-w-[20rem]', origin === 'top-left' && '-top-[17.5rem] left-0', origin === 'top-right' && '-top-[17.5rem] right-0', origin === 'bottom-left' && 'left-0 top-10', origin === 'bottom-right' && 'right-0 top-10', isCalendarVisible && !disabled ? '' : 'hidden') },
                    react_1.default.createElement(Time_1.default, { setIsCalendarVisible: setIsCalendarVisible, onChangeTime: (val) => handleChange(val), step: step, min: min, max: max, hideDisable: hideDisable }))),
            helpText ? react_1.default.createElement("div", { className: 'mt-1 text-xs text-gray-500' }, helpText) : null)));
}
//# sourceMappingURL=TimePicker.js.map