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 { observer } from 'mobx-react-lite';
import { CheckSquareIcon, clsx, PanelLoadingIndicator, PlayIcon, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, SquareIcon, } from '@finos/legend-art';
import { prettyDuration } from '@finos/legend-shared';
import { useApplicationStore } from '@finos/legend-application';
import { PlaygroundSQLCodeEditor, } from './SQLPlaygroundEditor.js';
import { PlayGroundSQLExecutionResultGrid, TEMPORARY_PlaygroundTDSResultGrid, } from './SQLPlaygroundGrid.js';
import { SQLPlaygroundExplorer } from './SQLPlaygroundExplorer.js';
import { CsvSqlExecutionResult, QueryExecutionResult, } from '../../stores/sql-playground/AbstractSQLPlaygroundState.js';
import { TDSExecutionResult } from '@finos/legend-graph';
export const SQLPlaygroundEditorResultPanel = observer((props) => {
    const { playgroundState, advancedMode, disableDragDrop = false, enableDarkMode = false, accessorExplorerState, showAccessorExplorer = false, } = props;
    const applicationStore = useApplicationStore();
    const isGlobalDarkMode = !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled;
    const effectiveDarkMode = enableDarkMode || isGlobalDarkMode;
    const executeRawSQL = () => {
        playgroundState.executeRawSQL();
    };
    const resultDescription = playgroundState.sqlExecutionResult instanceof CsvSqlExecutionResult
        ? `query ran in ${prettyDuration(playgroundState.sqlExecutionResult.sqlDuration, {
            ms: true,
        })}`
        : undefined;
    const toggleLocalMode = () => {
        playgroundState.toggleIsLocalModeEnabled();
    };
    return (_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [showAccessorExplorer && accessorExplorerState && (_jsxs(ResizablePanel, { size: 280, minSize: 240, maxSize: 600, children: [_jsx(PanelLoadingIndicator, { isLoading: accessorExplorerState.isGeneratingAccessor }), accessorExplorerState.treeData && (_jsx(SQLPlaygroundExplorer, { accessorExplorerState: accessorExplorerState }))] })), _jsx(ResizablePanelSplitter, {}), _jsx(ResizablePanel, { children: _jsx("div", { className: "panel sql-playground__sql-editor", children: _jsxs(ResizablePanelGroup, { orientation: "horizontal", children: [_jsx(ResizablePanel, { children: _jsx(PlaygroundSQLCodeEditor, { playgroundState: playgroundState, advancedMode: advancedMode, disableDragDrop: disableDragDrop, enableDarkMode: effectiveDarkMode }) }), _jsx(ResizablePanelSplitter, {}), _jsxs(ResizablePanel, { size: 300, children: [_jsxs("div", { className: clsx('panel__header', {
                                            'panel__header--dark': effectiveDarkMode,
                                        }), children: [_jsxs("div", { className: "panel__header__title", children: [_jsx("div", { className: "panel__header__title__label", children: "result" }), playgroundState.executeRawSQLState.isInProgress && (_jsx("div", { className: "panel__header__title__label__status", children: "Running SQL..." })), _jsx("div", { className: "query-builder__result__analytics", children: !playgroundState.executeRawSQLState.isInProgress &&
                                                            (resultDescription ?? '') })] }), _jsx("div", { className: clsx({ 'light-mode': !effectiveDarkMode }), children: _jsxs("div", { className: "panel__header__actions query-builder__result__header__actions", children: [advancedMode && (_jsxs("div", { className: "query-builder__result__advanced__mode", children: [_jsx("div", { className: "query-builder__result__advanced__mode__label", children: "Local Mode" }), _jsx("button", { "aria-label": "local mode", className: clsx('query-builder__result__advanced__mode__toggler__btn', {
                                                                        'query-builder__result__advanced__mode__toggler__btn--toggled': playgroundState.isLocalModeEnabled,
                                                                    }), onClick: toggleLocalMode, tabIndex: -1, children: playgroundState.isLocalModeEnabled ? (_jsx(CheckSquareIcon, {})) : (_jsx(SquareIcon, {})) })] })), _jsx("div", { className: "query-builder__result__execute-btn btn__dropdown-combo btn__dropdown-combo--primary", children: _jsxs("button", { className: "btn__dropdown-combo__label", onClick: executeRawSQL, disabled: playgroundState.executeRawSQLState.isInProgress, tabIndex: -1, children: [_jsx(PlayIcon, { className: "btn__dropdown-combo__label__icon" }), _jsx("div", { className: "btn__dropdown-combo__label__title", children: "Run Query" })] }) })] }) })] }), playgroundState.sqlExecutionResult instanceof
                                        CsvSqlExecutionResult && (_jsx(PlayGroundSQLExecutionResultGrid, { result: playgroundState.sqlExecutionResult.value, useAdvancedGrid: advancedMode, useLocalMode: playgroundState.isLocalModeEnabled, enableDarkMode: effectiveDarkMode })), playgroundState.sqlExecutionResult instanceof
                                        QueryExecutionResult &&
                                        playgroundState.sqlExecutionResult.result instanceof
                                            TDSExecutionResult && (_jsx(TEMPORARY_PlaygroundTDSResultGrid, { result: playgroundState.sqlExecutionResult.result, useAdvancedGrid: advancedMode, useLocalMode: playgroundState.isLocalModeEnabled, enableDarkMode: effectiveDarkMode }))] })] }) }) })] }));
});
//# sourceMappingURL=SQLPlaygroundPanel.js.map