import { LockClosedIcon } from '@heroicons/react/24/outline';
import React, { useState } from 'react';
import { FIXED_ACTION_EVENT, SIDEBAR_TYPE } from '../constant';
import { enablePer } from '../helper';
import { classNames } from '../../types';
import { PHXCard } from '../../Card';
import { useMainwrapV4EventBus } from '../../..';
export default function MainContent({ children, currentCode, isLoadingPermission, perCode, showSubMenu, sideBarType, contentRef, }) {
    const [isShowFixedAction, setIsShowFixAction] = useState(false);
    const mainClass = {
        [SIDEBAR_TYPE.ICON_AND_LABEL_VERTICAL]: {
            open: 'lg:left-[17.85rem]',
            close: 'lg:left-[4.5rem]',
        },
        [SIDEBAR_TYPE.ONLY_ICON]: {
            open: 'lg:left-[17.65rem]',
            close: 'lg:left-[4.25rem]',
        },
        [SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL]: {
            open: 'lg:left-[25.9rem]',
            close: 'lg:left-[12.3rem]',
        },
    };
    const contentClassname = classNames('scrollbar-thin overscroll-contain bg-[#dedede] p-4 lg:h-[calc(100vh-3.45rem)] lg:overflow-y-auto lg:rounded-xl', sideBarType === SIDEBAR_TYPE.ICON_AND_LABEL_HORIZONTAL ? 'lg:bg-[#F3F3F3]' : 'lg:bg-[#F1F1F1]');
    useMainwrapV4EventBus(FIXED_ACTION_EVENT, (payload) => {
        if (isShowFixedAction !== payload.show) {
            setIsShowFixAction(payload.show || false);
        }
    });
    return (React.createElement("main", { className: classNames('transition-all lg:absolute lg:inset-0 lg:right-2', showSubMenu ? mainClass[sideBarType].open : mainClass[sideBarType].close, isShowFixedAction ? 'mt-8 lg:mt-0' : '') }, isLoadingPermission ? (React.createElement("div", { className: contentClassname })) : enablePer(currentCode, perCode) ? (React.createElement("div", { ref: contentRef, className: contentClassname }, children)) : (React.createElement("div", { className: contentClassname },
        React.createElement(PHXCard, null,
            React.createElement("div", { className: 'my-10 flex flex-col  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=main-content.js.map