import { Disclosure, Transition } from '@headlessui/react';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Image from 'next/image';
import React, { useEffect, useState } from 'react';
import { IconV2 } from '../assets/Icon';
import { MENU_ACTIVITY_HISTORY_CHILD, PATH_ACTIVITY_HISTORY } from '../../../utils/constants';
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
export default function NavMobileContent({ hiddenSideBar, menu, pathName, pathNameWithBasePath, permission, router, }) {
    const closeSideBar = (item, parent) => {
        const currentPath = pathName.split('/');
        const parentPath = parent.path.split('/');
        if (currentPath[1] === parentPath[1] && !(item === null || item === void 0 ? void 0 : item.isMicroservice)) {
            hiddenSideBar();
            router.push(item.path);
        }
        else {
            window.location.replace((item === null || item === void 0 ? void 0 : item.isMicroservice) ? `${item.path}` : `/${parentPath[1]}${item.path}`);
        }
    };
    const activeModule = (href) => {
        const pathNameSplit = pathName.split('/');
        const urlRouter1 = pathNameSplit[2];
        const hrefSplit = href.split('/');
        const currentMenu1 = hrefSplit[1];
        return urlRouter1 === currentMenu1;
    };
    function enablePer(code, arr) {
        return arr === null || arr === void 0 ? void 0 : arr.some((item) => item === code);
    }
    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 isActivityHistory = () => {
        const pathNameSplit = pathNameWithBasePath.split('/');
        return pathNameSplit[1] === PATH_ACTIVITY_HISTORY;
    };
    const activityHistoryParent = { path: '/activity-history/list' };
    const [activityHistoryChild, setActivityHistoryChild] = useState(MENU_ACTIVITY_HISTORY_CHILD);
    const initShowActivityHistory = isActivityHistory();
    const [activityHistoryShow, setActivityHistoryShow] = useState(initShowActivityHistory);
    const handleClickActivityHistoryChild = (clickedItem) => {
        const updated = activityHistoryChild.map((item) => ({
            ...item,
            current: item.code === clickedItem.code,
        }));
        setActivityHistoryChild(updated);
    };
    useEffect(() => {
        setActivityHistoryChild((prev) => prev.map((item) => ({
            ...item,
            current: pathNameWithBasePath.endsWith(item.path),
        })));
    }, [pathNameWithBasePath]);
    return (React.createElement(React.Fragment, null,
        menu ? (React.createElement("div", { className: activityHistoryShow ? 'mb-40' : 'mb-24' }, menu.map((item) => (React.createElement(React.Fragment, null, enablePer(item === null || item === void 0 ? void 0 : item.code, permission) &&
            (!item.child ? (React.createElement("div", { key: item.name },
                React.createElement("a", { className: classNames(item.current ? 'font-semibold' : 'text-gray-600 ', 'group flex w-full items-center rounded-md py-2 pl-2 text-sm font-medium'), href: item.path }, item.name))) : (React.createElement(Disclosure, { key: item.name, as: 'div', className: 'space-y-1', defaultOpen: item.current }, ({ open }) => {
                var _a, _b, _c, _d;
                return (React.createElement(React.Fragment, null,
                    React.createElement(Disclosure.Button, { className: classNames(item.current ? 'text-gray-600' : 'text-gray-600', 'group flex w-full items-center gap-x-3 rounded-md py-2 pl-2 pr-1 text-left text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500') },
                        React.createElement("div", { className: 'relative' },
                            item.menuIconSL ? (React.createElement("img", { alt: 'icon', className: 'mr-2 w-[1.6rem]', src: item.menuIconSL })) : (React.createElement(Image, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem] text-gray-950'), height: 0, 
                                // @ts-ignore
                                src: IconV2[`${item.code}_OUTLINE`], width: 0 })),
                            (getCount(item.requiredActionCount) > 0 || hasRequiredActionInTree(item.child)) && (React.createElement("span", { className: 'absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full border-2 border-white bg-red-500' }))),
                        React.createElement("p", { className: 'flex-1 text-[0.86rem] font-normal text-gray-800 subpixel-antialiased' }, item.name),
                        React.createElement("svg", { "aria-hidden": 'true', className: classNames(open ? 'rotate-90 text-gray-400' : 'text-gray-300', 'ml-3 h-5 w-5 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-gray-400'), viewBox: '0 0 20 20' },
                            React.createElement("path", { d: 'M6 6L14 10L6 14V6Z', fill: 'currentColor' }))),
                    React.createElement(Transition, { enter: 'transition duration-100 ease-out', enterFrom: 'transform scale-95 opacity-0', enterTo: 'transform scale-100 opacity-100', leave: 'transition duration-75 ease-out', leaveFrom: 'transform scale-100 opacity-100', leaveTo: 'transform scale-95 opacity-0', show: open },
                        React.createElement(Disclosure.Panel, { className: 'space-y-1', static: false }, item.path === '/admissions/campaign/list' && pathName !== '/admissions/campaign/list' ? (React.createElement(React.Fragment, null, (_c = (_b = (_a = item.child) === null || _a === void 0 ? void 0 : _a.find((child) => child.path === '/campaign/list')) === null || _b === void 0 ? void 0 : _b.childrenByParentDetail) === null || _c === void 0 ? void 0 : _c.map((child, index) => (React.createElement(React.Fragment, null, enablePer(child === null || child === void 0 ? void 0 : child.code, permission) && (React.createElement("p", { key: index, "aria-hidden": true, className: classNames('group flex w-full cursor-pointer items-center rounded-md py-[5px] pl-11 pr-2 font-medium', activeModule(child.path)
                                ? 'bg-white font-semibold text-gray-900'
                                : ' text-gray-600 hover:bg-gray-200'), onClick: () => closeSideBar(child, item) },
                            React.createElement("span", { className: 'flex-1' }, child.name),
                            getCount(child.requiredActionCount) > 0 && (React.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(child.requiredActionCount)))))))))) : (React.createElement(React.Fragment, null, (_d = item.child) === null || _d === void 0 ? void 0 : _d.map((subItem, index) => {
                            var _a;
                            return (React.createElement(React.Fragment, null,
                                enablePer(subItem === null || subItem === void 0 ? void 0 : subItem.code, permission) && (React.createElement("p", { key: index, "aria-hidden": true, className: classNames('group flex w-full cursor-pointer items-center rounded-md py-[5px] pl-11 pr-2 text-[0.86rem] text-sm font-normal text-gray-800', subItem.current
                                        ? 'bg-white font-semibold text-gray-900'
                                        : ' text-gray-600 hover:bg-gray-200 '), onClick: () => closeSideBar(subItem, item) },
                                    React.createElement("span", { className: 'flex-1' }, subItem.name),
                                    getCount(subItem.requiredActionCount) > 0 && (React.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(subItem.requiredActionCount))))),
                                subItem.showChild && subItem.child && (React.createElement(React.Fragment, null, (_a = subItem.child) === null || _a === void 0 ? void 0 : _a.map((children) => (React.createElement("p", { key: children.name, "aria-hidden": true, className: classNames('group flex w-full cursor-pointer items-center rounded-md py-[5px] pl-8 pr-2', (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: () => closeSideBar(children, item) },
                                    React.createElement("div", { className: 'flex flex-1 items-center gap-x-3' },
                                        React.createElement("div", { className: 'w-3' }),
                                        React.createElement("p", { className: classNames('my-[0.05rem] ml-3 flex-1 text-[0.86rem] font-normal leading-5 text-gray-800', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'font-normal text-gray-600') }, children.name)),
                                    getCount(children.requiredActionCount) > 0 && (React.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(children.requiredActionCount))))))))));
                        })))))));
            })))))))) : (React.createElement(React.Fragment, null)),
        React.createElement("div", { className: 'fixed bottom-0 -mx-2 w-full max-w-xs overflow-hidden bg-gray-200 p-3 transition-all' },
            React.createElement("div", { className: 'absolute -left-0 top-0 h-[1px] w-full bg-gray-300' }),
            React.createElement(Disclosure, { key: PATH_ACTIVITY_HISTORY, as: 'div', className: 'mb-2 space-y-1', defaultOpen: isActivityHistory() }, ({ open }) => (React.createElement(React.Fragment, null,
                React.createElement(Disclosure.Button, { className: classNames(isActivityHistory() ? 'text-gray-600' : 'text-gray-600', 'group flex w-full items-center gap-x-3 rounded-md py-2 text-left text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500'), onClick: () => setActivityHistoryShow(!activityHistoryShow) },
                    React.createElement(Image, { alt: 'icon', className: classNames('mt-0.5 h-[1.125rem] w-[1.125rem] text-gray-950 brightness-0'), height: 0, 
                        // @ts-ignore
                        src: IconV2.ACTIVITY_HISTORY, width: 0 }),
                    React.createElement("p", { className: 'flex-1 text-[0.86rem] font-normal text-gray-800 subpixel-antialiased' }, "L\u1ECBch s\u1EED ho\u1EA1t \u0111\u1ED9ng"),
                    React.createElement("svg", { "aria-hidden": 'true', className: classNames(open ? 'rotate-90 text-gray-400' : 'text-gray-300', 'ml-3 h-5 w-5 flex-shrink-0 transform transition-colors duration-150 ease-in-out group-hover:text-gray-400'), viewBox: '0 0 20 20' },
                        React.createElement("path", { d: 'M6 6L14 10L6 14V6Z', fill: 'currentColor' }))),
                React.createElement(Transition, { enter: 'transition duration-100 ease-out', enterFrom: 'transform scale-95 opacity-0', enterTo: 'transform scale-100 opacity-100', leave: 'transition duration-75 ease-out', leaveFrom: 'transform scale-100 opacity-100', leaveTo: 'transform scale-95 opacity-0', show: activityHistoryShow },
                    React.createElement(Disclosure.Panel, { className: 'space-y-1', static: false },
                        React.createElement(React.Fragment, null, activityHistoryChild.map((subItem, index) => (React.createElement(React.Fragment, null,
                            React.createElement("p", { key: index, "aria-hidden": true, className: classNames('group flex w-full cursor-pointer items-center rounded-md py-[5px] pl-11 pr-2 text-[0.86rem] text-sm font-normal text-gray-800', subItem.current
                                    ? 'bg-white font-semibold text-gray-900'
                                    : ' text-gray-600 hover:bg-gray-200 '), onClick: () => {
                                    closeSideBar(subItem, activityHistoryParent);
                                    handleClickActivityHistoryChild(subItem);
                                } }, subItem.name)))))))))),
            React.createElement("a", { className: 'font-medium text-gray-700', href: '/setting' },
                React.createElement("span", { className: 'sr-only' }, "setting"),
                React.createElement("span", { className: 'group mt-0.5 flex cursor-pointer hover:z-10' },
                    React.createElement(Image, { alt: 'icon', className: classNames('mt-0.5 h-[1.125rem] w-[1.125rem] text-gray-950 brightness-0'), height: 0, 
                        // @ts-ignore
                        src: IconV2.SETTING, width: 0 }),
                    React.createElement("div", { className: 'h-6' },
                        React.createElement("p", { className: 'setting-text-color ml-2 mt-0.5 h-full text-[0.86rem] font-normal text-gray-800 transition-all' }, "C\u00E0i \u0111\u1EB7t")))))));
}
//# sourceMappingURL=nav-mobile-content.js.map