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, Fragment } from 'react';
import { observer } from 'mobx-react-lite';
import { EditorGroup } from '../editor/editor-group/EditorGroup.js';
import { GrammarTextEditor } from '../editor/editor-group/GrammarTextEditor.js';
import { LEGEND_STUDIO_TEST_ID } from '../../__lib__/LegendStudioTesting.js';
import { ACTIVITY_MODE, GRAPH_EDITOR_MODE, } from '../../stores/editor/EditorConfig.js';
import { clsx, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, getCollapsiblePanelGroupProps, RepoIcon, CodeBranchIcon, HackerIcon, WrenchIcon, FileTrayIcon, AssistantIcon, useResizeDetector, FireIcon, TrashIcon, HammerIcon, TerminalIcon, ResizablePanelSplitterLine, GitlabIcon, } from '@finos/legend-art';
import { assertErrorThrown, isNonNullable } from '@finos/legend-shared';
import { useProjectViewerStore, withProjectViewerStore, } from './ProjectViewerStoreProvider.js';
import { generateSetupRoute, generateViewProjectRoute, } from '../../__lib__/LegendStudioNavigation.js';
import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
import { flowResult } from 'mobx';
import { useEditorStore, withEditorStore, } from '../editor/EditorStoreProvider.js';
import { useApplicationStore, useCommands } from '@finos/legend-application';
import { useParams } from '@finos/legend-application/browser';
import { Explorer } from '../editor/side-bar/Explorer.js';
import { ProjectOverview } from '../editor/side-bar/ProjectOverview.js';
import { WorkflowManager } from '../editor/side-bar/WorkflowManager.js';
import { useLegendStudioApplicationStore, useLegendStudioBaseStore, } from '../LegendStudioFrameworkProvider.js';
import { EmbeddedQueryBuilder } from '../editor/EmbeddedQueryBuilder.js';
import { ActivityBarMenu } from '../editor/ActivityBar.js';
import { PanelGroup } from '../editor/panel-group/PanelGroup.js';
import { StoreProjectData } from '@finos/legend-server-depot';
import { generateGAVCoordinates } from '@finos/legend-storage';
import { Project } from '@finos/legend-server-sdlc';
const ProjectViewerStatusBar = observer(() => {
    const params = useParams();
    const viewerStore = useProjectViewerStore();
    const editorStore = useEditorStore();
    const applicationStore = useLegendStudioApplicationStore();
    const latestVersion = viewerStore.onLatestVersion;
    const currentRevision = viewerStore.onCurrentRevision;
    const extraSDLCInfo = params.revisionId ?? params.versionId ?? 'HEAD';
    const projectId = params.projectId;
    const currentProject = editorStore.sdlcState.currentProject;
    const gav = viewerStore.projectGAVCoordinates;
    const versionBehindProjectHead = viewerStore.currentRevision &&
        viewerStore.version &&
        params.versionId &&
        viewerStore.currentRevision.id !== viewerStore.version.revisionId;
    const description = `${latestVersion
        ? versionBehindProjectHead
            ? 'latest behind project'
            : 'latest'
        : currentRevision
            ? 'current'
            : ''}`;
    const editable = editorStore.graphManagerState.graphBuildState.hasCompleted &&
        editorStore.isInitialized;
    const handleTextModeClick = applicationStore.guardUnhandledError(() => flowResult(editorStore.toggleTextMode()));
    const compile = applicationStore.guardUnhandledError(() => flowResult(editorStore.graphEditorMode.globalCompile()));
    const generate = applicationStore.guardUnhandledError(() => flowResult(editorStore.graphState.graphGenerationState.globalGenerate()));
    const emptyGenerationEntities = applicationStore.guardUnhandledError(() => flowResult(editorStore.graphState.graphGenerationState.clearGenerations()));
    const toggleAssistant = () => applicationStore.assistantService.toggleAssistant();
    const togglePanel = () => editorStore.panelGroupDisplayState.toggle();
    const visitProject = async () => {
        try {
            if (gav) {
                const project = StoreProjectData.serialization.fromJson(await editorStore.depotServerClient.getProject(gav.groupId, gav.artifactId));
                const sdlcProjectUrl = generateViewProjectRoute(project.projectId);
                applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(sdlcProjectUrl));
            }
        }
        catch (error) {
            assertErrorThrown(error);
            editorStore.applicationStore.notificationService.notifyError(`Can't open project.`);
        }
    };
    const visitWebProjectUrl = async () => {
        try {
            if (gav) {
                const project = StoreProjectData.serialization.fromJson(await editorStore.depotServerClient.getProject(gav.groupId, gav.artifactId));
                const sdlcProject = Project.serialization.fromJson(await editorStore.sdlcServerClient.getProject(project.projectId));
                applicationStore.navigationService.navigator.visitAddress(sdlcProject.webUrl);
            }
        }
        catch (error) {
            assertErrorThrown(error);
            editorStore.applicationStore.notificationService.notifyError(`Can't open project.`);
        }
    };
    return (_jsxs("div", { "data-testid": LEGEND_STUDIO_TEST_ID.STATUS_BAR, className: "editor__status-bar project-view__status-bar", children: [_jsxs("div", { className: "editor__status-bar__left", children: [currentProject && (_jsxs("div", { className: "editor__status-bar__workspace", children: [_jsx("div", { className: "editor__status-bar__workspace__icon", children: _jsx(CodeBranchIcon, {}) }), _jsx("div", { className: "editor__status-bar__workspace__project", children: _jsx("button", { className: "editor__status-bar__workspace__project", title: "Go back to workspace setup using the specified project", tabIndex: -1, onClick: () => applicationStore.navigationService.navigator.visitAddress(applicationStore.navigationService.navigator.generateAddress(generateSetupRoute(projectId, undefined))), children: currentProject.name }) }), "/", _jsx("div", { className: "editor__status-bar__workspace__workspace", children: extraSDLCInfo }), description && (_jsxs("div", { className: "editor__status-bar__workspace__workspace", children: ["(", description, ")"] }))] })), !currentProject && gav && (_jsxs("div", { className: "editor__status-bar__workspace", children: [_jsx("div", { className: "editor__status-bar__workspace__icon", children: _jsx(CodeBranchIcon, {}) }), _jsx("div", { className: "editor__status-bar__workspace__project", children: _jsx("button", { className: "editor__status-bar__workspace__project", title: "Go to Studio SDLC View of Project", tabIndex: -1, onClick: () => flowResult(visitProject()), children: `${generateGAVCoordinates(gav.groupId, gav.artifactId, undefined)}` }) }), "/", _jsx("div", {}), _jsx("div", { onClick: () => flowResult(visitWebProjectUrl()), className: "editor__status-bar__workspace__workspace", children: gav.versionId }), _jsx("button", { onClick: () => flowResult(visitWebProjectUrl()), className: "editor__status-bar__workspace__icon", children: _jsx(GitlabIcon, {}) })] }))] }), _jsxs("div", { className: "editor__status-bar__right", children: [_jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__generate-btn', {
                            'editor__status-bar__generate-btn--wiggling': editorStore.graphState.graphGenerationState
                                .isRunningGlobalGenerate,
                        }), disabled: editorStore.graphState.isApplicationUpdateOperationIsRunning, onClick: generate, tabIndex: -1, title: "Generate (F10)", children: _jsx(FireIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__clear__generation-btn', {
                            'editor__status-bar__action editor__status-bar__clear__generation-btn--wiggling': editorStore.graphState.graphGenerationState
                                .clearingGenerationEntitiesState.isInProgress,
                        }), disabled: editorStore.graphState.isApplicationUpdateOperationIsRunning ||
                            !editable, onClick: emptyGenerationEntities, tabIndex: -1, title: "Clear generation entities", children: _jsx(TrashIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__compile-btn', {
                            'editor__status-bar__compile-btn--wiggling': editorStore.graphState.isRunningGlobalCompile,
                        }), disabled: editorStore.graphState.isApplicationUpdateOperationIsRunning ||
                            !editable, onClick: compile, tabIndex: -1, title: "Compile (F9)", children: _jsx(HammerIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
                            'editor__status-bar__action__toggler--active': editorStore.panelGroupDisplayState.isOpen,
                        }), onClick: togglePanel, tabIndex: -1, title: "Toggle panel (Ctrl + `)", children: _jsx(TerminalIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
                            'editor__status-bar__action__toggler--active': editorStore.graphEditorMode.mode ===
                                GRAPH_EDITOR_MODE.GRAMMAR_TEXT,
                        }), onClick: handleTextModeClick, tabIndex: -1, title: "Toggle text mode (F8)", children: _jsx(HackerIcon, {}) }), _jsx("button", { className: clsx('editor__status-bar__action editor__status-bar__action__toggler', {
                            'editor__status-bar__action__toggler--active': !applicationStore.assistantService.isHidden,
                        }), onClick: toggleAssistant, tabIndex: -1, title: "Toggle assistant", children: _jsx(AssistantIcon, {}) })] })] }));
});
const ProjectViewerSideBar = observer(() => {
    const viewerStore = useProjectViewerStore();
    const editorStore = useEditorStore();
    const renderSideBar = () => {
        switch (editorStore.activeActivity) {
            case ACTIVITY_MODE.EXPLORER:
                return _jsx(Explorer, {});
            case ACTIVITY_MODE.PROJECT_OVERVIEW:
                return _jsx(ProjectOverview, {});
            case ACTIVITY_MODE.WORKFLOW_MANAGER:
                return viewerStore.workflowManagerState ? (_jsx(WorkflowManager, { workflowManagerState: viewerStore.workflowManagerState })) : null;
            default:
                return null;
        }
    };
    return (_jsx("div", { className: "side-bar", children: _jsx("div", { className: "side-bar__view", children: renderSideBar() }) }));
});
const ProjectViewerActivityBar = observer(() => {
    const viewerStore = useProjectViewerStore();
    const baseStore = useLegendStudioBaseStore();
    const editorStore = useEditorStore();
    const changeActivity = (activity) => () => editorStore.setActiveActivity(activity);
    // tabs
    const activities = [
        {
            mode: ACTIVITY_MODE.EXPLORER,
            title: 'Explorer (Ctrl + Shift + X)',
            icon: _jsx(FileTrayIcon, {}),
        },
        baseStore.isSDLCAuthorized !== undefined && {
            mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
            title: 'Project',
            icon: (_jsx("div", { className: "activity-bar__project-overview-icon", children: _jsx(RepoIcon, {}) })),
        },
        viewerStore.workflowManagerState && {
            mode: ACTIVITY_MODE.WORKFLOW_MANAGER,
            title: 'WORKFLOW MANAGER',
            icon: _jsx(WrenchIcon, {}),
        },
    ].filter((activity) => Boolean(activity));
    return (_jsxs("div", { className: "activity-bar", children: [_jsx(ActivityBarMenu, {}), _jsx("div", { className: "activity-bar__items", children: activities.map((activity) => (_jsx("button", { className: clsx('activity-bar__item', {
                        'activity-bar__item--active': editorStore.sideBarDisplayState.isOpen &&
                            editorStore.activeActivity === activity.mode,
                    }), onClick: changeActivity(activity.mode), tabIndex: -1, title: activity.title, children: activity.icon }, activity.mode))) })] }));
});
export const ProjectViewer = withEditorStore(withProjectViewerStore(observer(() => {
    const params = useParams();
    const viewerStore = useProjectViewerStore();
    const editorStore = useEditorStore();
    const applicationStore = useApplicationStore();
    // Extensions
    const extraEditorExtensionComponents = editorStore.pluginManager
        .getApplicationPlugins()
        .flatMap((plugin) => plugin.getExtraEditorExtensionComponentRendererConfigurations?.() ??
        [])
        .filter(isNonNullable)
        .map((config) => (_jsx(Fragment, { children: config.renderer(editorStore) }, config.key)));
    // layout
    const resizeSideBar = (handleProps) => editorStore.sideBarDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
        .width);
    const sideBarCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(editorStore.sideBarDisplayState.size === 0, {
        onStopResize: resizeSideBar,
        size: editorStore.sideBarDisplayState.size,
    });
    const resizePanel = (handleProps) => editorStore.panelGroupDisplayState.setSize(handleProps.domElement.getBoundingClientRect()
        .height);
    const maximizedCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(editorStore.panelGroupDisplayState.isMaximized);
    const collapsiblePanelGroupProps = getCollapsiblePanelGroupProps(editorStore.panelGroupDisplayState.size === 0, {
        onStopResize: resizePanel,
        size: editorStore.panelGroupDisplayState.size,
    });
    const { ref, width, height } = useResizeDetector();
    useEffect(() => {
        if (ref.current) {
            editorStore.panelGroupDisplayState.setMaxSize(ref.current.offsetHeight);
        }
    }, [ref, editorStore, width, height]);
    // initialize
    useEffect(() => {
        viewerStore.internalizeEntityPath(params);
    }, [viewerStore, params]);
    // NOTE: since we internalize the entity path in the route, we should not re-initialize the graph
    // on the second call when we remove entity path from the route
    useEffect(() => {
        flowResult(viewerStore.initialize(params)).catch(applicationStore.alertUnhandledError);
    }, [applicationStore, viewerStore, params]);
    useCommands(editorStore);
    return (_jsx("div", { className: "app__page", children: _jsxs("div", { className: "editor viewer", children: [_jsxs("div", { className: "editor__body", children: [_jsx(ProjectViewerActivityBar, {}), _jsx("div", { ref: ref, className: "editor__content-container", children: _jsx("div", { className: "editor__content", children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { ...sideBarCollapsiblePanelGroupProps.collapsiblePanel, direction: 1, children: _jsx(ProjectViewerSideBar, {}) }), _jsx(ResizablePanelSplitter, {}), _jsx(ResizablePanel, { ...sideBarCollapsiblePanelGroupProps.remainingPanel, minSize: 300, children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsxs(ResizablePanel, { ...maximizedCollapsiblePanelGroupProps.collapsiblePanel, ...(editorStore.panelGroupDisplayState.size === 0
                                                            ? collapsiblePanelGroupProps.remainingPanel
                                                            : {}), children: [editorStore.graphEditorMode.mode ===
                                                                GRAPH_EDITOR_MODE.FORM && _jsx(EditorGroup, {}), editorStore.graphEditorMode.mode ===
                                                                GRAPH_EDITOR_MODE.GRAMMAR_TEXT && (_jsx(GrammarTextEditor, {}))] }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: editorStore.panelGroupDisplayState.isMaximized
                                                                ? 'transparent'
                                                                : 'var(--color-dark-grey-250)' }) }), _jsx(ResizablePanel, { ...collapsiblePanelGroupProps.collapsiblePanel, ...(editorStore.panelGroupDisplayState.isMaximized
                                                            ? maximizedCollapsiblePanelGroupProps.remainingPanel
                                                            : {}), direction: -1, children: _jsx(PanelGroup, {}) })] }) })] }) }) })] }), editorStore.graphManagerState.graphBuildState.hasSucceeded && (_jsx(ProjectSearchCommand, {})), _jsx(ProjectViewerStatusBar, {}), _jsx(EmbeddedQueryBuilder, {}), extraEditorExtensionComponents] }) }));
})));
//# sourceMappingURL=ProjectViewer.js.map