import { Transition } from '@headlessui/react';
import Image from 'next/image';
import React, { Fragment } from 'react';
import { IconV2 } from '../assets/Icon';
import { SIDEBAR_TYPE } from '../constant';
import { checkChildBefore, enablePer, normalizeCode } from '../helper';
import { classNames } from '../../types';
import { TITLE_ACTIVITY_HISTORY } from '../../../utils/constants';
import { PHXSkeleton } from '../../Skeleton';
export default function SubMenu({ activityHistoryChild, currentMenuByPath, handleClickActivityHistoryChild, isActivityHistory, isShowSubmenu, loadingMenu, perCode, roleCodes, setShowSubMenu, sideBarType, subNavigation, subNavigationTriggerClicked, }) {
    const isIconWithLabelHorizontal = sideBarType === SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL;
    const getCount = (count) => Number(count || 0);
    const shouldShowCount = (count) => getCount(count) > 0;
    const getCountText = (count) => (getCount(count) > 99 ? '99+' : getCount(count));
    const renderCountBadge = (count, className = '') => {
        if (!shouldShowCount(count))
            return null;
        return (React.createElement("span", { className: classNames('shadow-sm min-w-4 rounded-md bg-red-500 p-1 text-center text-[10px] font-semibold leading-none text-white', className) }, getCountText(count)));
    };
    const renderCountSlot = (count, className = '') => {
        if (!shouldShowCount(count))
            return null;
        return (React.createElement("span", { className: classNames('ml-auto inline-flex w-8 justify-end pr-1', className) }, renderCountBadge(count)));
    };
    return (React.createElement(Transition, { as: Fragment, enter: 'transform transition ease-in-out duration-[350ms]', enterFrom: '-translate-x-[10rem] opacity-0', enterTo: 'translate-x-0', leave: 'transform transition ease-in-out duration-[350ms]', leaveFrom: 'translate-x-0', leaveTo: '-translate-x-[10rem] opacity-0', show: isShowSubmenu },
        React.createElement("aside", { className: classNames('group hidden rounded-r-xl  px-2 pl-4 lg:block  lg:flex-shrink-0', isIconWithLabelHorizontal ? 'ml-[0.1rem]' : '-ml-[0.5rem]') },
            React.createElement("div", { className: classNames('relative flex h-full w-[12.4rem] flex-col overflow-y-auto overflow-x-hidden', isShowSubmenu ? 'block' : 'hidden') },
                React.createElement("div", { className: 'mt-4 flex w-full items-center justify-between px-2' },
                    React.createElement("h1", { className: 'text-sm font-semibold text-gray-900' }, isActivityHistory ? TITLE_ACTIVITY_HISTORY : currentMenuByPath === null || currentMenuByPath === void 0 ? void 0 : currentMenuByPath.name),
                    ((isShowSubmenu && currentMenuByPath) || isActivityHistory) && (React.createElement("button", { className: 'group/child1 absolute -right-2 flex h-7 w-7 items-center justify-center rounded-md opacity-0 transition-all duration-300 hover:bg-white  group-hover:right-1.5 group-hover:opacity-100', onClick: () => setShowSubMenu(false), type: 'button' },
                        React.createElement(Image, { alt: 'icon', className: 'group-hover/child1:brightness-50', height: 13, quality: 100, 
                            // @ts-ignore
                            src: IconV2.CLOSE_SIDEBAR, width: 13 })))),
                React.createElement("div", { className: 'mt-3 overflow-y-auto' },
                    subNavigation.map((item, subNavIndex) => {
                        const activeChildIndex = item.child.findIndex((c) => c.current);
                        const isChildActive = activeChildIndex !== -1;
                        return (React.createElement("div", { key: subNavIndex }, (roleCodes === null || roleCodes === void 0 ? void 0 : roleCodes.length) > 0 ? (React.createElement(React.Fragment, null, enablePer(item.code, perCode) ? (React.createElement(React.Fragment, null,
                            (item === null || item === void 0 ? void 0 : item.isMicroservice) ? (React.createElement("a", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
                                    ? 'rounded-lg bg-white' // màu background menu cha khi active
                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
                                'mx-3 flex cursor-pointer border-slate-200 p-2'), href: item.path }, !loadingMenu ? (React.createElement("div", { className: 'flex w-full items-center justify-between gap-x-2 text-xs' },
                                React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-3' },
                                    React.createElement("p", { className: classNames('truncate whitespace-nowrap leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
                                renderCountSlot(item.requiredActionCount))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))) : (React.createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames('rounded-lg', 'mb-1 flex cursor-pointer px-2 py-1.5', (item === null || item === void 0 ? void 0 : item.current) ? 'bg-white' : 'hover:bg-white'), onClick: () => subNavigationTriggerClicked(item) }, !loadingMenu ? (React.createElement("div", { className: 'flex w-full items-center justify-between gap-x-2 text-xs' },
                                React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-2' },
                                    React.createElement(Image, { alt: 'icon', className: `${isChildActive || item.current ? ' brightness-[0.3]' : ''}`, height: 18, quality: 100, src: 
                                        // @ts-ignore
                                        IconV2[normalizeCode(item.code)] ||
                                            // @ts-ignore
                                            IconV2[`${currentMenuByPath === null || currentMenuByPath === void 0 ? void 0 : currentMenuByPath.code}_OUTLINE`] ||
                                            IconV2.DASHBOARD_OUTLINE, width: 18 }),
                                    React.createElement("p", { className: classNames('truncate whitespace-nowrap leading-5', isChildActive || item.current
                                            ? 'font-medium text-gray-900'
                                            : 'font-normal text-gray-700') }, item === null || item === void 0 ? void 0 : item.name)),
                                renderCountSlot(item.requiredActionCount))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
                            item.showChild && item.child && (React.createElement(React.Fragment, null, item.child.map((
                            // eslint-disable-next-line @typescript-eslint/no-shadow
                            children, childIndex) => (React.createElement("div", { key: childIndex, className: classNames('relative') },
                                childIndex <= activeChildIndex && (React.createElement("div", { className: `absolute  left-5 z-10  w-[1px] bg-gray-400 ${(children === null || children === void 0 ? void 0 : children.current) ? 'h-3' : 'bottom-0'} ${childIndex === 0 ? '-top-1' : ' top-0'}` })),
                                React.createElement("div", { className: `${childIndex === activeChildIndex ? 'block' : 'hidden'}` },
                                    React.createElement(Image, { alt: 'icon', className: 'absolute left-5 top-0 h-6 w-3', height: 1, 
                                        // @ts-ignore
                                        src: IconV2.ARROW_RIGHT_SUB_MENU, width: 1 }),
                                    React.createElement("div", { className: 'absolute left-[21px]  top-0 z-10 h-4 w-[1px]  bg-white bg-opacity-50' })),
                                (children === null || children === void 0 ? void 0 : children.isMicroservice) ? (React.createElement("a", { "aria-hidden": true, className: classNames('my-0.5 block w-full rounded-lg px-2 text-[#353A44]', (children === null || children === void 0 ? void 0 : children.current) ? 'bg-white' : 'hover:bg-white', !enablePer(children.code, perCode) ? 'bg-opacity-50 hover:bg-white/50' : ''), href: children.path, onClick: enablePer(children.code, perCode) ? undefined : (e) => e.preventDefault() },
                                    React.createElement("div", { className: 'flex w-full flex-row items-center justify-between' },
                                        React.createElement("p", { className: classNames('truncate whitespace-nowrap py-[0.4375rem] pl-[2.4rem] pr-2 text-left text-xs', !enablePer(children.code, perCode)
                                                ? 'cursor-not-allowed text-gray-400'
                                                : (children === null || children === void 0 ? void 0 : children.current)
                                                    ? 'font-medium text-gray-900'
                                                    : 'text-gray-700') }, children.name),
                                        renderCountSlot(children.requiredActionCount)))) : (React.createElement("button", { "aria-hidden": true, className: classNames('my-0.5 w-full rounded-lg px-2 text-[#353A44]', (children === null || children === void 0 ? void 0 : children.current) ? 'bg-white' : 'hover:bg-white', !enablePer(children.code, perCode) ? 'bg-opacity-50 hover:bg-white/50' : ''), onClick: enablePer(children.code, perCode)
                                        ? () => subNavigationTriggerClicked(children, item)
                                        : undefined, type: 'button' },
                                    React.createElement("div", { className: 'flex w-full flex-row items-center justify-between' },
                                        React.createElement("p", { className: classNames('truncate whitespace-nowrap py-[0.4375rem] pl-[2rem] pr-2 text-left text-xs', !enablePer(children.code, perCode)
                                                ? 'cursor-not-allowed text-gray-400'
                                                : (children === null || children === void 0 ? void 0 : children.current)
                                                    ? 'font-medium text-gray-900'
                                                    : 'text-gray-700') }, children.name),
                                        renderCountSlot(children.requiredActionCount))))))))))) : (React.createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, className: classNames((item === null || item === void 0 ? void 0 : item.current)
                                ? 'rounded-lg bg-white'
                                : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // hover:bg-white
                            'mb-1 flex cursor-not-allowed border-slate-200 px-2 py-1.5') }, !loadingMenu ? (React.createElement("div", { className: 'ml-1 flex min-w-0 items-center text-xs' },
                            React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-2' },
                                React.createElement(Image, { alt: 'icon', className: 'brightness-0 invert-[70%]', height: 18, quality: 100, src: 
                                    // @ts-ignore
                                    IconV2[normalizeCode(item.code)] ||
                                        // @ts-ignore
                                        IconV2[`${currentMenuByPath === null || currentMenuByPath === void 0 ? void 0 : currentMenuByPath.code}_OUTLINE`] ||
                                        IconV2.DASHBOARD_OUTLINE, width: 18 }),
                                React.createElement("p", { className: classNames('truncate whitespace-nowrap leading-5 text-gray-400') }, item === null || item === void 0 ? void 0 : item.name)),
                            React.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))))) : (React.createElement(React.Fragment, null,
                            (item === null || item === void 0 ? void 0 : item.isMicroservice) ? (React.createElement("a", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
                                    ? 'rounded-lg bg-white' // màu background menu cha khi active
                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
                                'mx-3 flex cursor-pointer border-slate-200 p-2'), href: item.path }, !loadingMenu ? (React.createElement("div", { className: 'flex w-full items-center justify-between gap-x-2 text-xs' },
                                React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-3' },
                                    React.createElement("p", { className: classNames('truncate whitespace-nowrap leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
                                renderCountSlot(item.requiredActionCount))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))) : (React.createElement("div", { "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
                                    ? 'rounded-lg bg-white' // màu background menu cha khi active
                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
                                'mx-3 flex cursor-pointer border-slate-200 p-2'), onClick: () => subNavigationTriggerClicked(item) }, !loadingMenu ? (React.createElement("div", { className: 'flex w-full items-center justify-between gap-x-2 text-xs' },
                                React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-3' },
                                    React.createElement("p", { className: classNames('truncate whitespace-nowrap leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
                                renderCountSlot(item.requiredActionCount))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
                            item.showChild && item.child && (React.createElement(React.Fragment, null, item.child.map(
                            // eslint-disable-next-line @typescript-eslint/no-shadow
                            (children, index) => (React.createElement("div", { key: index, className: classNames('relative', (children === null || children === void 0 ? void 0 : children.current) && 'child-menu-active', checkChildBefore(item.child, children) && 'child-menu-bef') }, (children === null || children === void 0 ? void 0 : children.isMicroservice) ? (React.createElement("a", { "aria-hidden": true, className: classNames('mx-3 flex cursor-pointer items-center justify-between border-slate-200 p-2 text-xs', (children === null || children === void 0 ? void 0 : children.current)
                                    ? 'rounded-lg bg-white text-gray-900 '
                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-gray-900'), href: item.path },
                                React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-3' },
                                    React.createElement("div", { className: 'w-3' }),
                                    React.createElement("p", { className: classNames('my-[0.05rem] ml-3 truncate whitespace-nowrap leading-5', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'font-normal text-gray-600') }, children.name)),
                                renderCountSlot(children.requiredActionCount))) : (React.createElement("div", { "aria-hidden": true, className: classNames('mx-3 flex cursor-pointer items-center justify-between border-slate-200 p-2 text-xs', (children === null || children === void 0 ? void 0 : children.current)
                                    ? 'rounded-lg bg-white text-gray-900 '
                                    : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-gray-900'), onClick: () => subNavigationTriggerClicked(children, item) },
                                React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-3' },
                                    React.createElement("div", { className: 'w-3' }),
                                    React.createElement("p", { className: classNames('my-[0.05rem] ml-3 truncate whitespace-nowrap leading-5', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'font-normal text-gray-600') }, children.name)),
                                renderCountSlot(children.requiredActionCount))))))))))));
                    }),
                    !loadingMenu &&
                        activityHistoryChild.map((item, subNavIndex) => (React.createElement("div", { key: subNavIndex, "aria-current": (item === null || item === void 0 ? void 0 : item.current) ? 'page' : undefined, "aria-hidden": true, className: classNames((item === null || item === void 0 ? void 0 : item.current)
                                ? 'rounded-lg bg-white' // màu background menu cha khi active
                                : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50', // màu background khi hover vào menu cha
                            'mx-3 mt-1 flex cursor-pointer border-slate-200 p-2'), onClick: () => {
                                handleClickActivityHistoryChild(item);
                                subNavigationTriggerClicked(item);
                            } },
                            React.createElement("div", { className: 'ml-1 flex min-w-0 items-center text-xs' },
                                React.createElement("div", { className: 'flex min-w-0 flex-1 items-center gap-x-3' },
                                    React.createElement("p", { className: classNames('truncate whitespace-nowrap leading-5', (item === null || item === void 0 ? void 0 : item.current) ? '' : 'font-normal text-[#353A44]') }, item === null || item === void 0 ? void 0 : item.name)),
                                React.createElement("p", { className: 'mt-1 text-slate-500' }, item === null || item === void 0 ? void 0 : item.description))))))))));
}
//# sourceMappingURL=submenu.js.map