"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NavItem;
const tslib_1 = require("tslib");
const solid_1 = require("@heroicons/react/24/solid");
const image_1 = tslib_1.__importDefault(require("next/image"));
const react_1 = tslib_1.__importDefault(require("react"));
const Icon_1 = require("../assets/Icon");
const icon_v3_1 = require("../assets/icon-v3");
const constant_1 = require("../constant");
const helper_1 = require("../helper");
const types_1 = require("../../types");
function NavItem({ bgActiveColor, child, code, delayHover = false, href, isActive, isShowOtherMenu = false, name, parentPath, perCodes = [], requiredActionCount = 0, showSubMenu = false, sideBarType, theme, }) {
    var _a;
    const basePath = (_a = parentPath === null || parentPath === void 0 ? void 0 : parentPath.split('/')) === null || _a === void 0 ? void 0 : _a[1];
    const isShowSubMenuWhenHover = child && !showSubMenu && !isShowOtherMenu && !delayHover;
    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;
    const getCount = (count) => Number(count || 0);
    const getCountText = (count) => (getCount(count) > 99 ? '99+' : getCount(count));
    const hasRequiredActionInTree = (items) => {
        if (!(items === null || items === void 0 ? void 0 : items.length))
            return false;
        return items.some((item) => getCount(item.requiredActionCount) > 0 || hasRequiredActionInTree(item.child));
    };
    const showRequiredActionDot = getCount(requiredActionCount) > 0 || hasRequiredActionInTree(child);
    // @ts-ignore
    const Icon = icon_v3_1.IconV3[code] || icon_v3_1.IconV3.DASHBOARD;
    return (react_1.default.createElement("div", { className: (0, types_1.classNames)(!isActive && 'bg-opacity-25', 'group flex flex-col items-center gap-y-2', isIconOnly && 'mb-1 h-8 w-8 rounded-lg', isIconOnly && isActive && !isDefaultTheme && 'bg-white', isIconOnly && !isActive && !isDefaultTheme && 'hover:bg-white/30', isIconWithLabelHorizontal && 'mb-0.5 w-[10.25rem] rounded-lg  hover:bg-white', isIconWithLabelHorizontal && isActive ? 'bg-white' : '', isIconWithLabelVertical && 'mb-2', 'hover:cursor-pointer') },
        react_1.default.createElement("a", { className: (0, types_1.classNames)(`relative flex h-full w-full items-center gap-y-1`, isIconWithLabelHorizontal
                ? 'flex-row gap-x-2 px-2 py-1.5 text-gray-600 hover:text-gray-900'
                : `${theme === null || theme === void 0 ? void 0 : theme.sideBarColorDefault} flex-col group-hover:text-white`), href: href },
            react_1.default.createElement("div", { className: (0, types_1.classNames)('relative z-10', isIconOnly && !isDefaultTheme && 'pt-1.5', isIconWithLabelVertical && 'rounded-lg p-1', isIconWithLabelVertical && isActive && !isDefaultTheme && 'bg-white', isIconWithLabelVertical && !isActive && !isDefaultTheme && 'group-hover:bg-white/30') },
                react_1.default.createElement(Icon, { activeColor: isIconWithLabelHorizontal ? '#111827' : theme === null || theme === void 0 ? void 0 : theme.activeIconColor, isActive: isActive }),
                showRequiredActionDot && (react_1.default.createElement("span", { className: (0, types_1.classNames)('absolute rounded-full border-2 border-white bg-red-500', isIconWithLabelHorizontal && '-right-1.5 -top-1 h-2.5 w-2.5', isIconOnly && '-right-1 -top-1 h-2.5 w-2.5', isIconWithLabelVertical && '-right-1 -top-0.5 h-2.5 w-2.5') }))),
            isDefaultTheme && !isIconWithLabelHorizontal ? (react_1.default.createElement(react_1.default.Fragment, null, isActive ? (react_1.default.createElement("div", { className: (0, types_1.classNames)('absolute -top-1 h-8 w-8 rounded-full blur-[10px]', isIconOnly && '-left-[0.1rem] -top-[0.3rem]'), style: {
                    backgroundColor: bgActiveColor,
                } })) : (react_1.default.createElement("div", { className: (0, types_1.classNames)('absolute -top-1 rounded-full py-1.5 group-hover:bg-white group-hover:blur-[19px]', isIconWithLabelHorizontal ? '-left-2 h-7 w-7' : 'h-8 w-8') })))) : (react_1.default.createElement(react_1.default.Fragment, null)),
            isShowSubMenuWhenHover && (react_1.default.createElement("div", { className: (0, types_1.classNames)('absolute top-1 z-[9999] hidden h-5 w-3 overflow-hidden pl-1 group-hover:block', isIconWithLabelHorizontal && '-right-[0.47rem]', isIconOnly && '-right-[0.97rem] top-[0.5rem]', isIconWithLabelVertical && '-right-[0.625rem]') },
                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: '#F3F3F3', stroke: '#d1d5db', strokeLinejoin: 'round', strokeWidth: '1' })))),
            react_1.default.createElement("p", { className: (0, types_1.classNames)('truncate text-center text-[10px]', isActive && !isIconWithLabelHorizontal && 'text-white', isIconOnly && 'hidden', isIconWithLabelHorizontal && 'text-xs text-gray-700', isActive && isIconWithLabelHorizontal && 'font-medium text-gray-900') }, name.length > 7 && sideBarType !== constant_1.SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL ? `${name.slice(0, 7)}..` : name)),
        isShowSubMenuWhenHover && (react_1.default.createElement("div", { className: (0, types_1.classNames)('shadow-[0px_4px_6px_-2px_#1A1A1A33,inset_0px_1px_0px_0px_#CCCCCC80,inset_0px_-1px_0px_0px_#0000002B,inset_-1px_0px_0px_0px_#00000021,inset_1px_0px_0px_0px_#00000021] absolute top-0 z-[50] hidden h-[calc(100vh-3.35rem)] w-[14.9rem] rounded-xl bg-[#F3F3F3] px-2 group-hover:block left-[10.725rem]', isIconWithLabelHorizontal ? 'left-[10.725rem]' : '', isIconOnly ? 'left-[3.55rem]' : '', isIconWithLabelVertical ? 'left-[3.75rem]' : '') },
            react_1.default.createElement("div", { className: ' absolute -left-4 bottom-0 top-0 z-30 w-5' }),
            react_1.default.createElement("h2", { className: 'mt-4 text-sm font-[650] text-gray-900' }, name),
            react_1.default.createElement("div", { className: (0, types_1.classNames)('mt-4 flex flex-col gap-1', isIconWithLabelHorizontal ? 'mt-4' : '', isIconOnly ? 'mt-3.5' : '') }, child === null || child === void 0 ? void 0 : child.map((c) => {
                var _a;
                const disabled = !perCodes.includes(c.code);
                const isHaveChild = ((_a = c.child) === null || _a === void 0 ? void 0 : _a.length) > 0 && !disabled;
                return (react_1.default.createElement("div", { key: c.code, className: 'group/child relative' },
                    disabled && (react_1.default.createElement("div", { className: 'absolute inset-0 cursor-not-allowed rounded-md opacity-60 group-hover/child:bg-white' })),
                    react_1.default.createElement("a", { className: (0, types_1.classNames)('peer mb-0.5 flex items-center gap-x-2 rounded-md p-2 hover:bg-white'), href: `/${basePath}${c.path}` },
                        react_1.default.createElement(image_1.default, { alt: 'icon', className: (0, types_1.classNames)(disabled ? '' : 'group-hover/child:brightness-50'), height: 18, quality: 100, src: 
                            // @ts-ignore
                            Icon_1.IconV2[(0, helper_1.normalizeCode)(c.code)] ||
                                // @ts-ignore
                                Icon_1.IconV2[`${code}_OUTLINE`], width: 18 }),
                        react_1.default.createElement("span", { className: (0, types_1.classNames)('flex-1 truncate whitespace-nowrap text-xs ', disabled ? 'text-gray-400' : 'text-gray-700 group-hover/child:text-gray-900') }, c.name),
                        react_1.default.createElement("span", { className: 'ml-auto inline-flex w-11 shrink-0 items-center justify-end gap-x-1' },
                            react_1.default.createElement("span", { className: 'inline-flex w-7 justify-end' }, getCount(c.requiredActionCount) > 0 && (react_1.default.createElement("span", { className: 'shadow-sm min-w-4 rounded-md bg-red-500 p-1 text-center text-[10px] font-semibold leading-none text-white' }, getCountText(c.requiredActionCount)))),
                            react_1.default.createElement("span", { className: 'inline-flex w-3 justify-end text-gray-400' }, isHaveChild && react_1.default.createElement(solid_1.ChevronRightIcon, { className: 'text-gray-400', height: 14, width: 14 })))),
                    isHaveChild && (react_1.default.createElement("div", { className: (0, types_1.classNames)('shadow-soft absolute -right-[13.2rem] top-0 hidden w-[12.375rem] rounded-lg bg-[#F3F3F3] p-2 drop-shadow-xl group-hover/child:block') },
                        react_1.default.createElement("div", { className: 'absolute -left-40 bottom-0 top-9 w-40' }),
                        react_1.default.createElement("div", { className: 'absolute -left-6 top-0 h-10 w-6' }),
                        c.child.map((c2) => {
                            const disabledSubChild = !perCodes.includes(c2.code);
                            return (react_1.default.createElement("a", { key: c2.path, className: (0, types_1.classNames)('peer mb-0.5 flex items-center gap-x-2 rounded-md p-2 text-xs ', disabledSubChild
                                    ? 'cursor-not-allowed text-gray-400 hover:bg-white/50'
                                    : 'text-gray-700 hover:bg-white hover:text-gray-900'), href: `/${basePath}${c2.path}` },
                                react_1.default.createElement("span", { className: 'flex-1 truncate whitespace-nowrap' }, c2.name),
                                react_1.default.createElement("span", { className: 'inline-flex w-7 justify-end' }, getCount(c2.requiredActionCount) > 0 && (react_1.default.createElement("span", { className: 'shadow-sm min-w-4 rounded-md bg-red-500 p-1 text-center text-[10px] font-semibold leading-none text-white' }, getCountText(c2.requiredActionCount))))));
                        })))));
            }))))));
}
//# sourceMappingURL=nav-item.js.map