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 { PanelListItem, PanelDivider, Button, PanelContent, clsx, } from '@finos/legend-art';
import { SQLExecutionNode, } from '@finos/legend-graph';
import { ResultTypeViewer } from './ResultTypeViewer.js';
import { SQLExecutionNodeViewerHelper } from './SQLExecutionNodeViewer.js';
import { useState } from 'react';
import { prettyCONSTName } from '@finos/legend-shared';
import { ImplementationViewer } from './ImplementationViewer.js';
import { TempTableStrategyViewer } from './TempTableStrategyViewer.js';
var RELATIONAL_CLASS_QUERY_TABS;
(function (RELATIONAL_CLASS_QUERY_TABS) {
    RELATIONAL_CLASS_QUERY_TABS["GENERAL"] = "GENERAL";
    RELATIONAL_CLASS_QUERY_TABS["TEMP_TABLE"] = "TEMP_TABLE_STRATEGY";
})(RELATIONAL_CLASS_QUERY_TABS || (RELATIONAL_CLASS_QUERY_TABS = {}));
export const RelationalClassQueryTempTableGraphFetchExecutionNodeViewer = observer((props) => {
    const { node, executionPlanState } = props;
    const applicationStore = executionPlanState.applicationStore;
    const [selectedTab, setSelectedTab] = useState(RELATIONAL_CLASS_QUERY_TABS.GENERAL);
    return (_jsx(PanelContent, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, children: _jsx("div", { className: "query-builder__execution-plan-form--editor", children: _jsxs("div", { className: "panel", children: [_jsx("div", { className: "panel__header query-builder__execution-plan-form--editor__header--with-tabs", children: _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(RELATIONAL_CLASS_QUERY_TABS).map((tab) => (_jsx("div", { onClick: () => setSelectedTab(tab), className: clsx('query-builder__execution-plan-form--editor__tab', {
                                    'query-builder__execution-plan-form--editor__tab--active': tab === selectedTab,
                                }), children: prettyCONSTName(tab) }, tab))) }) }), selectedTab === RELATIONAL_CLASS_QUERY_TABS.GENERAL && (_jsxs("div", { className: "query-builder__store-mapping-global-graph-fetch__container", children: [_jsx(PanelListItem, { className: "query-builder__store-mapping-global-graph-fetch__container__label", children: "Relational Class Query Temp Table Graph Fetch Execution Node Details" }), _jsx(PanelDivider, {}), _jsxs("table", { className: "query-builder__store-mapping-global-graph-fetch__container__table table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "table__cell--left", children: "Property" }), _jsx("th", { className: "table__cell--left", children: "Details" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "table__cell--left", children: " NodeIndex" }), _jsx("td", { className: "table__cell--left", children: node.nodeIndex })] }), node.parentIndex && (_jsxs("tr", { children: [_jsx("td", { className: "table__cell--left", children: "ParentIndex" }), _jsx("td", { className: "table__cell--left", children: node.parentIndex })] })), node.authDependent && (_jsxs("tr", { children: [_jsx("td", { className: "table__cell--left", children: "AuthDependent" }), _jsx("td", { className: "table__cell--left", children: node.authDependent.toString() })] })), node.processedTempTableName && (_jsxs("tr", { children: [_jsx("td", { className: "table__cell--left", children: "processedTempTableName" }), _jsx("td", { className: "table__cell--left", children: node.processedTempTableName })] })), node.tempTableName && (_jsxs("tr", { children: [_jsx("td", { className: "table__cell--left", children: "tempTableName" }), _jsx("td", { className: "table__cell--left", children: node.tempTableName })] }))] })] }), _jsx(PanelDivider, {}), _jsx("div", { className: "query-builder__store-mapping-global-graph-fetch__container__implementation", children: _jsx(ImplementationViewer, { node: node, executionPlanState: executionPlanState }) }), _jsx(PanelDivider, {}), node.executionNodes.length > 0 &&
                                node.executionNodes[0] &&
                                node.executionNodes[0] instanceof SQLExecutionNode && (_jsxs(_Fragment, { children: [_jsx(PanelListItem, { className: "query-builder__store-mapping-global-graph-fetch__container__label2", children: "Execution Node Details" }), _jsx(PanelDivider, {}), _jsx(SQLExecutionNodeViewerHelper, { query: node.executionNodes[0].sqlQuery, resultColumns: node.executionNodes[0].resultColumns, resultType: node.executionNodes[0].resultType, executionPlanState: executionPlanState })] })), _jsx(PanelDivider, {}), _jsx("div", { className: "query-builder__store-mapping-global-graph-fetch__container__result", children: _jsx(ResultTypeViewer, { resultType: node.resultType }) }), _jsx(PanelDivider, {}), _jsx("div", { className: "query-builder__store-mapping-global-graph-fetch__container__result", 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" }) })] })), selectedTab === RELATIONAL_CLASS_QUERY_TABS.TEMP_TABLE &&
                        node.tempTableStrategy && (_jsx(TempTableStrategyViewer, { tempTableStrategy: node.tempTableStrategy, executionPlanState: executionPlanState }))] }) }) }));
});
//# sourceMappingURL=RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.js.map