import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { clsx, ChevronUpIcon, ChevronDownIcon, XIcon, PanelContent, Badge, PanelHeader, PanelHeaderActions, PanelHeaderActionItem, SparkleIcon, } from '@finos/legend-art';
import { ConsolePanel } from './ConsolePanel.js';
import { PANEL_MODE } from '../../../stores/editor/EditorConfig.js';
import { isNonNullable } from '@finos/legend-shared';
import { DevToolPanel } from './DevToolPanel.js';
import { useEditorStore } from '../EditorStoreProvider.js';
import { ProblemsPanel } from './ProblemsPanel.js';
import { SQLPlaygroundPanel } from './SQLPlaygroundPanel.js';
import { GraphEditFormModeState } from '../../../stores/editor/GraphEditFormModeState.js';
export const PanelGroupItemExperimentalBadge = () => (_jsx("div", { className: "panel-group__header__tab__experimental-badge", title: "This is an experimental feature", children: _jsx(SparkleIcon, {}) }));
export const PanelGroup = observer(() => {
    const editorStore = useEditorStore();
    const changeMode = (mode) => () => editorStore.setActivePanelMode(mode);
    const closePanel = () => editorStore.panelGroupDisplayState.toggle();
    const toggleExpandPanelGroup = () => editorStore.panelGroupDisplayState.toggleMaximize();
    const tabs = {
        [PANEL_MODE.CONSOLE]: {
            mode: PANEL_MODE.CONSOLE,
            name: 'CONSOLE',
            icon: undefined,
            isVisible: true,
            experimental: true,
        },
        [PANEL_MODE.DEV_TOOL]: {
            mode: PANEL_MODE.DEV_TOOL,
            name: 'DEVELOPER TOOLS',
            icon: undefined,
            isVisible: true,
        },
        [PANEL_MODE.PROBLEMS]: {
            mode: PANEL_MODE.PROBLEMS,
            name: 'PROBLEMS',
            icon: undefined,
            isVisible: true,
            counter: editorStore.graphState.problems.length,
        },
        [PANEL_MODE.SQL_PLAYGROUND]: {
            mode: PANEL_MODE.SQL_PLAYGROUND,
            name: 'SQL PLAYGROUND',
            icon: undefined,
            isVisible: editorStore.graphEditorMode instanceof GraphEditFormModeState,
            experimental: true,
        },
    };
    const tabsToShow = Object.values(PANEL_MODE).filter((tab) => isNonNullable(tabs[tab]) && tabs[tab].isVisible);
    const isTabVisible = (tabType) => editorStore.activePanelMode === tabType && tabsToShow.includes(tabType);
    useEffect(() => {
        if (!tabsToShow.includes(editorStore.activePanelMode)) {
            editorStore.setActivePanelMode(PANEL_MODE.CONSOLE);
        }
    }, [editorStore, tabsToShow, editorStore.activePanelMode]);
    return (_jsxs("div", { className: "panel panel-group", children: [_jsxs(PanelHeader, { children: [_jsx("div", { className: "panel-group__header__tabs", children: tabsToShow
                            .map((tab) => tabs[tab])
                            .filter(isNonNullable)
                            .map((tab) => (_jsxs("button", { tabIndex: -1, className: clsx('panel-group__header__tab', {
                                'panel-group__header__tab--active': editorStore.activePanelMode === tab.mode,
                            }), onClick: changeMode(tab.mode), children: [tab.icon && (_jsx("div", { className: "panel-group__header__tab__icon", children: tab.icon })), _jsxs("div", { className: "panel-group__header__tab__title", children: [tab.name, tab.counter !== undefined && (_jsx(Badge, { title: tab.counter.toString(), className: "panel-group__header__tab__title__problem__count" }))] }), tab.experimental && _jsx(PanelGroupItemExperimentalBadge, {})] }, tab.mode))) }), _jsxs(PanelHeaderActions, { children: [_jsx(PanelHeaderActionItem, { className: "panel-group__header__action", onClick: toggleExpandPanelGroup, title: "Toggle expand/collapse", children: editorStore.panelGroupDisplayState.isMaximized ? (_jsx(ChevronDownIcon, {})) : (_jsx(ChevronUpIcon, {})) }), _jsx(PanelHeaderActionItem, { className: "panel-group__header__action", onClick: closePanel, title: "Close", children: _jsx(XIcon, {}) })] })] }), _jsxs(PanelContent, { children: [isTabVisible(PANEL_MODE.PROBLEMS) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(ProblemsPanel, {}) })), isTabVisible(PANEL_MODE.CONSOLE) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(ConsolePanel, {}) })), isTabVisible(PANEL_MODE.DEV_TOOL) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(DevToolPanel, {}) })), isTabVisible(PANEL_MODE.SQL_PLAYGROUND) && (_jsx("div", { className: "panel-group__content__tab", children: _jsx(SQLPlaygroundPanel, {}) }))] })] }));
});
//# sourceMappingURL=PanelGroup.js.map