"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NavMobileContent;
const tslib_1 = require("tslib");
const react_1 = require("@headlessui/react");
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const react_2 = tslib_1.__importStar(require("react"));
const Icon_1 = require("../assets/Icon");
const image_1 = tslib_1.__importDefault(require("next/image"));
const constants_1 = require("../../../utils/constants");
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
function NavMobileContent({ pathName, menu, router, permission, hiddenSideBar, pathNameWithBasePath, }) {
    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 isSettings = () => {
        const pathNameSplit = pathNameWithBasePath.split('/');
        return pathNameSplit[1] === 'setting';
    };
    const isActivityHistory = () => {
        const pathNameSplit = pathNameWithBasePath.split('/');
        return pathNameSplit[1] === constants_1.PATH_ACTIVITY_HISTORY;
    };
    const activityHistoryParent = { path: '/activity-history/list' };
    const [activityHistoryChild, setActivityHistoryChild] = (0, react_2.useState)(constants_1.MENU_ACTIVITY_HISTORY_CHILD);
    const initShowActivityHistory = isActivityHistory();
    const [activityHistoryShow, setActivityHistoryShow] = (0, react_2.useState)(initShowActivityHistory);
    const handleClickActivityHistoryChild = (clickedItem) => {
        const updated = activityHistoryChild.map((item) => ({
            ...item,
            current: item.code === clickedItem.code,
        }));
        setActivityHistoryChild(updated);
    };
    (0, react_2.useEffect)(() => {
        setActivityHistoryChild((prev) => prev.map((item) => ({
            ...item,
            current: pathNameWithBasePath.endsWith(item.path),
        })));
    }, [pathNameWithBasePath]);
    return (react_2.default.createElement(react_2.default.Fragment, null,
        menu ? (react_2.default.createElement("div", { className: activityHistoryShow ? 'mb-40' : 'mb-24' }, menu.map((item) => (react_2.default.createElement(react_2.default.Fragment, null, enablePer(item === null || item === void 0 ? void 0 : item.code, permission) &&
            (!item.child ? (react_2.default.createElement("div", { key: item.name },
                react_2.default.createElement("a", { href: item.path, className: classNames(item.current ? 'font-semibold' : 'text-gray-600 ', 'group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md') }, item.name))) : (react_2.default.createElement(react_1.Disclosure, { defaultOpen: item.current, as: 'div', key: item.name, className: 'space-y-1' }, ({ open }) => (react_2.default.createElement(react_2.default.Fragment, null,
                react_2.default.createElement(react_1.Disclosure.Button, { className: classNames(item.current ? 'text-gray-600' : 'text-gray-600', 'group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 gap-x-3') },
                    item.menuIconSL ? (react_2.default.createElement("img", { src: item.menuIconSL, className: 'w-[1.6rem] mr-2', alt: 'icon' })) : (react_2.default.createElement(image_1.default, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem] text-gray-950'), height: 0, src: item.current ? Icon_1.Icons[`${item.code}_SOLID`] : Icon_1.Icons[item.code], width: 0 })),
                    react_2.default.createElement("p", { className: 'flex-1 subpixel-antialiased font-normal text-gray-800 text-[0.86rem]' }, item.name),
                    react_2.default.createElement("svg", { className: classNames(open ? 'text-gray-400 rotate-90' : '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', "aria-hidden": 'true' },
                        react_2.default.createElement("path", { d: 'M6 6L14 10L6 14V6Z', fill: 'currentColor' }))),
                react_2.default.createElement(react_1.Transition, { show: open, 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' },
                    react_2.default.createElement(react_1.Disclosure.Panel, { static: false, className: 'space-y-1' }, item.path === '/admissions/campaign/list' && pathName !== '/admissions/campaign/list' ? (react_2.default.createElement(react_2.default.Fragment, null, item.child
                        .find((child) => child.path === '/campaign/list')
                        .childrenByParentDetail.map((child, index) => (react_2.default.createElement(react_2.default.Fragment, null, enablePer(child === null || child === void 0 ? void 0 : child.code, permission) && (react_2.default.createElement("p", { "aria-hidden": true, onClick: () => closeSideBar(child, item), className: classNames('group flex w-full items-center rounded-md py-[5px] pl-11 pr-2 font-medium cursor-pointer', activeModule(child.path)
                            ? 'font-semibold bg-white text-gray-900'
                            : ' text-gray-600 hover:bg-gray-200'), key: index }, child.name))))))) : (react_2.default.createElement(react_2.default.Fragment, null, item.child.map((subItem, index) => (react_2.default.createElement(react_2.default.Fragment, null,
                        enablePer(subItem === null || subItem === void 0 ? void 0 : subItem.code, permission) && (react_2.default.createElement("p", { "aria-hidden": true, onClick: () => closeSideBar(subItem, item), className: classNames('group flex w-full items-center rounded-md py-[5px] pl-11 pr-2 text-sm cursor-pointer font-normal text-gray-800 text-[0.86rem]', subItem.current
                                ? 'font-semibold bg-white text-gray-900'
                                : ' text-gray-600 hover:bg-gray-200 '), key: index }, subItem.name)),
                        subItem.showChild && subItem.child && (react_2.default.createElement(react_2.default.Fragment, null, subItem.child.map((children) => (react_2.default.createElement("p", { "aria-hidden": true, key: children.name, className: classNames('group flex w-full items-center rounded-md py-[5px] pl-8 pr-2 cursor-pointer', (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_2.default.createElement("div", { className: 'flex items-center gap-x-3' },
                                react_2.default.createElement("div", { className: 'w-3' }),
                                react_2.default.createElement("p", { className: classNames('ml-3 leading-5 my-[0.05rem] font-normal text-gray-800 text-[0.86rem]', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'text-gray-600 font-normal') }, children.name)))))))))))))))))))))))) : (react_2.default.createElement(react_2.default.Fragment, null)),
        react_2.default.createElement("div", { className: 'fixed bottom-0 transition-all overflow-hidden p-3 bg-gray-200 w-full max-w-xs -mx-2' },
            react_2.default.createElement("div", { className: 'absolute -left-0 top-0 h-[1px] w-full bg-gray-300' }),
            react_2.default.createElement(react_1.Disclosure, { defaultOpen: isActivityHistory(), as: 'div', key: constants_1.PATH_ACTIVITY_HISTORY, className: 'mb-2 space-y-1' }, ({ open }) => (react_2.default.createElement(react_2.default.Fragment, null,
                react_2.default.createElement(react_1.Disclosure.Button, { onClick: () => setActivityHistoryShow(!activityHistoryShow), 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') },
                    react_2.default.createElement(image_1.default, { alt: 'icon', className: classNames('mt-0.5 h-[1.125rem] w-[1.125rem] text-gray-950'), height: 0, src: isActivityHistory() ? Icon_1.Icons.ACTIVITY_HISTORY_SOLID : Icon_1.Icons.ACTIVITY_HISTORY, width: 0 }),
                    react_2.default.createElement("p", { className: 'flex-1 text-[0.86rem] font-normal text-gray-800 subpixel-antialiased' }, "L\u1ECBch s\u1EED ho\u1EA1t \u0111\u1ED9ng"),
                    react_2.default.createElement("svg", { 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', "aria-hidden": 'true' },
                        react_2.default.createElement("path", { d: 'M6 6L14 10L6 14V6Z', fill: 'currentColor' }))),
                react_2.default.createElement(react_1.Transition, { show: activityHistoryShow, 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' },
                    react_2.default.createElement(react_1.Disclosure.Panel, { static: false, className: 'space-y-1' },
                        react_2.default.createElement(react_2.default.Fragment, null, activityHistoryChild.map((subItem, index) => (react_2.default.createElement(react_2.default.Fragment, null,
                            react_2.default.createElement("p", { "aria-hidden": true, onClick: () => {
                                    closeSideBar(subItem, activityHistoryParent);
                                    handleClickActivityHistoryChild(subItem);
                                }, 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 '), key: index }, subItem.name)))))))))),
            react_2.default.createElement("a", { href: '/setting', className: 'text-gray-700 font-medium' },
                react_2.default.createElement("span", { className: 'sr-only' }, "setting"),
                react_2.default.createElement("span", { className: 'group cursor-pointer hover:z-10 mt-0.5 flex' },
                    react_2.default.createElement(image_1.default, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem] text-gray-950 mt-0.5'), height: 0, src: isSettings() ? Icon_1.Icons.SETTING_SOLID : Icon_1.Icons.SETTING, width: 0 }),
                    react_2.default.createElement("div", { className: 'h-6' },
                        react_2.default.createElement("p", { className: 'transition-all h-full font-normal text-gray-800 text-[0.86rem] setting-text-color mt-0.5 ml-2' }, "C\u00E0i \u0111\u1EB7t")))))));
}
//# sourceMappingURL=nav-mobile-content.js.map