import * as React from 'react';
import clsx from 'clsx';
import * as GeneralConstants from '../../../../Utilities/Constants/GeneralConstants';
import TopBar from './TopBar';
import join from '../../../../components/utils/join';
import { Navigation } from './Navigation';
import PopupContext from './PopupContext';
import { AdaptablePopupBody } from './AdaptablePopupBody';
import { useAdaptable } from '../../../AdaptableContext';
import { CustomSettingsPanelView } from './CustomSettingsPanelView';
import { useMenuItems } from './useMenuItems';
import { resolveContainerElement } from '../../../../Utilities/resolveContainerElement';
import { AdaptablePopupDialog } from './AdaptablePopupDialog';
import { Box } from '../../../../components/Flex';
export const AdaptablePopup = (props) => {
    const adaptable = useAdaptable();
    const settingsPanelOptions = adaptable.adaptableOptions.settingsPanelOptions;
    const settingsPanelTitle = adaptable.ModuleService.getModuleFriendlyName('SettingsPanel');
    const menuItems = useMenuItems();
    const isWindowModal = settingsPanelOptions.popupType === 'window';
    const modalContainer = resolveContainerElement(adaptable.adaptableOptions?.containerOptions?.modalContainer, props.api.internalApi.buildBaseContext());
    let friendlyName = null;
    /**
     * This means that it is not rendered in the context of Settings Panel
     * - no topbar
     * - no navigation
     */
    let isStandalone = false;
    let moduleViewContent = null;
    let activeItem = null;
    let accessLevel = 'Full';
    const firstMenuItem = menuItems.find((menuItem) => menuItem !== '-');
    const firstMenuModule = firstMenuItem?.category;
    let componentModule = props.componentModule;
    let componentName = props.componentName;
    // ts forces to check for General, there is no menu item General
    const useFirstItem = !props.componentName;
    if (useFirstItem &&
        firstMenuModule !== 'General' &&
        firstMenuModule !== 'CustomSettingsPanel' &&
        firstMenuModule !== 'Group') {
        componentModule = firstMenuModule;
    }
    const customSettingsPanel = settingsPanelOptions?.customSettingsPanels?.find((customPanel) => useFirstItem ? customPanel.name === firstMenuItem.label : customPanel.name === componentName);
    if (customSettingsPanel) {
        friendlyName = customSettingsPanel.name;
        activeItem = customSettingsPanel.name;
        moduleViewContent = React.createElement(CustomSettingsPanelView, { settingsPanel: customSettingsPanel });
    }
    else {
        const module = props.api.internalApi.getModuleService().getModuleById(componentModule);
        const moduleInfo = module?.moduleInfo;
        accessLevel = props.api.entitlementApi.getEntitlementAccessLevelForModule(componentModule);
        friendlyName = moduleInfo.FriendlyName;
        isStandalone =
            moduleInfo &&
                (GeneralConstants.STANDALONE_MODULE_POPUPS.includes(moduleInfo?.ModuleName) ||
                    (props.componentName && props.componentName !== moduleInfo?.Popup));
        activeItem = moduleInfo.ModuleName;
        moduleViewContent = (React.createElement(AdaptablePopupBody, { api: props.api, module: module, componentName: props.componentName, moduleParams: props.moduleParams, onClearParams: props.onClearParams, onHide: props.onHide }));
    }
    const baseClassName = 'ab-Adaptable-Popup';
    const className = join(baseClassName, `${baseClassName}--${isWindowModal ? 'window' : 'modal'}`, isStandalone ? `${baseClassName}--action-popup` : `${baseClassName}--settings-popup`);
    return (React.createElement(PopupContext.Provider, { value: {
            hidePopup: () => {
                if (props.onHide) {
                    props.onHide();
                }
            },
        } },
        React.createElement(AdaptablePopupDialog, { dataName: componentModule, baseClassName: baseClassName, className: className, friendlyName: friendlyName, isActionModule: isStandalone, isWindowModal: isWindowModal, onHide: props.onHide, modalContainer: modalContainer },
            !isStandalone && React.createElement(TopBar, { icon: settingsPanelOptions.icon }, settingsPanelTitle),
            React.createElement(Box, { className: clsx('twa:flex twa:flex-row twa:flex-1 twa:min-h-0', 'twa:bg-defaultbackground twa:text-text-on-defaultbackground', accessLevel == 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '') },
                !isStandalone && (React.createElement(Navigation, { menuItems: menuItems, api: props.api, activeItem: activeItem, customSettingsPanels: settingsPanelOptions.customSettingsPanels })),
                React.createElement(Box, { className: clsx('ab-Adaptable-Popup__Body', 'twa:bg-primarylight twa:text-primarylight-foreground', 'twa:flex twa:flex-1 twa:min-w-0 twa:overflow-auto twa:*:p-3') }, moduleViewContent)))));
};
