"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PHXDropdown = PHXDropdown;
const tslib_1 = require("tslib");
/* eslint-disable react/prop-types */
const react_1 = require("@headlessui/react");
const solid_1 = require("@heroicons/react/20/solid");
const OutlineIcons = tslib_1.__importStar(require("@heroicons/react/24/outline"));
const SolidIcons = tslib_1.__importStar(require("@heroicons/react/24/solid"));
const react_2 = tslib_1.__importStar(require("react"));
const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
const types_1 = require("../types");
const Calendar_1 = tslib_1.__importDefault(require("../DatePicker/components/Calendar"));
const Loading_1 = require("../Loading");
const PHXUrlApply_1 = tslib_1.__importDefault(require("../Func/PHXUrlApply/PHXUrlApply"));
function PHXDropdown({ buttonContent, className, defaultDate, disabledDate, endDisabled, loading, max, min, onChangeDate, optionTitle, options, origin = 'left', soft = false, startDisabled, type = 'default', widthContent, isFullContentOption = false, disabled = false, configUrlApply, onlyResetValueUrl = false, }) {
    const [portalElement, setPortalElement] = (0, react_2.useState)(null);
    const [realOrigin, setRealOrigin] = (0, react_2.useState)(origin !== null && origin !== void 0 ? origin : 'left');
    const menuButtonRef = (0, react_2.useRef)(null);
    const scrollContainerRef = (0, react_2.useRef)(null);
    const handleCloseRef = (0, react_2.useRef)();
    function getDropdownButtonClass({ type, soft, disabled, open, loading, }) {
        const base = 'w-full group relative isolate flex items-center justify-center overflow-hidden rounded-lg transition duration-300 ease-[cubic-bezier(0.4,0.36,0,1)]';
        if (disabled || loading) {
            return (0, types_1.classNames)(base, type === 'primary'
                ? 'relative bg-[#303030] px-2.5 py-1.5 text-xs font-normal text-white opacity-30 cursor-not-allowed shadow-sm'
                : type === 'danger'
                    ? 'relative bg-red-700 px-2.5 py-1.5 text-xs font-normal text-white opacity-30 cursor-not-allowed shadow-sm'
                    : 'relative bg-indigo-50 px-2.5 py-[5px] text-xs font-normal text-gray-400 cursor-not-allowed');
        }
        if (soft) {
            return (0, types_1.classNames)(base, 'bg-indigo-50 px-2.5 py-1.5 text-xs font-normal text-gray-700 shadow-sm hover:bg-indigo-100 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!bg-indigo-100 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
        }
        switch (type) {
            case 'icon-only':
                return (0, types_1.classNames)(base, 'flex items-center rounded-full text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100');
            case 'soft-small':
                return (0, types_1.classNames)(base, 'bg-gray-200 px-2 py-1 text-xs hover:bg-gray-300 active:pb-[0.2rem] active:pt-[0.35rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!bg-gray-300 shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
            case 'ellipsis-icon':
                return (0, types_1.classNames)(base, 'flex items-center');
            case 'default':
            case 'date-picker':
            default:
                return (0, types_1.classNames)(base, 'bg-white hover:bg-[#fafafa] transition-all px-2.5 py-[5px] text-xs 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] group', open &&
                    'bg-[#f7f7f7] !shadow-[inset_0_2px_1px_0_#1a1a1a33,inset_-1px_0_1px_0_#1a1a1a1f,inset_1px_0_1px_0_#1a1a1a1f]');
            case 'primary':
                return (0, types_1.classNames)(base, 'bg-[#303030] px-2.5 py-1.5 text-xs font-normal text-white shadow-sm !shadow-[inset_0_-1px_0_1px_rgba(0,0,0,0.8),inset_0_0_0_1px_rgba(48,48,48,1),inset_0_0.5px_0_1.5px_rgba(255,255,255,0.25)] hover:bg-[#1A1A1A] hover:text-gray-200 active:bg-[#1A1A1A] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!bg-[#1A1A1A] !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
            case 'danger':
                return (0, types_1.classNames)(base, 'border border-gray-300 bg-red-700 px-2.5 py-1.5 text-xs font-normal text-white shadow-sm hover:border-gray-400 active:border-b-gray-100 active:bg-red-400 active:pb-[0.3rem] active:pt-[0.45rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', open && '!border-b-gray-300 bg-red-700 !shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]');
        }
    }
    const calculatePosition = () => {
        if (menuButtonRef.current && portalElement) {
            const buttonRect = menuButtonRef.current.getBoundingClientRect();
            portalElement.style.position = 'absolute';
            const dropdownHeight = portalElement.offsetHeight || 240;
            const viewportHeight = window.innerHeight;
            const spaceBottom = viewportHeight - buttonRect.bottom;
            const spaceTop = buttonRect.top;
            let nextOrigin = origin;
            // Kiểm tra nếu dropdown position bottom quá gần cuối màn hình sẽ tự chuyển position lên top tránh bị màn hình che
            if ((origin === 'left' || origin === 'right') && spaceBottom < dropdownHeight && spaceTop > dropdownHeight) {
                nextOrigin = origin === 'left' ? 'top-left' : 'top-right';
            }
            setRealOrigin(nextOrigin);
            switch (nextOrigin) {
                case 'left':
                    portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
                    portalElement.style.left = `${buttonRect.left + window.scrollX}px`;
                    break;
                case 'right':
                    portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
                    portalElement.style.right = `${window.innerWidth - buttonRect.right}px`;
                    break;
                case 'top-left':
                    portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
                    portalElement.style.bottom = `${window.innerHeight - buttonRect.top}px`;
                    portalElement.style.left = `${buttonRect.left + window.scrollX}px`;
                    break;
                case 'top-right':
                    portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
                    portalElement.style.bottom = `${window.innerHeight - buttonRect.top}px`;
                    portalElement.style.right = `${window.innerWidth - buttonRect.right}px`;
                    break;
                default:
                    portalElement.style.top = `${buttonRect.bottom + window.scrollY}px`;
                    portalElement.style.left = `${buttonRect.left + window.scrollX}px`;
            }
        }
    };
    const handleClick = (item) => {
        if (item.disabled)
            return;
        if (item === null || item === void 0 ? void 0 : item.onClick) {
            item.onClick();
        }
        (0, PHXUrlApply_1.default)(item.key, item.id, item.listKeyReset, configUrlApply, onlyResetValueUrl);
    };
    (0, react_2.useEffect)(() => {
        const element = document.createElement('div');
        document.body.appendChild(element);
        setPortalElement(element);
        return () => {
            document.body.removeChild(element);
        };
    }, []);
    (0, react_2.useEffect)(() => {
        // Tìm phần tử cha có scroll
        const findScrollContainer = (element) => {
            while (element) {
                const { overflowY } = window.getComputedStyle(element);
                if (overflowY === 'scroll' || overflowY === 'auto') {
                    return element;
                }
                element = element.parentElement;
            }
            return null;
        };
        if (menuButtonRef.current) {
            scrollContainerRef.current = findScrollContainer(menuButtonRef.current);
        }
    }, []);
    (0, react_2.useEffect)(() => {
        if (portalElement) {
            calculatePosition();
        }
    }, [portalElement]);
    (0, react_2.useEffect)(() => {
        const handleScrollAndResize = (event) => {
            calculatePosition();
            const isScrollInsideDropdown = event.target instanceof Node && (portalElement === null || portalElement === void 0 ? void 0 : portalElement.contains(event.target));
            if (!isScrollInsideDropdown && (handleCloseRef === null || handleCloseRef === void 0 ? void 0 : handleCloseRef.current)) {
                handleCloseRef.current();
            }
        };
        window.addEventListener('scroll', handleScrollAndResize, true);
        window.addEventListener('resize', handleScrollAndResize);
        if (scrollContainerRef.current) {
            scrollContainerRef.current.addEventListener('scroll', handleScrollAndResize);
        }
        return () => {
            window.removeEventListener('scroll', handleScrollAndResize, true);
            window.removeEventListener('resize', handleScrollAndResize);
            if (scrollContainerRef.current) {
                scrollContainerRef.current.removeEventListener('scroll', handleScrollAndResize);
            }
        };
    }, [portalElement]);
    const Icon = ({ active, item }) => {
        if (item.iconComponent) {
            return item.iconComponent;
        }
        if (item.icon) {
            // @ts-ignore
            const Icon = item.iconOutline ? OutlineIcons[item.icon] : SolidIcons[item.icon];
            return react_2.default.createElement(Icon, { className: (0, types_1.classNames)('h-4 w-4', active && 'font-semibold') });
        }
        return null;
    };
    const renderMenuItems = () => (react_2.default.createElement(react_1.Transition, { as: react_2.Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
        react_2.default.createElement(react_1.Menu.Items, { className: (0, types_1.classNames)(realOrigin === 'left' && 'left-0 origin-top-left', realOrigin === 'right' && 'right-0 origin-top-right', realOrigin === 'top-left' && 'bottom-8 left-0', realOrigin === 'top-right' && 'bottom-8 right-0', type === 'date-picker' ? '' : 'border px-1', 'absolute z-50 mt-1.5 max-h-96 min-w-[7.2rem] overflow-y-auto overscroll-contain whitespace-nowrap rounded-lg bg-white shadow-[0rem_0.25rem_0.375rem_-0.125rem_rgba(26,26,26,.2)] focus:outline-none') }, type === 'date-picker' ? (react_2.default.createElement(Calendar_1.default, { defaultDate: defaultDate, disabledDate: disabledDate, endDisabled: endDisabled, max: max, min: min, onChangeDate: onChangeDate, startDisabled: startDisabled })) : (react_2.default.createElement(react_2.default.Fragment, null,
            optionTitle && react_2.default.createElement("p", { className: 'px-2.5 pb-1 pt-2 text-xs font-semibold' }, optionTitle),
            react_2.default.createElement("div", { className: 'py-1' }, options === null || options === void 0 ? void 0 : options.map((item) => {
                const iconEsixt = !!(item.icon || item.iconComponent);
                return (react_2.default.createElement(react_1.Menu.Item, { key: item.content }, ({ active }) => (react_2.default.createElement("div", { className: (0, types_1.classNames)(item.disabled ? 'cursor-not-allowed !text-gray-400' : 'cursor-pointer', active && !item.disabled
                        ? 'cursor-pointer rounded-lg bg-gray-100 text-gray-900'
                        : 'text-gray-700', 'block px-2.5 py-2 text-xs', item.active &&
                        !item.destructive &&
                        !item.disabled &&
                        'rounded-lg bg-gray-200 font-semibold text-gray-900', item.destructive && !item.active && !item.disabled && 'text-red-800 hover:bg-red-100', item.destructive &&
                        item.active &&
                        !item.disabled &&
                        'rounded-lg bg-red-200 font-semibold text-red-800'), onClick: () => {
                        handleClick(item);
                    } },
                    react_2.default.createElement("div", { className: (0, types_1.classNames)(iconEsixt && 'flex items-center gap-x-2') },
                        iconEsixt && react_2.default.createElement(Icon, { active: item.active, item: item }),
                        react_2.default.createElement("p", { className: `${widthContent} overflow-ellipsis break-words ${isFullContentOption ? 'whitespace-normal' : ''}` }, item.content))))));
            })))))));
    return (react_2.default.createElement("div", { className: (0, types_1.classNames)('relative max-w-full md:max-w-fit', type === 'ellipsis-icon' && 'flex items-center') },
        react_2.default.createElement(react_1.Menu, { as: 'div', className: (0, types_1.classNames)('relative inline-block w-full text-left', className && `${className}`, type === 'ellipsis-icon' && 'flex items-center') }, ({ close, open }) => {
            open && calculatePosition();
            handleCloseRef.current = close;
            return (react_2.default.createElement(react_2.default.Fragment, null,
                react_2.default.createElement("div", null,
                    react_2.default.createElement(react_1.Menu.Button, { disabled: disabled, ref: menuButtonRef, className: getDropdownButtonClass({ type, soft, disabled, open, loading }) },
                        react_2.default.createElement("div", { className: (0, types_1.classNames)(['default', 'date-picker', 'soft-small', 'primary', 'danger'].includes(type) &&
                                `flex items-center justify-between gap-x-1 md:justify-center`, type === 'ellipsis-icon' && 'flex items-center', 'block transition-transform group-active:translate-y-[1px]') },
                            react_2.default.createElement("p", { className: (0, types_1.classNames)('max-w-[120px] text-xxs font-medium truncate sm:max-w-full', ['primary', 'danger'].includes(type) ? 'text-white' : 'text-[#303030]', disabled && 'text-gray-400', type === 'icon-only' && 'sr-only') }, buttonContent),
                            ['default', 'date-picker', 'soft-small', 'primary', 'danger'].includes(type) &&
                                (open && origin === 'top-left' ? (react_2.default.createElement(solid_1.ChevronUpIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' })) : (react_2.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": 'true', className: 'mt-0.5 h-4 w-4' }))),
                            type === 'icon-only' && react_2.default.createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'w-4 h-4' }),
                            type === 'ellipsis-icon' && (react_2.default.createElement("div", { className: `rounded-lg p-1 hover:bg-gray-300  ${open ? 'bg-gray-200' : ''}` },
                                react_2.default.createElement(solid_1.EllipsisHorizontalIcon, { "aria-hidden": 'true', className: 'w-4 h-4' })))))),
                portalElement ? react_dom_1.default.createPortal(renderMenuItems(), portalElement) : null));
        }),
        loading && (react_2.default.createElement("div", { className: 'absolute left-[1px] top-[1px]  flex h-[calc(100%-2px)] w-[calc(100%-2px)] items-center justify-center rounded-lg bg-gray-300' },
            react_2.default.createElement(Loading_1.PHXSpinner, { className: 'h-[16px] w-[16px] text-white' })))));
}
//# sourceMappingURL=Dropdown.js.map