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 { DEFAULT_TAB_SIZE } from '@finos/legend-application';
import { clsx, Dialog, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalFooterButton, ModalHeaderActions, TimesIcon, } from '@finos/legend-art';
import { observer } from 'mobx-react-lite';
import { useEffect } from 'react';
import { QueryBuilderDiffViewMode, } from '../stores/QueryBuilderChangeDetectionState.js';
import { pruneSourceInformation } from '@finos/legend-graph';
import { CodeDiffView, JSONDiffView } from '@finos/legend-lego/code-editor';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
export const QueryBuilderDiffViewPanel = observer((props) => {
    const { diffViewState } = props;
    const fromGrammarText = diffViewState.initialQueryGrammarText;
    const toGrammarText = diffViewState.currentQueryGrammarText;
    // actions
    const onChangeMode = (mode) => () => {
        diffViewState.setMode(mode);
    };
    useEffect(() => {
        diffViewState.generateGrammarDiff();
    }, [diffViewState]);
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "query-builder__diff-panel__header", children: Object.values(QueryBuilderDiffViewMode).map((mode) => (_jsx("button", { onClick: onChangeMode(mode), className: clsx('query-builder__diff-panel__mode', {
                        'query-builder__diff-panel__mode--selected': mode === diffViewState.mode,
                    }), children: mode }, mode))) }), _jsxs("div", { className: "query-builder__diff-panel__content", children: [diffViewState.mode === QueryBuilderDiffViewMode.GRAMMAR && (_jsx(CodeDiffView, { language: CODE_EDITOR_LANGUAGE.PURE, from: fromGrammarText, to: toGrammarText })), diffViewState.mode === QueryBuilderDiffViewMode.JSON && (_jsx(JSONDiffView, { from: JSON.stringify({
                            parameters: diffViewState.initialQuery.parameters
                                ? pruneSourceInformation(diffViewState.initialQuery.parameters)
                                : undefined,
                            body: diffViewState.initialQuery.body
                                ? pruneSourceInformation(diffViewState.initialQuery.body)
                                : undefined,
                        }, null, DEFAULT_TAB_SIZE), to: JSON.stringify({
                            parameters: diffViewState.currentQuery.parameters
                                ? pruneSourceInformation(diffViewState.currentQuery.parameters)
                                : undefined,
                            body: diffViewState.currentQuery.body
                                ? pruneSourceInformation(diffViewState.currentQuery.body)
                                : undefined,
                        }, null, DEFAULT_TAB_SIZE) }))] })] }));
});
export const QueryBuilderDiffViewPanelDiaglog = observer((props) => {
    const { diffViewState } = props;
    const applicationStore = diffViewState.changeDetectionState.querybuilderState.applicationStore;
    const close = () => diffViewState.changeDetectionState.hideDiffViewPanel();
    return (_jsx(Dialog, { open: Boolean(diffViewState), onClose: close, classes: {
            root: 'editor-modal__root-container',
            container: 'editor-modal__container',
            paper: 'editor-modal__content',
        }, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: clsx('editor-modal query-builder-text-mode__modal'), children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { title: "Query Diff" }), _jsx(ModalHeaderActions, { children: _jsx("button", { className: "modal__header__action", tabIndex: -1, onClick: close, children: _jsx(TimesIcon, {}) }) })] }), _jsx(ModalBody, { className: "query-builder__diff-panel", children: _jsx(QueryBuilderDiffViewPanel, { diffViewState: diffViewState }) }), _jsx(ModalFooter, { className: "query-builder__diff-panel__actions", children: _jsx(ModalFooterButton, { title: "Close Modal", onClick: close, type: "secondary", children: "Close" }) })] }) }));
});
//# sourceMappingURL=QueryBuilderDiffPanel.js.map