import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { EXECUTION_PLAN_VIEW_MODE, } from '../../stores/execution-plan/ExecutionPlanState.js';
import { stringifyDataType, } from '@finos/legend-graph';
import { PanelListItem, CopyIcon, PanelDivider, Button, PanelContent, } from '@finos/legend-art';
import { ResultTypeViewer } from './ResultTypeViewer.js';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { tryToFormatSql } from '../result/tds/QueryBuilderTDSResultShared.js';
/**
 * TODO: Create a new `AbstractPlugin` for this, called `ExecutionPlanViewerPlugin`
 * when we modularize relational and execution plan processing, etc.
 *
 * @modularize
 * See https://github.com/finos/legend-studio/issues/65
 */
export const SQLExecutionNodeViewerHelper = observer((props) => {
    const { query, resultColumns, executionPlanState } = props;
    const applicationStore = executionPlanState.applicationStore;
    const copyExpression = (value) => {
        applicationStore.clipboardService
            .copyTextToClipboard(value)
            .then(() => applicationStore.notificationService.notifySuccess('SQL Query copied', undefined, 2500))
            .catch(applicationStore.alertUnhandledError);
    };
    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "query-builder__sql__container", children: [_jsx(PanelDivider, {}), _jsxs("div", { children: [_jsx("div", { className: "query-builder__sql__container__item__label", children: _jsxs(PanelListItem, { children: ["SQL", _jsx("div", { children: _jsx("button", { onClick: () => {
                                                    copyExpression(query);
                                                }, title: "Copy SQL Expression", className: "query-builder__sql__container__icon", children: _jsx(CopyIcon, {}) }) })] }) }), _jsx("div", { className: "query-builder__sql__container__code-editor", children: _jsx(CodeEditor, { inputValue: tryToFormatSql(query
                                        .replaceAll('$', 'changeDollar')
                                        .replaceAll('?', 'changeQuestion')
                                        .replaceAll('{', 'changeOpenCurlyBracket')
                                        .replaceAll('}', 'changeCloseCurlyBracket')
                                        .replaceAll("'", 'changeSingleQuote'))
                                        .replaceAll('changeDollar', '$')
                                        .replaceAll('changeQuestion', '?')
                                        .replaceAll('changeOpenCurlyBracket', '{')
                                        .replaceAll('changeCloseCurlyBracket', '}')
                                        .replaceAll('changeSingleQuote', "'"), language: CODE_EDITOR_LANGUAGE.SQL }) }), _jsx(PanelDivider, {})] }, query)] }), resultColumns.length > 0 && (_jsx("div", { className: "query-builder__sql__container", children: _jsxs("div", { children: [_jsx(PanelListItem, { className: "query-builder__sql__container__item__label", children: "Result Columns" }), _jsx(PanelDivider, {}), _jsxs("table", { className: "query-builder__sql__container__table table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "table__cell--left", children: "Label" }), _jsx("th", { className: "table__cell--left", children: "Data Type" })] }) }), _jsx("tbody", { children: resultColumns.map((column) => (_jsxs("tr", { children: [_jsx("td", { className: "table__cell--left", children: column.label.replaceAll(`"`, '') }), column.dataType && (_jsx("td", { className: "table__cell--left", children: stringifyDataType(column.dataType) }))] }, column.label))) })] })] }) }))] }));
});
export const SQLExecutionNodeViewer = observer((props) => {
    const { query, resultColumns, resultType, executionPlanState, viewJson } = props;
    const applicationStore = executionPlanState.applicationStore;
    if (viewJson === false) {
        return (_jsx(SQLExecutionNodeViewerHelper, { query: query, resultColumns: resultColumns, resultType: resultType, executionPlanState: executionPlanState }));
    }
    return (_jsxs(PanelContent, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, children: [_jsx(SQLExecutionNodeViewerHelper, { query: query, resultColumns: resultColumns, resultType: resultType, executionPlanState: executionPlanState }), _jsx(ResultTypeViewer, { resultType: resultType }), _jsx("div", { className: "query-builder__sql__container", children: _jsx(Button, { className: "btn--dark execution-node-viewer__unsupported-view__to-text-mode__btn", onClick: () => executionPlanState.setViewMode(EXECUTION_PLAN_VIEW_MODE.JSON), text: "View JSON" }) }), _jsx(PanelDivider, {})] }));
});
//# sourceMappingURL=SQLExecutionNodeViewer.js.map