import { fas } from '@fortawesome/free-solid-svg-icons';
import { Menu, Transition } from '@headlessui/react';
import { Bars3Icon, LockClosedIcon } from '@heroicons/react/24/outline';
import React, { Fragment, useEffect, useRef, useState } from 'react';
import { PHXModal } from '../Modal';
import { PHXSkeleton } from '../Skeleton';
import Cookies from 'js-cookie';
import { DEFAULT_AVATAR, DEFAULT_LOGO_DASHBOARD, MENU_ACTIVITY_HISTORY_CHILD, PATH_ACTIVITY_HISTORY, switchSchool, } from '../../utils/constants';
import { ArrowLeftIcon } from '@heroicons/react/20/solid';
import { library } from '@fortawesome/fontawesome-svg-core';
import SearchDetail from './search/search-bar';
import { PHXBanner } from '../Banner';
import { CheckIcon } from '@heroicons/react/24/solid';
import { PHXClientQueryV3 } from '../Func/GRPC/PHXGrpcClientV3';
import { GET_PERMISSION_DETAIL_USER_V3, GET_SCHOOL_V3, getCampaignNameV3, QUERY_GET_PROFILE_USER } from '../../query';
import { PHXCard } from '../Card';
import PHXGetEnvPublicV3 from '../Func/getEnvPublic';
import saveCookiesClient from '../Func/saveCookiesClient';
import StyledCustomLayoutProps from './appearance/appearance-styled';
import NavMobile from './navigator/nav-mobile';
import { styles } from './style/sub-menu-style';
import { Icons } from './assets/Icon';
import Image from 'next/image';
import axios from 'axios';
import PHXFuncGetCookieSession from '../Func/getCookieSession';
import { useLoading } from '../LoadingProvider';
import { decryptCookie } from '../../helpers/helpers';
import { PageTracker } from '../../stores/page-tracker/page-tracker';
import { clearSession } from '../Func/sessionStore';
library.add(fas);
function classNames(...classes) {
    return classes.filter(Boolean).join(' ');
}
export const PHXMainWrapV3 = ({ children, hiddenLeftMenu = false, logoHeight = '28px', multipleMenu = false, params, pathName, router, getDataCookies, }) => {
    var _a, _b, _c, _d, _e;
    const { pid } = params ? params : {};
    const [modal, setModal] = useState(false);
    const [openSubMenu, setOpenSubMenu] = useState(true);
    const [campaignName, setCampaignName] = useState('');
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const [subNavigation, setSubNavigation] = useState([]);
    const [navigation, setNavigation] = useState([]);
    const [modalSignOut, setModalSignOut] = useState(false);
    const [showBanner, setShowBanner] = useState(true);
    const [isLoading, setIsLoading] = useState(true);
    const sessionCookie = useRef(PHXFuncGetCookieSession());
    const userSessionInfo = (_a = sessionCookie.current) === null || _a === void 0 ? void 0 : _a.user_info;
    const schoolInfoId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.school_id;
    const userId = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.id;
    const { setLoading: setGlobalLoading } = useLoading();
    const [dataInitMain, setDataInitMain] = useState({
        menuDefault: [],
        loadingMenu: true,
        loadingSchool: true,
        listSchool: [],
        logo: {
            path: '',
            height: logoHeight,
        },
        menu: [],
        schoolId: null,
        configLayout: undefined,
        perCode: [],
        roleCode: [],
        isLoadingPermission: true,
        sourceAvatar: ((_b = userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.user_avatar) === null || _b === void 0 ? void 0 : _b.size_small) || (userSessionInfo === null || userSessionInfo === void 0 ? void 0 : userSessionInfo.avatar) || DEFAULT_AVATAR,
    });
    const locationPathname = typeof window !== 'undefined' ? window.location.pathname : '';
    const locationArr = locationPathname.split('/').filter(Boolean);
    const basePath = locationArr.slice(0, locationArr.length - pathName.split('/').filter(Boolean).length).join('/');
    const pathNameWithBasePath = `${basePath ? `${'/' + basePath}` : ''}${pathName}`;
    function enablePer(code, arr) {
        if (!code)
            return true;
        return arr === null || arr === void 0 ? void 0 : arr.some((item) => item === code);
    }
    // Lấy code phân quyền trong menu từ path hiện tại
    function getCodesByPath(dataMenu, currentPath) {
        let lastMatchingCode = null;
        const normalizedPath = currentPath.replace(/\/$/, '');
        function traverse(items, prefix) {
            for (const item of items) {
                const fullPath = item.path.startsWith('/') ? prefix + item.path : item.path;
                const normalizedFullPath = fullPath.replace(/\/$/, '');
                if (normalizedPath === normalizedFullPath || normalizedPath.startsWith(normalizedFullPath + '/')) {
                    lastMatchingCode = item.code;
                }
                if (item.child) {
                    traverse(item.child, prefix);
                }
            }
        }
        for (const rootItem of dataMenu) {
            const rootPath = rootItem.path;
            const prefix = rootPath.split('/').slice(0, 2).join('/');
            traverse([rootItem], prefix);
        }
        return lastMatchingCode ? lastMatchingCode : null;
    }
    // code phân quyền path hiện tại
    const currentCode = getCodesByPath(dataInitMain.menuDefault, locationPathname);
    const requireLoginValidation = () => {
        clearSession();
        const currentURL = window.location.href;
        const url = currentURL.split('/');
        const loginPush = `${url[0]}//${url[2]}/login-sso`;
        window.location.replace(loginPush);
    };
    const checkIsQuitJob = ({ profileStaff, profileTeacher }) => {
        try {
            // xóa cookies với những tài khoản giáo viên, nhân viên đã nghỉ việc
            const staffIsQuitJob = profileStaff === null || profileStaff === void 0 ? void 0 : profileStaff.is_quit_job;
            const teacherIsQuitJob = profileTeacher === null || profileTeacher === void 0 ? void 0 : profileTeacher.is_quit_job;
            if (staffIsQuitJob || teacherIsQuitJob) {
                console.log('Phiên đăng nhập đã hết hạn');
                Object.keys(Cookies.get()).forEach((cookieName) => {
                    Cookies.remove(cookieName);
                });
                requireLoginValidation();
            }
        }
        catch (error) {
            console.log(error);
        }
    };
    const fetchDataPer = async () => {
        var _a, _b, _c, _d;
        try {
            const res = await PHXClientQueryV3({
                query: GET_PERMISSION_DETAIL_USER_V3,
                variables: { id: userId, school_id: schoolInfoId },
            });
            const userPermissions = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.permission_user) !== null && _b !== void 0 ? _b : [];
            const rolePermissions = (_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.permission_role) !== null && _d !== void 0 ? _d : [];
            const allPermissions = [...userPermissions, ...rolePermissions];
            // Tách quyền theo loại: quyền route (không phải action) và quyền action
            const permissionCodes = allPermissions.map((p) => p.permission);
            const routePermissions = permissionCodes.filter((p) => !p.is_action).map((p) => p.code);
            const actionPermissions = permissionCodes.filter((p) => p.is_action).map((p) => p.code);
            // Tạo object dạng { ACTION_CODE: true }
            const actionPermissionMap = Object.fromEntries(actionPermissions.map((code) => [code, true]));
            // Xoá trùng và set route permissions
            const uniqueRoutePermissions = Array.from(new Set(routePermissions));
            return { uniqueRoutePermissions, actionPermissionMap };
        }
        catch (error) {
            console.error('Error fetching school data:', error);
            return { uniqueRoutePermissions: null, actionPermissionMap: null };
        }
    };
    const getProfileByUser = async () => {
        try {
            const response = await PHXClientQueryV3({
                query: QUERY_GET_PROFILE_USER,
                variables: {
                    user_id: userId,
                },
            });
            const profileUser = response.data.users_by_pk;
            const { avatar, email, full_name, profile_staff, profile_teacher, user_avatar, user_roles } = profileUser;
            // check user is quit job
            checkIsQuitJob({
                profileStaff: profile_staff,
                profileTeacher: profile_teacher,
            });
            // renew list role in cookie
            return {
                avatar,
                user_avatar,
                full_name,
                email,
                user_code: (profile_staff === null || profile_staff === void 0 ? void 0 : profile_staff.user_code) || (profile_teacher === null || profile_teacher === void 0 ? void 0 : profile_teacher.user_code) || '',
                user_roles,
            };
        }
        catch (error) {
            console.log(error);
            return;
        }
    };
    const fetchDataSchool = async () => {
        var _a, _b, _c, _d;
        if (!userSessionInfo)
            return;
        const { id, school: { school_name: { group_id }, school_name_id, }, school_id, } = userSessionInfo;
        setIsLoading(true);
        let settingSiteDb = undefined;
        try {
            const res = await PHXClientQueryV3({
                query: GET_SCHOOL_V3,
                variables: { group_id, school_name_id, user_id: id },
                isDelay: false,
            });
            const dataSchool = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.school_name[0]) === null || _b === void 0 ? void 0 : _b.schools;
            const settingFetchData = (_d = (_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.setting_site[0]) === null || _d === void 0 ? void 0 : _d.value_setting;
            if (settingFetchData) {
                const cleanedJsonString = settingFetchData.replace(/^"(.*)"$/, '$1');
                settingSiteDb = JSON.parse(cleanedJsonString);
            }
            setIsLoading(false);
            return {
                settingSiteDb,
                loadingSchool: dataSchool.length === 0,
                listSchool: dataSchool,
                schoolId: school_id,
            };
        }
        catch (error) {
            setIsLoading(false);
            console.error('Error fetching school data:', error);
            return;
        }
    };
    const fetchDataMenu = async () => {
        const envPublic = await PHXGetEnvPublicV3();
        const menuUrl = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_MENU_V2;
        const logoMenuTop = envPublic === null || envPublic === void 0 ? void 0 : envPublic.SCHOOL_TOP_MENU_LOGO;
        if (!menuUrl || !logoMenuTop) {
            console.error('menu or logo not found');
        }
        const data = await fetch(menuUrl);
        const menuJson = await data.json();
        return {
            loadingMenu: false,
            logo: { path: logoMenuTop, height: logoHeight },
            menu: menuJson,
        };
    };
    const detectEnvByDomain = (domain, configEnv) => {
        for (const [env, pattern] of Object.entries(configEnv)) {
            if (env.startsWith('_comment'))
                continue; // bỏ qua comment
            const regex = new RegExp(pattern.replace(/\\\\/g, '\\'));
            if (regex.test(domain))
                return env;
        }
        return 'stg';
    };
    const getEnvByConfig = (configEnv) => {
        const domain = window.location.hostname;
        const env = detectEnvByDomain(domain, configEnv);
        return `config_menu_${env}:disable`;
    };
    const isConfigEnvValid = (code, configDisable) => configDisable.length === 0 || !(configDisable === null || configDisable === void 0 ? void 0 : configDisable.includes(code));
    const funcMenuByConfigEnv = (menuJson, configDisable) => {
        const menuWithConfigEnv = [];
        for (const item of menuJson) {
            if (!isConfigEnvValid(item === null || item === void 0 ? void 0 : item.code, configDisable))
                continue;
            const menuItem = { ...item, child: [] };
            const menuSecondLevel = (item === null || item === void 0 ? void 0 : item.child) || [];
            for (const childItem of menuSecondLevel || []) {
                if (!isConfigEnvValid(childItem === null || childItem === void 0 ? void 0 : childItem.code, configDisable))
                    continue;
                const childMenuItem = { ...childItem, child: [] };
                const menuThirdLevel = (childItem === null || childItem === void 0 ? void 0 : childItem.child) || [];
                for (const subChildItem of menuThirdLevel) {
                    if (!isConfigEnvValid(subChildItem === null || subChildItem === void 0 ? void 0 : subChildItem.code, configDisable))
                        continue;
                    childMenuItem.child.push(subChildItem);
                }
                menuItem.child.push(childMenuItem);
            }
            menuWithConfigEnv.push(menuItem);
        }
        return menuWithConfigEnv;
    };
    const fetchInitData = async () => {
        var _a;
        const { loadingMenu, logo, menu } = await fetchDataMenu();
        const profileNew = await getProfileByUser();
        const dataPer = await fetchDataPer();
        const dataSchool = await fetchDataSchool();
        const { actionPermissionMap, uniqueRoutePermissions } = dataPer;
        const { config_env } = menu;
        const enviromentByDomainConfig = getEnvByConfig(config_env);
        const menuJson = menu.menu;
        const configDisable = menu[enviromentByDomainConfig];
        setDataInitMain({
            menuDefault: menuJson,
            logo,
            menu: funcMenuByConfigEnv(menuJson, configDisable),
            loadingMenu,
            schoolId: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.schoolId) || null,
            loadingSchool: !!(dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.loadingSchool),
            listSchool: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.listSchool) || [],
            isLoadingPermission: false,
            perCode: uniqueRoutePermissions,
            roleCode: (profileNew === null || profileNew === void 0 ? void 0 : profileNew.user_roles.map((userRole) => { var _a; return (_a = userRole === null || userRole === void 0 ? void 0 : userRole.role) === null || _a === void 0 ? void 0 : _a.role_code; })) || [],
            configLayout: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.settingSiteDb) || undefined,
            sourceAvatar: ((_a = profileNew === null || profileNew === void 0 ? void 0 : profileNew.user_avatar) === null || _a === void 0 ? void 0 : _a.size_small) || (profileNew === null || profileNew === void 0 ? void 0 : profileNew.avatar) || DEFAULT_AVATAR,
        });
        const currentSession = PHXFuncGetCookieSession();
        saveCookiesClient({
            value: {
                ...currentSession,
                ...(actionPermissionMap && {
                    action_permission: actionPermissionMap || [],
                }),
                setting_site: (dataSchool === null || dataSchool === void 0 ? void 0 : dataSchool.settingSiteDb) || {},
                ...(profileNew && {
                    user_info: {
                        ...userSessionInfo,
                        ...profileNew,
                    },
                }),
            },
        });
    };
    useEffect(() => {
        if (!userSessionInfo) {
            // Require login if production mode
            requireLoginValidation();
            return;
        }
        fetchInitData();
    }, []);
    const isEqualUrl = (parentHref, pathNameCompare) => {
        if (!parentHref || !pathNameCompare) {
            return false;
        }
        const pathNameSplit = pathNameCompare.split('/');
        const hrefSplit = parentHref.split('/');
        if (!pathNameSplit || !hrefSplit) {
            return false;
        }
        let urlRouter;
        let currentMenu;
        if (multipleMenu) {
            urlRouter = pathNameSplit[1] + pathNameSplit[2];
            currentMenu = hrefSplit[1] + hrefSplit[2];
        }
        else {
            urlRouter = pathNameSplit[1];
            currentMenu = hrefSplit[1];
        }
        return urlRouter === currentMenu;
    };
    const isBelongParentWithMicroservice = (parentSplit, pathNameSplit) => {
        if (parentSplit.length > 2) {
            const compareLength = parentSplit.length;
            for (let i = 1; i < compareLength; i++) {
                if (parentSplit[i] !== pathNameSplit[i])
                    return false;
            }
            return true;
        }
        else {
            return parentSplit[1] === pathNameSplit[3];
        }
    };
    const isBelongParent = (parentUrl, pathNameCompare, isMicroservice) => {
        const parentSplit = parentUrl.split('/');
        const pathNameSplit = pathNameCompare.split('/');
        if (isMicroservice) {
            return isBelongParentWithMicroservice(parentSplit, pathNameSplit);
        }
        if (parentSplit.length > 2 && !parentSplit.includes('list')) {
            return parentSplit[1] === pathNameSplit[2] && parentSplit[2] === pathNameSplit[3];
        }
        else {
            return parentSplit[1] === pathNameSplit[2];
        }
    };
    const checkAdmissions = (path) => {
        const pathNameSplit = path.split('/');
        return pathNameSplit[1] === 'admissions';
    };
    const loadParentNavigation = (path) => {
        const mainNavigation = dataInitMain.menu;
        const naviSize = mainNavigation.length;
        for (let i = 0; i < naviSize; i++) {
            const item = mainNavigation[i];
            item.current = false;
            if (item.path === path || isEqualUrl(item.path, path)) {
                item.current = true;
                // Find sub modules
                const itemLength = item.child.length;
                const listChildren = [];
                for (let j = 0; j < itemLength; j++) {
                    const childItem = item.child[j];
                    // Active child item
                    childItem.current = isBelongParent(childItem.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice));
                    if (childItem.child) {
                        const childItemLength = childItem.child.length;
                        let count = 0;
                        for (let k = 0; k < childItemLength; k++) {
                            const subChild = childItem.child[k];
                            subChild.current = isBelongParent(subChild.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice));
                            if (isBelongParent(subChild.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice)) ||
                                isBelongParent(childItem.path, path, !!(childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice))) {
                                count++;
                            }
                            const isSameSubChildPath = (subChild === null || subChild === void 0 ? void 0 : subChild.isMicroservice)
                                ? subChild.path === (childItem === null || childItem === void 0 ? void 0 : childItem.path)
                                : subChild.path === (childItem === null || childItem === void 0 ? void 0 : childItem.pathInternal);
                            const isPathInternal = (childItem === null || childItem === void 0 ? void 0 : childItem.isMicroservice) ? isSameSubChildPath : subChild.path === childItem.path;
                            count > 0 ? (childItem.showChild = true) : (childItem.showChild = false);
                            isPathInternal ? (childItem.current = false) : null;
                        }
                    }
                    listChildren.push(childItem);
                }
                setSubNavigation(listChildren);
            }
        }
        setNavigation(mainNavigation);
    };
    const loadChildrenCampaign = (path) => {
        const mainNavigation = dataInitMain.menu;
        const naviSize = mainNavigation.length;
        for (let i = 0; i < naviSize; i++) {
            const item = mainNavigation[i];
            item.current = false;
            if (item.path === path || isEqualUrl(item.path, path)) {
                item.current = true;
                // Find sub modules
                // const itemLength = item.child.length;
                const campaign = item.child.filter((child) => child.path === '/campaign/list');
                const listCampaign = campaign[0];
                const itemLength = listCampaign === null || listCampaign === void 0 ? void 0 : listCampaign.childrenByParentDetail.length;
                const listChildren = [];
                for (let j = 0; j < itemLength; j++) {
                    const childItem = listCampaign === null || listCampaign === void 0 ? void 0 : listCampaign.childrenByParentDetail[j];
                    // Active child item
                    childItem.current = isBelongParent(childItem.path, path, false);
                    if (childItem.child) {
                        const childItemLength = childItem.child.length;
                        for (let k = 0; k < childItemLength; k++) {
                            const subChild = childItem.child[k];
                            subChild.current = isBelongParent(subChild.path, path, false);
                            if (isBelongParent(subChild.path, path, false) || isBelongParent(childItem.path, path, false)) {
                                childItem.showChild = true;
                            }
                            subChild.path === childItem.path ? (childItem.current = false) : null;
                        }
                    }
                    listChildren.push(childItem);
                }
                setSubNavigation(listChildren);
            }
        }
        setNavigation(mainNavigation);
    };
    const checkChildrenCampaign = (path) => {
        var _a;
        const campaignMenu = (_a = dataInitMain.menu) === null || _a === void 0 ? void 0 : _a.find((item) => item.path === '/admissions/campaign/list');
        const campaignChild = campaignMenu === null || campaignMenu === void 0 ? void 0 : campaignMenu.child;
        const listChild = campaignChild === null || campaignChild === void 0 ? void 0 : campaignChild.find((item) => item.path === '/campaign/list');
        const isChild = listChild === null || listChild === void 0 ? void 0 : listChild.childrenByParentDetail.find((item) => isBelongParent(item.path, path, false));
        return isChild !== undefined;
    };
    useEffect(() => {
        const isAdmissions = checkAdmissions(pathNameWithBasePath);
        if (isAdmissions && checkChildrenCampaign(pathNameWithBasePath)) {
            if (pathNameWithBasePath.includes('/admissions/overview/list/') && pid) {
                PHXClientQueryV3({
                    query: getCampaignNameV3,
                    variables: { id: pid },
                    isDelay: false,
                }).then((res) => {
                    const data = res.data.admissions_campaigns_by_pk;
                    setCampaignName(data.campaign_name);
                    Cookies.set('campaign_name', JSON.stringify(data.campaign_name));
                });
                loadChildrenCampaign(pathNameWithBasePath);
            }
            else if (pathNameWithBasePath === '/admissions/campaign/list') {
                loadParentNavigation(pathNameWithBasePath);
            }
            else {
                loadChildrenCampaign(pathNameWithBasePath);
            }
        }
        else {
            loadParentNavigation(pathNameWithBasePath);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [dataInitMain, pid, pathNameWithBasePath]);
    useEffect(() => {
        const isAdmissions = checkAdmissions(pathNameWithBasePath);
        if (isAdmissions) {
            if (pathNameWithBasePath === '/admissions/campaign/list' || !checkChildrenCampaign(pathNameWithBasePath)) {
                setOpenSubMenu(true);
            }
            else {
                setOpenSubMenu(true);
                const campaign_name = Cookies.get('campaign_name');
                setCampaignName(campaign_name ? JSON.parse(campaign_name) : campaignName);
                loadChildrenCampaign(pathNameWithBasePath);
            }
        }
        else {
            setOpenSubMenu(true);
        }
    }, [pathNameWithBasePath, dataInitMain]);
    const loadSubNavigation = (path, isChild, childPath) => {
        const subLength = subNavigation.length;
        const newSub = [];
        for (let i = 0; i < subLength; i++) {
            const item = subNavigation[i];
            item.current = item.path === path && !isChild;
            if (item.child) {
                item.showChild = item.path === path;
                for (let j = 0; j < item.child.length; j++) {
                    const child = item.child[j];
                    child.current = child.path === childPath;
                    if (child.path === item.path) {
                        item.current = false;
                        child.current = childPath ? child.path === childPath : child.path === path;
                    }
                }
            }
            newSub.push(item);
        }
        setSubNavigation(newSub);
    };
    // const triggerClicked = (path: string) => {
    //   loadParentNavigation(path)
    // }
    // const handleClicked = (path: string) => {
    //   triggerClicked(path)
    // }
    const subNavigationTriggerClicked = (item, parent) => {
        parent ? loadSubNavigation(parent.path, true, item.path) : loadSubNavigation(item.path, false);
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const campaign = Number(urlParams.get('campaignId'));
        setGlobalLoading(true);
        // handle for admissions
        if (campaign) {
            router.push(`${item.path}?campaignId=${campaign}`);
        }
        else {
            router.push(item.path);
        }
    };
    const { path: topMenuLogoFromEnv } = dataInitMain.logo;
    const handleModalSignOut = () => setModalSignOut(true);
    const handleRedirectRouter = (path) => {
        const currentURL = window.location.href;
        const url = currentURL.split('/');
        const pushPath = `${url[0]}//${url[2]}/${path}`;
        window.location.replace(pushPath);
    };
    const callApiLogoutToken = async () => {
        try {
            return await axios.post(`/api/authenticate/logout`, {}, {
                withCredentials: true,
            });
        }
        catch (error) {
            console.error(error);
            return;
        }
    };
    const handleSignOut = async () => {
        setModalSignOut(false);
        Object.keys(Cookies.get()).forEach((cookieName) => {
            Cookies.remove(cookieName);
        });
        await callApiLogoutToken();
        console.log('Đăng xuất tài khoản');
        handleRedirectRouter('login-sso');
    };
    const handleProfilePage = () => {
        handleRedirectRouter('profile');
    };
    const handleBackMenu = () => {
        router.push('/campaign/list');
        loadParentNavigation('/admissions/campaign/list');
    };
    const checkChildBefore = (item, currentItem) => {
        const currentIndexActive = item.find((s) => s.current);
        return currentIndexActive ? currentIndexActive.id > currentItem.id : false;
    };
    const [openNavName, setOpenNavName] = useState(false);
    const [showSearchBar, setShowSearchBar] = useState(false);
    const [selected, setSelected] = useState(null);
    const handleOpenModal = (id) => {
        setModal(id !== dataInitMain.schoolId);
        setSelected(id);
    };
    const handlePrimaryModal = () => {
        const currentSession = PHXFuncGetCookieSession();
        const userInfo = currentSession === null || currentSession === void 0 ? void 0 : currentSession.user_info;
        if (userInfo) {
            try {
                const newSchoolId = selected;
                const schoolIdCurrent = userInfo.school_id;
                if (newSchoolId && newSchoolId !== schoolIdCurrent) {
                    const userInfoNew = { ...userInfo, school_id: newSchoolId };
                    saveCookiesClient({
                        value: { ...currentSession, user_info: userInfoNew },
                    });
                    window.location.reload();
                }
            }
            catch (error) {
                console.error(error);
            }
        }
        setModal(false);
    };
    // settings page
    const isSettings = () => {
        const pathNameSplit = pathNameWithBasePath.split('/');
        return pathNameSplit[1] === 'setting';
    };
    const checkLogoHeader = ((_c = dataInitMain.configLayout) === null || _c === void 0 ? void 0 : _c.logo_dashboard) || topMenuLogoFromEnv || DEFAULT_LOGO_DASHBOARD;
    const isActivityHistory = () => {
        const pathNameSplit = pathNameWithBasePath.split('/');
        return pathNameSplit[1] === PATH_ACTIVITY_HISTORY;
    };
    const [activityHistoryChild, setActivityHistoryChild] = useState(MENU_ACTIVITY_HISTORY_CHILD);
    const handleClickActivityHistoryChild = (clickedItem) => {
        const updated = activityHistoryChild.map((item) => ({
            ...item,
            current: item.code === clickedItem.code,
        }));
        setActivityHistoryChild(updated);
    };
    useEffect(() => {
        if (basePath === PATH_ACTIVITY_HISTORY) {
            setActivityHistoryChild((prev) => prev.map((item) => ({
                ...item,
                current: pathNameWithBasePath.endsWith(item.path),
            })));
        }
        else {
            setActivityHistoryChild([]);
        }
    }, [pathNameWithBasePath, basePath]);
    return (React.createElement(React.Fragment, null,
        React.createElement(PageTracker, null),
        React.createElement("div", { className: 'flex min-h-full flex-col' },
            React.createElement(StyledCustomLayoutProps, { configLayout: dataInitMain === null || dataInitMain === void 0 ? void 0 : dataInitMain.configLayout, settingSiteCookie: getDataCookies ? (_d = decryptCookie(getDataCookies)) === null || _d === void 0 ? void 0 : _d.setting_site : null }),
            React.createElement("header", { className: 'header-color-styled fixed top-0 z-50 min-w-full border-gray-200 bg-white' },
                React.createElement("div", { className: 'header-styled mx-auto flex h-14 items-center justify-between bg-[#1a1a1a] pr-4' },
                    React.createElement("div", { className: 'flex items-center gap-x-3' },
                        React.createElement("a", { className: 'flex w-full items-center', href: '/' }, topMenuLogoFromEnv ? (React.createElement(React.Fragment, null, isLoading ? (React.createElement("div", { className: 'header-loading-logo ml-3 h-8 w-full animate-pulse' })) : (React.createElement("img", { alt: 'Logo', className: 'max-w-48 ml-3 h-auto max-h-7 w-auto', src: checkLogoHeader, style: { maxWidth: '12rem' } })))) : (React.createElement(React.Fragment, null))),
                        React.createElement("div", { className: 'flex items-center lg:hidden' },
                            React.createElement("button", { className: 'bg-grey-100 mr-3 inline-flex items-center justify-center rounded-md p-1 text-gray-200 hover:bg-white hover:text-gray-600', onClick: () => setSidebarOpen(true), type: 'button' },
                                React.createElement("span", { className: 'sr-only' }, "Open sidebar"),
                                React.createElement(Bars3Icon, { "aria-hidden": 'true', className: 'h-6 w-6' })))),
                    React.createElement(SearchDetail, { onClose: () => setShowSearchBar(false), open: showSearchBar }),
                    React.createElement("div", { className: 'flex items-center gap-x-8' },
                        React.createElement("div", { className: '-m-1.5 p-1.5' },
                            React.createElement(Menu, { as: 'div', className: 'relative ml-3' },
                                React.createElement("div", null,
                                    React.createElement(Menu.Button, { className: 'flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800' },
                                        React.createElement("span", { className: 'sr-only' }, "Open user menu"),
                                        isLoading ? (React.createElement("div", { className: 'flex animate-pulse' },
                                            React.createElement("div", { className: 'header-loading-avatar h-8 w-8 rounded-full' }))) : (React.createElement("img", { alt: '', className: 'h-8 w-8 rounded-full', src: dataInitMain.sourceAvatar })))),
                                React.createElement(Transition, { as: Fragment, enter: 'transition ease-out duration-100', enterFrom: 'transform opacity-0 scale-95', enterTo: 'transform opacity-100 scale-100', leave: 'transition ease-in duration-75', leaveFrom: 'transform opacity-100 scale-100', leaveTo: 'transform opacity-0 scale-95' },
                                    React.createElement(Menu.Items, { className: ' absolute right-0 z-10 mt-2 w-[340px] origin-top-right rounded-md bg-white px-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none' },
                                        React.createElement(Menu.Item, null,
                                            React.createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4 text-sm font-semibold text-gray-900 ' }, "Ch\u1ECDn tr\u01B0\u1EDDng")),
                                        !dataInitMain.loadingSchool ? (React.createElement(React.Fragment, null, dataInitMain.listSchool
                                            .filter((val) => {
                                            if (!enablePer(switchSchool, dataInitMain.perCode)) {
                                                return val.id === dataInitMain.schoolId;
                                            }
                                            else {
                                                return true;
                                            }
                                        })
                                            .map((item) => (React.createElement(Menu.Item, { key: item.id },
                                            React.createElement("div", { "aria-hidden": true, className: `${item.id === dataInitMain.schoolId &&
                                                    dataInitMain.listSchool.length > 1 &&
                                                    !enablePer(switchSchool, dataInitMain.perCode) === false
                                                    ? 'rounded-lg bg-zinc-200 font-semibold text-gray-900 '
                                                    : 'font-normal   '} 
                                  ${item.id !== dataInitMain.schoolId &&
                                                    (dataInitMain.listSchool.length === 1 ||
                                                        !enablePer(switchSchool, dataInitMain.perCode)) === false
                                                    ? 'cursor-pointer hover:rounded-lg hover:bg-gray-100'
                                                    : ''}
                              relative mb-1  flex items-center justify-between px-2  py-1.5 text-sm text-gray-900`, onClick: () => handleOpenModal(item.id) },
                                                React.createElement("p", { className: 'max-w-[95%] truncate' }, item.name),
                                                item.id === dataInitMain.schoolId &&
                                                    dataInitMain.listSchool.length > 1 &&
                                                    !enablePer(switchSchool, dataInitMain.perCode) === false && (React.createElement(CheckIcon, { "aria-hidden": 'true', className: 'h-4 w-4' })))))))) : (React.createElement(PHXSkeleton, { className: 'flex-1 px-2 py-2', type: 'single' })),
                                        React.createElement("div", { className: 'border-b pt-1.5' }),
                                        React.createElement(Menu.Item, null,
                                            React.createElement("div", { "aria-hidden": true, className: 'px-2 pb-2 pt-4  text-sm font-semibold text-gray-900' }, "T\u00F9y ch\u1ECDn")),
                                        React.createElement(Menu.Item, null,
                                            React.createElement("div", { "aria-hidden": true, className: 'cursor-pointer px-2 py-1.5 text-sm text-gray-900 hover:rounded-lg hover:bg-gray-100', onClick: handleProfilePage }, "Th\u00F4ng tin c\u00E1 nh\u00E2n")),
                                        React.createElement(Menu.Item, null,
                                            React.createElement("div", { "aria-hidden": true, className: 'mb-2.5 cursor-pointer px-2 py-1.5 text-sm text-[#8e1f0c] hover:rounded-lg hover:bg-gray-100', onClick: handleModalSignOut }, "\u0110\u0103ng xu\u1EA5t")))))))))),
        React.createElement("div", null,
            React.createElement(PHXModal, { dangerActionText: '\u0110\u0103ng xu\u1EA5t', onDangerClick: handleSignOut, onHide: () => setModalSignOut(false), primaryActionText: '', show: modalSignOut, title: '\u0110\u0103ng xu\u1EA5t' },
                React.createElement("div", { className: 'text-sm text-gray-700' }, "Khi th\u1EF1c hi\u1EC7n thao t\u00E1c n\u00E0y b\u1EA1n s\u1EBD tho\u00E1t kh\u1ECFi trang qu\u1EA3n tr\u1ECB v\u00E0 tr\u1EDF v\u1EC1 trang \u0111\u0103ng nh\u1EADp"))),
        React.createElement(PHXModal, { onHide: () => setModal(false), onPrimaryClick: handlePrimaryModal, primaryActionText: 'X\u00E1c nh\u1EADn', show: modal, title: 'X\u00E1c nh\u1EADn thay \u0111\u1ED5i tr\u01B0\u1EDDng' },
            React.createElement(PHXBanner, { description: 'Khi thay \u0111\u1ED5i tr\u01B0\u1EDDng t\u1EA5t c\u1EA3 d\u1EEF li\u1EC7u s\u1EBD hi\u1EC3n th\u1ECB theo tr\u01B0\u1EDDng v\u1EEBa \u0111\u01B0\u1EE3c ch\u1ECDn', onClose: () => setShowBanner(false), show: showBanner, title: 'L\u01B0u \u00FD', type: 'warning' })),
        React.createElement("div", { className: 'relative flex min-h-screen bg-gray-100' },
            React.createElement(NavMobile, { menu: dataInitMain.menu, path: pathNameWithBasePath, permission: dataInitMain.perCode, router: router, setSidebarOpen: setSidebarOpen, hiddenSideBar: () => setSidebarOpen(false), sidebarOpen: sidebarOpen, pathNameWithBasePath: pathNameWithBasePath }),
            React.createElement("div", { className: 'hidden lg:flex lg:flex-shrink-0' },
                React.createElement("div", { className: 'flex' },
                    React.createElement("div", { className: 'mt-14 flex lg:inset-y-0' },
                        React.createElement("div", { "aria-hidden": true, className: `${openNavName ? 'w-64' : 'w-14'} menu-styled z-10 flex h-full flex-col justify-between border-r !bg-gray-200 transition-all duration-300 lg:fixed`, onMouseOut: () => setOpenNavName(false), onMouseOver: () => setOpenNavName(true) },
                            React.createElement("div", { className: classNames('flex flex-1 flex-col', openNavName ? 'overflow-y-auto' : 'overflow-y-hidden') },
                                React.createElement("div", { className: 'relative flex-1' },
                                    React.createElement("div", { "aria-label": 'Sidebar', className: 'hidden overflow-x-hidden md:block md:flex-shrink-0 md:overflow-y-auto' }, !hiddenLeftMenu && (React.createElement("div", { className: `space-y- flex ${openNavName ? 'w-64' : 'w-12'} flex-col overflow-hidden p-3` }, navigation.map((item, index) => (React.createElement("div", { key: index, className: 'w-full' }, enablePer(item.code, dataInitMain.perCode) && (React.createElement("a", { className: `${classNames(item.current && !openNavName
                                            ? 'menu-bg-color-icon-active-styled font-semibold' // màu background của icon đang active của menu
                                            : 'menu-icon-color-styled', // màu icon của menu
                                        !openNavName
                                            ? 'mb-1.5 inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
                                            : 'mb-1.5 inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg', openNavName && item.current
                                            ? 'menu-bg-color-icon-active-styled rounded-lg'
                                            : 'menu-hover-bg hover:rounded-lg hover:bg-opacity-50')}`, href: item.path, 
                                        // onClick={() => handleClicked(item.path)}
                                        onMouseOver: () => setOpenNavName(true) },
                                        React.createElement("span", { className: 'sr-only' }, item.name),
                                        React.createElement("span", { className: classNames(!openNavName
                                                ? 'group cursor-pointer hover:z-10 focus-visible:outline-none'
                                                : `flex gap-x-2 ${item.menuIconSL ? 'pl-[3px] pt-[2px]' : 'pl-[0.45rem]'}`) },
                                            item.menuIconSL ? (React.createElement("img", { alt: 'icon', className: 'w-[1.6rem]', src: item.menuIconSL })) : (
                                            // <FontAwesomeIcon
                                            //   className="mt-1 h-[1.125rem] w-[1.125rem]"
                                            //   icon={item.image}
                                            // />
                                            React.createElement(Image, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem] text-gray-950', openNavName && 'mt-[0.2rem]'), height: 0, src: item.current ? Icons[`${item.code}_SOLID`] : Icons[item.code], width: 0 })),
                                            openNavName && (React.createElement("div", { className: 'h-6' },
                                                React.createElement("p", { className: `mt-0.5 h-full text-[0.86rem] text-[#353A44] transition-all duration-300 ${openNavName ? 'opacity-100' : 'opacity-0'}` }, item.name)))))))))))))),
                            React.createElement("div", { className: classNames('border-t', navigation.length > 0 && ((_e = navigation[0]) === null || _e === void 0 ? void 0 : _e.isSchoolink) ? 'border-[#1c222b]' : 'border-indigo-100') },
                                React.createElement("div", { className: 'flex overflow-hidden px-3 pb-1.5 pt-3' },
                                    React.createElement("a", { className: classNames('z-0', !openNavName
                                            ? 'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
                                            : 'inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg hover:rounded-lg hover:bg-opacity-50', isActivityHistory() && !openNavName
                                            ? 'setting-bg-icon-active' // màu background của icon đang active trong menu
                                            : 'setting-icon-color font-medium', // màu icon
                                        openNavName && isActivityHistory()
                                            ? 'setting-bg-icon-active rounded-lg' // màu background của icon đang active trong menu
                                            : 'setting-hover-bg hover:rounded-lg hover:bg-opacity-50'), href: '/activity-history/list', onMouseOver: () => setOpenNavName(true) },
                                        React.createElement("span", { className: 'sr-only' }, "L\u1ECBch s\u1EED ho\u1EA1t \u0111\u1ED9ng"),
                                        React.createElement("span", { className: classNames(!openNavName
                                                ? 'cursor-pointer hover:z-10 focus-visible:outline-none'
                                                : 'flex gap-x-2 pl-[0.45rem]') },
                                            React.createElement(Image, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem]', openNavName ? 'mt-[0.2rem]' : ''), height: 0, src: isActivityHistory() ? Icons.ACTIVITY_HISTORY_SOLID : Icons.ACTIVITY_HISTORY, width: 0 }),
                                            openNavName && (React.createElement("div", { className: 'h-6' },
                                                React.createElement("p", { className: `setting-text-color mt-0.5 h-full text-[0.86rem] font-normal text-[#353A44] transition-all duration-300 hover:cursor-pointer ${openNavName ? 'opacity-100' : 'opacity-0'}` }, "L\u1ECBch s\u1EED ho\u1EA1t \u0111\u1ED9ng")))))),
                                React.createElement("div", { className: 'mb-14 flex overflow-hidden px-3 pb-3' },
                                    React.createElement("a", { className: classNames('z-0', !openNavName
                                            ? 'inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg'
                                            : 'inline-flex h-8 min-w-full flex-shrink-0 items-center rounded-lg hover:rounded-lg hover:bg-opacity-50', isSettings() && !openNavName
                                            ? 'setting-bg-icon-active' // màu background của icon đang active trong menu
                                            : 'setting-icon-color font-medium', // màu icon
                                        openNavName && isSettings()
                                            ? 'setting-bg-icon-active rounded-lg' // màu background của icon đang active trong menu
                                            : 'setting-hover-bg hover:rounded-lg hover:bg-opacity-50'), href: '/setting', 
                                        // onClick={() => handleClicked(item.path)}
                                        onMouseOver: () => setOpenNavName(true) },
                                        React.createElement("span", { className: 'sr-only' }, "setting"),
                                        React.createElement("span", { className: classNames(!openNavName
                                                ? 'cursor-pointer hover:z-10 focus-visible:outline-none'
                                                : 'flex gap-x-2 pl-[0.45rem]') },
                                            React.createElement(Image, { alt: 'icon', className: classNames('h-[1.125rem] w-[1.125rem]', openNavName ? 'mt-[0.2rem]' : ''), height: 0, src: isSettings() ? Icons.SETTING_SOLID : Icons.SETTING, width: 0 }),
                                            openNavName && (React.createElement("div", { className: 'h-6' },
                                                React.createElement("p", { className: `setting-text-color mt-0.5 h-full text-[0.86rem] font-normal text-[#353A44] transition-all duration-300 hover:cursor-pointer ${openNavName ? 'opacity-100' : 'opacity-0'}` }, "C\u00E0i \u0111\u1EB7t")))))))),
                        !hiddenLeftMenu && (React.createElement(Transition, { as: Fragment, enter: 'transition ease-in-out duration-300 transform', enterFrom: '-translate-x-full', enterTo: 'translate-x-0', leave: 'transition ease-in-out duration-300 transform', leaveFrom: 'translate-x-0', leaveTo: '-translate-x-full', show: openSubMenu },
                            React.createElement("aside", { className: 'z-9 fixed ml-[3.438rem] hidden h-full bg-gray-200/20 lg:block lg:flex-shrink-0' },
                                React.createElement("div", { className: 'relative flex h-full w-64 flex-col overflow-y-auto bg-gray-200/20' },
                                    checkAdmissions(pathNameWithBasePath) &&
                                        checkChildrenCampaign(pathNameWithBasePath) &&
                                        pathNameWithBasePath !== '/admissions/campaign/list' && (React.createElement("div", { className: 'mx-1 flex items-center p-2 pb-0' },
                                        React.createElement("button", { className: 'mr-1 inline-flex items-center rounded-lg border-gray-300 bg-transparent px-2 py-1 text-xs font-medium text-gray-700 hover:bg-gray-200 active:bg-gray-300 active:pb-[0.2rem] active:pt-[0.3rem] active:shadow-[0rem_0.125rem_0.1rem_0rem_#0004_inset]', onClick: () => handleBackMenu(), type: 'button' },
                                            React.createElement(ArrowLeftIcon, { className: 'h-5 w-5' })),
                                        React.createElement("p", { className: 'text-sm font-medium text-slate-600' }, campaignName))),
                                    React.createElement("div", { className: 'flex-1 overflow-y-auto pt-3' },
                                        subNavigation.map((item, subNavIndex) => {
                                            var _a;
                                            return (React.createElement("div", { key: subNavIndex }, ((_a = dataInitMain.roleCode) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (React.createElement(React.Fragment, null, enablePer(item.code, dataInitMain.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 }, !dataInitMain.loadingMenu ? (React.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                    React.createElement("div", { className: 'flex items-center gap-x-3' },
                                                        React.createElement("p", { className: classNames('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))) : (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) }, !dataInitMain.loadingMenu ? (React.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                    React.createElement("div", { className: 'flex items-center gap-x-3' },
                                                        React.createElement("p", { className: classNames('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))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
                                                item.showChild && item.child && (React.createElement(React.Fragment, null, item.child.map((children, childIndex) => (React.createElement("div", { key: childIndex, className: classNames('relative') },
                                                    React.createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
                                                            ? styles.childMenuActiveBefore
                                                            : checkChildBefore(item.child, children)
                                                                ? styles.childMenuBefBefore
                                                                : {} }),
                                                    (children === null || children === void 0 ? void 0 : children.isMicroservice) ? (React.createElement("a", { "aria-hidden": true, className: classNames('mx-3 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (children === null || children === void 0 ? void 0 : children.current)
                                                            ? 'rounded-lg bg-white text-[#353A44]' // màu chữ menu con khi active
                                                            : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-[#353A44]'), href: children.path, onClick: enablePer(children.code, dataInitMain.perCode)
                                                            ? undefined
                                                            : (e) => e.preventDefault() },
                                                        React.createElement("div", { className: 'flex items-center gap-x-3' },
                                                            React.createElement("div", { className: 'w-3' }),
                                                            React.createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', !enablePer(children.code, dataInitMain.perCode)
                                                                    ? 'font-normal text-gray-300'
                                                                    : (children === null || children === void 0 ? void 0 : children.current)
                                                                        ? ''
                                                                        : 'font-normal text-[#353A44]') }, children.name)))) : (React.createElement("div", { "aria-hidden": true, className: classNames('mx-3 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (children === null || children === void 0 ? void 0 : children.current)
                                                            ? 'rounded-lg bg-white text-[#353A44]' // màu chữ menu con khi active
                                                            : 'hover:rounded-lg hover:bg-white hover:bg-opacity-50 hover:text-[#353A44]'), onClick: enablePer(children.code, dataInitMain.perCode)
                                                            ? () => subNavigationTriggerClicked(children, item)
                                                            : undefined },
                                                        React.createElement("div", { className: 'flex items-center gap-x-3' },
                                                            React.createElement("div", { className: 'w-3' }),
                                                            React.createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', !enablePer(children.code, dataInitMain.perCode)
                                                                    ? 'font-normal text-gray-300'
                                                                    : (children === null || children === void 0 ? void 0 : children.current)
                                                                        ? ''
                                                                        : 'font-normal text-[#353A44]') }, children.name)))),
                                                    React.createElement("div", { style: (children === null || children === void 0 ? void 0 : children.current)
                                                            ? styles.childMenuActiveAfter
                                                            : checkChildBefore(item.child, children)
                                                                ? styles.childMenuBefAfter
                                                                : {} })))))))) : (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
                                                'mx-3 flex cursor-pointer border-slate-200 p-2') }, !dataInitMain.loadingMenu ? (React.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                React.createElement("div", { className: 'flex items-center gap-x-3 text-gray-700' },
                                                    React.createElement("p", { className: classNames('font-normal leading-5 text-gray-300') }, 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 }, !dataInitMain.loadingMenu ? (React.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                    React.createElement("div", { className: 'flex items-center gap-x-3' },
                                                        React.createElement("p", { className: classNames('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))) : (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) }, !dataInitMain.loadingMenu ? (React.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                    React.createElement("div", { className: 'flex items-center gap-x-3' },
                                                        React.createElement("p", { className: classNames('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))) : (React.createElement(PHXSkeleton, { className: 'mr-3 flex-1', type: 'single' })))),
                                                item.showChild && item.child && (React.createElement(React.Fragment, null, item.child.map((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-1 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (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 items-center gap-x-3' },
                                                        React.createElement("div", { className: 'w-3' }),
                                                        React.createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'font-normal text-gray-600') }, children.name)))) : (React.createElement("div", { "aria-hidden": true, className: classNames('mx-1 flex cursor-pointer border-slate-200 p-2 text-[0.84rem]', (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 items-center gap-x-3' },
                                                        React.createElement("div", { className: 'w-3' }),
                                                        React.createElement("p", { className: classNames('my-[0.05rem] ml-3 leading-5', (children === null || children === void 0 ? void 0 : children.current) ? 'font-semibold' : 'font-normal text-gray-600') }, children.name)))))))))))));
                                        }),
                                        activityHistoryChild.map((item, subNavIndex) => (React.createElement("div", { key: subNavIndex },
                                            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) && !dataInitMain.loadingMenu
                                                    ? '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: () => {
                                                    handleClickActivityHistoryChild(item);
                                                    subNavigationTriggerClicked(item);
                                                } }, !dataInitMain.loadingMenu ? (React.createElement("div", { className: 'ml-1 flex items-center text-[0.84rem]' },
                                                React.createElement("div", { className: 'flex items-center gap-x-3' },
                                                    React.createElement("p", { className: classNames('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))) : (''))))))))))))),
            React.createElement("div", { className: 'flex min-w-0 flex-1 flex-col overflow-hidden' },
                React.createElement("main", { className: 'flex flex-1 overflow-hidden' },
                    React.createElement("section", { "aria-labelledby": 'primary-heading', className: 'flex h-full min-w-0 flex-1 flex-col lg:order-last' },
                        React.createElement("div", { className: 'sticky top-0 z-10 flex h-14 flex-shrink-0 border-b border-l bg-bgcl-50 px-4 sm:px-6 lg:px-4' }),
                        React.createElement("div", { className: `${openSubMenu ? 'lg:ml-[20.063rem]' : 'lg:ml-[5.063rem]'} bg-gray-100 px-6` },
                            React.createElement("div", { className: 'py-4' }, dataInitMain.isLoadingPermission ? ('') : enablePer(currentCode, dataInitMain.perCode) ? (children) : (React.createElement(PHXCard, null,
                                React.createElement("div", { className: 'mb-10 mt-10 sm:mb-20 sm:mt-20 lg:mb-32 lg:mt-32' },
                                    React.createElement("div", { className: 'flex items-center justify-center' },
                                        React.createElement(LockClosedIcon, { className: 'text-gray-400', height: 70, width: 70 })),
                                    React.createElement("div", { className: 'mt-5 flex select-none items-center justify-center text-base font-bold text-gray-800' }, "B\u1EA1n kh\u00F4ng c\u00F3 quy\u1EC1n truy c\u1EADp"))))))))))));
};
//# sourceMappingURL=MainWrapV3.js.map