import { Combobox } from '@headlessui/react';
import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
import React, { useEffect, useRef, useState } from 'react';
import { PHXInput } from '../Input';
import ErrorMessage from '../../commons/ErrorMessage';
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
export const PHXSelectBox = (props) => {
    const { data, defaultValue, disabled = false, error, errorMessageCustom, errorType, label, onChange, onToggle, origin = 'bottom', placeholder, register, } = props;
    const [query, setQuery] = useState('');
    const comboBtn = useRef(null);
    const inputRef = useRef(null);
    const [inputWidth, setInputWidth] = useState(null);
    const [selectedPerson, setSelectedPerson] = useState(defaultValue ? defaultValue : null);
    // Theo dõi thay đổi kích thước của input
    useEffect(() => {
        const updateWidth = () => {
            if (inputRef.current) {
                // Sử dụng getBoundingClientRect để lấy chiều rộng chính xác
                const width = inputRef.current.getBoundingClientRect().width;
                setInputWidth(width);
            }
        };
        updateWidth(); // Cập nhật ngay lần đầu
        const observer = new ResizeObserver(() => {
            updateWidth();
        });
        if (inputRef.current) {
            observer.observe(inputRef.current);
        }
        return () => {
            if (inputRef.current) {
                observer.unobserve(inputRef.current);
            }
        };
    }, []);
    const filteredPeople = query === '' ? data : data.filter((person) => person.value.toLowerCase().includes(query.toLowerCase()));
    const handlerClickInput = () => {
        var _a;
        (_a = comboBtn.current) === null || _a === void 0 ? void 0 : _a.click();
    };
    const onChangeValue = (value) => {
        if (!value)
            return;
        setSelectedPerson(value);
        onChange(value);
    };
    const message = (type) => {
        let errorMessage = '';
        switch (type) {
            case 'required-field':
                errorMessage = 'Vui lòng nhập thông tin';
                break;
            case 'validate-input-field':
                errorMessage = 'Vui lòng nhập thông tin hợp lệ (độ dài 1 - 60 kí tự)';
                break;
            case 'duplicate-field':
                errorMessage = 'Thông tin đã tồn tại';
                break;
            case 'validate-phone-number':
                errorMessage = 'Số điện thoại chưa hợp lệ';
                break;
            case 'validate-input-email':
                errorMessage = 'Định dạng email chưa đúng, vui lòng nhập lại';
                break;
            case 'custom-message':
                errorMessage = errorMessageCustom;
                break;
            default:
                break;
        }
        return errorMessage;
    };
    const errorCheck = error && errorType && !selectedPerson;
    const onChangeSelectBox = (event) => {
        setQuery(event.target.value);
    };
    const OpenStateWatcher = ({ onToggleCombobox, open }) => {
        useEffect(() => {
            if (onToggleCombobox) {
                onToggleCombobox(open);
            }
            if (!open) {
                setQuery('');
            }
        }, [open]);
        return React.createElement(React.Fragment, null);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Combobox, { as: 'div', onChange: onChangeValue, value: selectedPerson }, ({ open }) => (React.createElement(React.Fragment, null,
            React.createElement(OpenStateWatcher, { onToggleCombobox: onToggle, open: open }),
            React.createElement(Combobox.Label, { className: 'mb-1 flex text-xs font-normal text-gray-700' }, label),
            React.createElement("div", { className: 'relative' },
                disabled ? (React.createElement(PHXInput, { disabled: disabled, value: (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.value) || '' })) : (React.createElement(Combobox.Input, { autoComplete: 'off', className: classNames('block w-full rounded-lg border-[0.5px] border-gray-500 px-3 py-1.5 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', errorCheck ? 'border-red-800 bg-red-50 hover:bg-red-50 focus:border-red-800 focus:bg-red-50' : ''), ...register, ref: inputRef, displayValue: (person) => person === null || person === void 0 ? void 0 : person.value, onChange: (event) => onChangeSelectBox(event), onClick: () => handlerClickInput(), placeholder: placeholder })),
                React.createElement(Combobox.Button, { ref: comboBtn, className: 'hidden' },
                    React.createElement(ChevronUpDownIcon, { "aria-hidden": 'true', className: 'h-5 w-5 text-gray-400' })),
                filteredPeople.length > 0 ? (React.createElement(Combobox.Options, { className: classNames('absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', origin === 'top' ? 'bottom-10' : ''), style: {
                        width: inputWidth ? `${inputWidth}px` : '100%',
                        left: 0,
                        boxSizing: 'border-box',
                    } }, filteredPeople.map((person) => (React.createElement(Combobox.Option, { key: person.id, className: ({ active }) => classNames('relative mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) ? 'bg-zinc-200' : 'text-gray-900', active ? 'bg-zinc-100' : 'text-gray-900'), value: person }, ({ active }) => (React.createElement(React.Fragment, null,
                    React.createElement("span", { className: classNames('block truncate text-xs', person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && 'font-semibold') }, person.value),
                    person.id === (selectedPerson === null || selectedPerson === void 0 ? void 0 : selectedPerson.id) && (React.createElement("span", { className: classNames('absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-gray-900' : 'text-indigo-600') },
                        React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))))) : (React.createElement(Combobox.Options, { className: classNames('absolute z-10 mt-2 max-h-60 overflow-auto rounded-lg bg-white px-2 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm', origin === 'top' ? 'bottom-10' : ''), style: {
                        width: inputWidth ? `${inputWidth}px` : '100%',
                        left: 0,
                        boxSizing: 'border-box',
                    } },
                    React.createElement(Combobox.Option, { className: 'mb-1 cursor-pointer select-none rounded-lg py-2 pl-3 pr-9', value: '' },
                        React.createElement("div", { className: 'flex flex-col items-center justify-center' },
                            React.createElement("svg", { className: 'mx-auto h-4 w-4 text-gray-700', fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' },
                                React.createElement("path", { d: 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: '2' })),
                            React.createElement("h3", { className: 'pt-[2px] text-sm text-gray-700' }, "Kh\u00F4ng c\u00F3 d\u1EEF li\u1EC7u"))))))))),
        errorCheck ? React.createElement(ErrorMessage, { message: message(errorType) }) : null));
};
//# sourceMappingURL=SelectBox.js.map