"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = OtherMenu;
const tslib_1 = require("tslib");
const image_1 = tslib_1.__importDefault(require("next/image"));
const react_1 = tslib_1.__importStar(require("react"));
const Icon_1 = require("../assets/Icon");
const icon_v3_1 = require("../assets/icon-v3");
const other_menu_icon_1 = tslib_1.__importDefault(require("../assets/icon-v3/other-menu-icon"));
const constant_1 = require("../constant");
const helper_1 = require("../helper");
const bold_icon_1 = tslib_1.__importDefault(require("./bold-icon"));
const types_1 = require("../../types");
const Button_1 = require("../../Button");
const Modal_1 = require("../../Modal");
const __1 = require("../../..");
function PinList({ className = '', handleChangePined, list, searchKeyword, title, }) {
    const filteredList = list
        .filter((navItem) => (0, helper_1.normalizeString)(navItem.name).includes((0, helper_1.normalizeString)(searchKeyword.toLowerCase())) &&
        navItem.code !== constant_1.MENU_CODE.DASHBOARD)
        .sort((a, b) => {
        const aDisabled = !!a.disabled; // true/false
        const bDisabled = !!b.disabled;
        if (aDisabled === bDisabled)
            return 0; // cùng trạng thái → giữ nguyên thứ tự tương đối
        if (aDisabled)
            return 1; // a disabled → đẩy xuống dưới
        return -1; // a không disabled, b disabled → a lên trên
    });
    if (filteredList.length === 0)
        return null;
    return (react_1.default.createElement("div", { className: className },
        react_1.default.createElement("p", { className: 'text-xxs text-gray-500' }, title),
        react_1.default.createElement("div", { className: 'mt-3 grid grid-cols-4 gap-y-1 ' }, filteredList.map((navItem, index) => (react_1.default.createElement("div", { key: index, className: ` relative flex h-[90px] w-[90px] flex-col  items-center rounded-xl   p-2  ${navItem.disabled
                ? 'cursor-not-allowed'
                : 'group border-[0.66px] border-white hover:border-gray-200 hover:bg-gray-100'}` },
            navItem.disabled && react_1.default.createElement("div", { className: 'absolute inset-0 z-10 bg-white opacity-60' }),
            react_1.default.createElement("button", { className: 'peer absolute -right-[0.5rem] -top-[0.5rem] z-10 hidden rounded-full bg-white p-1 text-black  drop-shadow-md hover:bg-gray-200 group-hover:block', onClick: () => handleChangePined(navItem), type: 'button' }, navItem.isPined ? react_1.default.createElement(icon_v3_1.IconV3.UN_PIN, null) : react_1.default.createElement(icon_v3_1.IconV3.PIN, null)),
            react_1.default.createElement("div", { className: 'shadow-soft absolute -right-[0.6rem] -top-[3rem] hidden rounded-lg bg-white  p-2 drop-shadow-md peer-hover:block' },
                react_1.default.createElement("p", { className: 'text-xs' }, !navItem.isPined ? 'Ghim' : 'Bỏ ghim'),
                react_1.default.createElement("div", { className: ' absolute bottom-0 right-0.5 z-10 h-2 w-6 rounded-lg bg-white' }),
                react_1.default.createElement("div", { className: (0, types_1.classNames)('absolute  right-1  h-5 w-3 -rotate-90 overflow-hidden pl-1') },
                    react_1.default.createElement("div", { className: ' h-4 w-4  -rotate-[37.5deg] skew-x-[12deg] rounded-[3px]  border border-gray-200 bg-white' }))),
            react_1.default.createElement("a", { className: 'flex flex-col items-center', href: navItem.path },
                react_1.default.createElement(bold_icon_1.default, { classname: 'p-2', code: navItem.code, index: index }),
                react_1.default.createElement("p", { className: 'test-gray-900 mt-1.5 w-[10ch] text-center text-xxs' }, navItem.name))))))));
}
function SearchBar({ className = '', currValue = '', onChange, }) {
    return (react_1.default.createElement("div", { className: `flex items-center overflow-hidden rounded-xl border border-gray-300 px-3 ${className}` },
        react_1.default.createElement(image_1.default, { alt: 'icon', height: 20, quality: 100, src: Icon_1.IconV2.SEARCH, width: 20 }),
        react_1.default.createElement("input", { className: '-ml-1.5 flex-1 border-none bg-transparent text-xs focus:ring-0', onChange: (e) => onChange(e.target.value), placeholder: 'T\u00ECm ki\u1EBFm ph\u00E2n h\u1EC7', type: 'text', value: currValue })));
}
function ModalCustomPin({ data, onChangeSideBarType, onChangeTheme, onOpen, onOrder, themeCode, }) {
    const [show, setShow] = (0, react_1.useState)(false);
    const [searchValue] = (0, react_1.useState)('');
    const [orderData, setOrderData] = (0, react_1.useState)(data);
    const [loading, setLoading] = (0, react_1.useState)(false);
    const [sideBarType, setSideBarType] = (0, react_1.useState)(constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL);
    const [selectedThemeCode, setSelectedThemeCode] = (0, react_1.useState)(themeCode || constant_1.THEME_CODE.BLACK);
    const arrSideBarType = [
        {
            name: 'Biểu tượng và Nhãn ngang',
            image: Icon_1.IconV2.NAV2,
            code: constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL,
        },
        {
            name: 'Chỉ biểu tượng',
            image: Icon_1.IconV2.NAV1,
            code: constant_1.SIDEBAR_TYPE.ONLY_ICON,
        },
        {
            name: 'Biểu tượng và Nhãn dọc',
            image: Icon_1.IconV2.NAV3,
            code: constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_VERTICAL,
        },
    ];
    const onSubmit = async () => {
        setLoading(true);
        try {
            let nextTheme = constant_1.themes.find((item) => item.code === selectedThemeCode);
            if (sideBarType === constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL) {
                nextTheme = constant_1.themes.find((item) => item.code === constant_1.THEME_CODE.PINK);
            }
            await onChangeTheme(nextTheme || constant_1.themes[0]);
            onOrder(orderData);
            onChangeSideBarType(sideBarType);
            onHide();
        }
        catch (e) {
            console.error(e);
        }
        finally {
            setLoading(false);
        }
    };
    function onHide() {
        setShow(false);
    }
    (0, react_1.useEffect)(() => {
        setOrderData(data);
    }, [data.length]);
    (0, react_1.useEffect)(() => {
        if (show) {
            const savedSideBarType = localStorage.getItem(constant_1.LOCALSTORAGE_SHOW_SIDEBAR_TYPE);
            if (savedSideBarType) {
                setSideBarType(savedSideBarType);
            }
        }
    }, [show]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement(Button_1.PHXButton, { onClick: () => {
                setShow(true);
                onOpen();
            }, secondary: true, size: 'micro' },
            react_1.default.createElement(image_1.default, { alt: 'icon', height: 18, quality: 100, src: Icon_1.IconV2.SETTING_OTHER_MENU, width: 18 })),
        react_1.default.createElement(Modal_1.PHXModal, { inCard: false, onHide: onHide, onSubmit: onSubmit, primaryActionText: 'L\u01B0u l\u1EA1i', primaryLoading: loading, show: show, size: 'medium', title: 'Tu\u1EF3 ch\u1EC9nh thanh b\u00EAn' },
            react_1.default.createElement("h2", { className: 'mb-2 text-xs font-[650] text-gray-900' }, "B\u1ED1 c\u1EE5c"),
            react_1.default.createElement("div", { className: 'mb-4 flex items-center gap-x-5' }, arrSideBarType.map((type) => (react_1.default.createElement("button", { key: type.code, onClick: () => {
                    setSideBarType(type.code);
                }, type: 'button' },
                react_1.default.createElement(image_1.default, { alt: 'icon', className: ` border-2 ${sideBarType === type.code ? 'rounded-[16px] border-[#1A1A1A]' : ' border-white'}`, height: 110, quality: 100, 
                    // @ts-ignore
                    src: type.image, width: 160 }),
                react_1.default.createElement("p", { className: `mt-2 ${sideBarType === type.code ? 'text-gray-900' : ''}` }, type.name))))),
            sideBarType !== constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL && (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement("h2", { className: 'mb-2 text-xs font-[650] text-gray-900' }, "M\u00E0u ch\u1EE7 \u0111\u1EC1"),
                react_1.default.createElement("div", { className: 'mb-4 flex flex-wrap gap-3' }, constant_1.themes.map((theme) => {
                    const isActive = theme.code === selectedThemeCode;
                    return (react_1.default.createElement("button", { key: theme.code, className: `flex min-w-[10.4rem] items-center gap-x-2 rounded-lg border  px-4 py-3 text-xs  ${isActive ? 'text-gray-900' : 'text-gray-500'}`, onClick: () => setSelectedThemeCode(theme.code), style: {
                            backgroundColor: isActive ? theme.activeBgColor : '',
                            borderColor: isActive ? theme.borderColor : '#e5e7eb',
                        }, type: 'button' },
                        react_1.default.createElement("span", { className: 'flex h-6 w-6 items-center justify-center rounded-md', style: {
                                backgroundColor: theme.checkBoxColor,
                            } }, isActive && (react_1.default.createElement("svg", { fill: 'none', height: '8', viewBox: '0 0 11 8', width: '11', xmlns: 'http://www.w3.org/2000/svg' },
                            react_1.default.createElement("path", { clipRule: 'evenodd', d: 'M10.7071 0.292893C11.0976 0.683417 11.0976 1.31658 10.7071 1.70711L4.70711 7.70711C4.31658 8.09763 3.68342 8.09763 3.29289 7.70711L0.292893 4.70711C-0.0976311 4.31658 -0.0976311 3.68342 0.292893 3.29289C0.683417 2.90237 1.31658 2.90237 1.70711 3.29289L4 5.58579L9.29289 0.292893C9.68342 -0.0976311 10.3166 -0.0976311 10.7071 0.292893Z', fill: 'white', fillRule: 'evenodd' })))),
                        react_1.default.createElement("span", null, theme.name)));
                })))),
            react_1.default.createElement("div", { className: 'space-y-2' },
                react_1.default.createElement("h2", { className: 'text-xs font-[650] text-gray-900' }, "Ph\u00E2n h\u1EC7 \u0111\u00E3 ghim"),
                react_1.default.createElement(__1.PHXSortable, { className: 'space-y-1 overflow-y-auto !rounded-xl p-2', enableBorder: true, 
                    // @ts-ignore
                    list: orderData.filter((item) => item.name.toLowerCase().includes(searchValue.toLowerCase())), renderItem: (item, index) => {
                        const isDisabled = item.isDisabled;
                        // @ts-ignore
                        const Icon = icon_v3_1.IconV3[item.code] || icon_v3_1.IconV3.DASHBOARD;
                        return (react_1.default.createElement("div", { key: index }, isDisabled ? (react_1.default.createElement("div", { className: 'relative flex cursor-not-allowed items-center gap-x-1.5 py-4 pl-4' },
                            react_1.default.createElement("div", { className: ' absolute inset-0 bg-white opacity-60' }),
                            react_1.default.createElement(Icon, null),
                            react_1.default.createElement("p", { className: 'text-xs font-[450] text-gray-900' }, item.name))) : (react_1.default.createElement(__1.PHXSortItem, { className: 'group rounded-lg !px-3 !py-2 hover:bg-gray-100', dragIconPosition: 'left', title: react_1.default.createElement("div", { className: 'relative ml-2 flex items-center gap-x-1.5' },
                                isDisabled && react_1.default.createElement("div", { className: ' absolute inset-0 bg-white opacity-60' }),
                                react_1.default.createElement(Icon, null),
                                react_1.default.createElement("p", { className: 'text-xs font-[450] text-gray-500 group-hover:text-gray-900' }, item.name)) }))));
                    }, 
                    // @ts-ignore
                    setList: (sortedData) => setOrderData(sortedData) })))));
}
function OtherMenu({ active, handleChangePined, noPined, onChangeSideBarType, onChangeTheme, onOrder, pined, setActive, sideBarType, theme, }) {
    const pinedLength = pined.length;
    const noPinedLength = noPined.length;
    const countMenu = pinedLength + noPinedLength;
    const otherMenuRef = (0, react_1.useRef)(null);
    const containerRef = (0, react_1.useRef)(null);
    const [searchKeyword, setSearchKeyWord] = (0, react_1.useState)('');
    const isIconOnly = sideBarType === constant_1.SIDEBAR_TYPE.ONLY_ICON;
    const isIconWithLabelHorizontal = sideBarType === constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL;
    const isIconWithLabelVertical = sideBarType === constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_VERTICAL;
    const isDefaultTheme = (theme === null || theme === void 0 ? void 0 : theme.code) === constant_1.THEME_CODE.BLACK;
    (0, react_1.useEffect)(() => {
        function handleClickOutside(e) {
            if (containerRef.current && !containerRef.current.contains(e.target)) {
                setActive(false);
            }
        }
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    }, []);
    (0, react_1.useEffect)(() => {
        if (!active) {
            setSearchKeyWord('');
        }
    }, [active]);
    return (react_1.default.createElement("div", { ref: containerRef },
        react_1.default.createElement("button", { className: (0, types_1.classNames)('group relative flex items-center', isIconWithLabelHorizontal
                ? 'w-[10.25rem] gap-x-2 rounded-lg px-2 pb-1 pt-1.5 hover:bg-white'
                : 'mt-0.5 h-5 flex-col gap-y-2', isIconWithLabelHorizontal && active && 'bg-white', isIconOnly && !isDefaultTheme ? 'mt-1' : ''), onClick: () => setActive(!active), type: 'button' },
            active && (react_1.default.createElement("div", { className: (0, types_1.classNames)('absolute z-[9999] h-5 w-3 overflow-hidden pl-1', isIconWithLabelHorizontal ? 'left-[9.85rem]' : '', isIconOnly ? 'left-[1.95rem] top-[0.25rem]' : '', isIconWithLabelVertical ? 'left-[2.75rem] top-[0.25rem]' : '') },
                react_1.default.createElement("svg", { height: '18', viewBox: '0 0 12 18', width: '12', xmlns: 'http://www.w3.org/2000/svg' },
                    react_1.default.createElement("path", { d: 'M11.6973 0L11.6973 18L1.69931 12.0012C-0.566378 10.6418 -0.566379 7.35819 1.69931 5.99878L11.6973 0Z', fill: 'white', stroke: '#d1d5db', strokeLinejoin: 'round', strokeWidth: '1' })))),
            active ? (react_1.default.createElement("div", { className: (0, types_1.classNames)('absolute h-7 w-7 rounded-full ', isIconWithLabelHorizontal ? '-left-2' : '', isDefaultTheme ? 'bg-white blur-[18px]' : '') })) : (react_1.default.createElement("div", { className: (0, types_1.classNames)('absolute h-7  w-7 rounded-full py-1.5', isIconWithLabelHorizontal ? '-left-2' : '', isDefaultTheme ? 'group-hover:bg-white group-hover:blur-[18px]' : '') })),
            pinedLength > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement("div", { className: (0, types_1.classNames)('relative h-[1.5rem] w-[1.5rem]', isIconOnly ? 'mt-1 pl-[0.08rem]' : '', isIconWithLabelVertical && 'pl-[0.08rem]') },
                    (!active || isIconWithLabelHorizontal) && (react_1.default.createElement("div", { className: (0, types_1.classNames)(` absolute  top-0 z-10`, isIconWithLabelHorizontal ? 'text-gray-600' : `${theme === null || theme === void 0 ? void 0 : theme.sideBarColorDefault} group-hover:hidden`) },
                        react_1.default.createElement(other_menu_icon_1.default, null))),
                    !isIconWithLabelHorizontal && (react_1.default.createElement(image_1.default, { alt: 'icon', className: (0, types_1.classNames)('absolute top-0 z-10 ', active
                            ? 'scale-100'
                            : 'scale-75 opacity-0 transition-all group-hover:scale-100 group-hover:opacity-100', isIconWithLabelHorizontal ? '' : 'left-1/2 -translate-x-1/2'), height: 20, 
                        // @ts-ignore
                        src: Icon_1.IconV2.OHTER_MENU_HOVER, width: 20 }))),
                !isIconOnly && (react_1.default.createElement("p", { className: (0, types_1.classNames)(`text-center`, active && isIconWithLabelHorizontal ? 'font-medium text-gray-900' : '', active && !isIconWithLabelHorizontal ? 'text-white' : '', isIconWithLabelHorizontal
                        ? '-ml-1 pb-1 text-xs text-gray-700 group-hover:text-gray-900'
                        : `${theme === null || theme === void 0 ? void 0 : theme.sideBarColorDefault} group-hover:text-white`, isIconWithLabelVertical ? 'mt-[1rem] text-[10px]' : '') }, "M\u1EE5c kh\u00E1c"))))),
        react_1.default.createElement("div", { className: ` absolute top-0 w-[25rem]  ${active ? '-right-[25.3rem]' : '-left-[1000px] opacity-0'}` },
            react_1.default.createElement("div", { ref: otherMenuRef, className: 'shadow-soft rounded-xl bg-white' },
                react_1.default.createElement("div", { className: 'flex items-center justify-between px-4 pt-4' },
                    react_1.default.createElement("h2", { className: 'text-base font-[650] text-gray-900' }, "M\u1EE5c kh\u00E1c"),
                    react_1.default.createElement(ModalCustomPin, { data: pined, onChangeSideBarType: onChangeSideBarType, onChangeTheme: onChangeTheme, onOpen: () => setActive(false), onOrder: onOrder, themeCode: theme === null || theme === void 0 ? void 0 : theme.code })),
                react_1.default.createElement(SearchBar, { className: 'mx-4 mt-4', currValue: searchKeyword, onChange: (value) => setSearchKeyWord(value) }),
                react_1.default.createElement("style", null, `/* custom scrollbar */
              .custom-scrollbar::-webkit-scrollbar {
                width: 6px;
                height: 6px;
              }
              .custom-scrollbar::-webkit-scrollbar-thumb {
                background: rgb(199 199 199); /* gray-400 */
                border-radius: 16px; /* bo tròn */
              }
            `),
                react_1.default.createElement("div", { className: 'custom-scrollbar mr-[1px] mt-2 max-h-[calc(100vh-10rem)]  overflow-y-auto px-4 pb-4 pt-6' },
                    react_1.default.createElement(PinList, { handleChangePined: handleChangePined, list: pined, searchKeyword: searchKeyword, title: `Đã ghim (${pinedLength}/${countMenu})` }),
                    react_1.default.createElement(PinList, { className: `${pinedLength > 1 ? 'mt-2' : ''}`, handleChangePined: handleChangePined, list: noPined, searchKeyword: searchKeyword, title: `Chưa ghim (${noPinedLength}/${countMenu})` }))))));
}
//# sourceMappingURL=other-menu.js.map