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 { clsx, ContextMenu, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, ResizablePanelSplitterLine, LockIcon, PlusIcon, PanelLoadingIndicator, UploadIcon, Dialog, TimesIcon, BlankPanelContent, MenuContent, MenuContentItem, PanelContent, Modal, ModalBody, ModalFooter, ModalHeader, ModalFooterButton, } from '@finos/legend-art';
import { ExternalFormatSchema as Schema } from '@finos/legend-graph';
import { flowResult } from 'mobx';
import { SchemaSetEditorState, SCHEMA_SET_TAB_TYPE, } from '../../../../stores/editor/editor-state/element-editor-state/external-format/DSL_ExternalFormat_SchemaSetEditorState.js';
import { guaranteeNonNullable, prettyCONSTName } from '@finos/legend-shared';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { externalFormat_schemaSet_addSchema, externalFormat_schemaSet_deleteSchema, externalFormat_schema_setContent, externalFormat_schema_setId, externalFormat_schema_setLocation, } from '../../../../stores/graph-modifier/DSL_ExternalFormat_GraphModifierHelper.js';
import { SchemaSetModelGenerationEditor } from './DSL_ExternalFormat_SchemaSetModelGenerationEditor.js';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { useApplicationNavigationContext } from '@finos/legend-application';
const SchemaLoader = observer((props) => {
    const { schemaSetEditorState } = props;
    const applicationStore = schemaSetEditorState.editorStore.applicationStore;
    const importState = schemaSetEditorState.importSchemaContentState;
    const onClose = () => importState.closeModal();
    const onChange = (event) => {
        const fileList = event.target.files;
        if (fileList) {
            importState.setFiles(Array.from(fileList));
        }
    };
    const importSchemas = () => {
        if (importState.files) {
            importState.importSchemas(importState.files);
        }
    };
    return (_jsx(Dialog, { onClose: onClose, open: importState.importSchemaModal, slotProps: {
            transition: {
                appear: false, // disable transition
            },
        }, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "modal--scrollable patch-loader", children: [_jsx(ModalHeader, { title: "Schema Content Loader" }), _jsxs(ModalBody, { children: [_jsx(PanelLoadingIndicator, { isLoading: importState.loadingSchemaContentState.isInProgress }), _jsx("div", { children: _jsx("input", { type: "file", name: "myFiles", onChange: onChange, multiple: true }) }), importState.files && (_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Schema Files" }), _jsx("div", { className: "panel__content__form__section__list", children: _jsx("div", { className: "panel__content__form__section__list__items", children: importState.files.map((value) => (_jsxs("div", { className: "panel__content__form__section__list__item", children: [_jsx("div", { className: "panel__content__form__section__list__item__value", children: value.name }), _jsx("div", { className: "panel__content__form__section__list__item__actions", children: _jsx("button", { title: "Remove change", className: "panel__content__form__section__list__item__remove-btn", onClick: () => importState.removeFile(value), tabIndex: -1, children: _jsx(TimesIcon, {}) }) })] }, value.name))) }) })] }))] }), _jsx(ModalFooter, { children: _jsx(ModalFooterButton, { className: "blocking-alert__action--standard", text: "Import Schemas", onClick: importSchemas, disabled: !importState.files?.length }) })] }) }));
});
const SchemaBasicEditor = observer((props) => {
    const { schema, isReadOnly, language } = props;
    const changeId = (event) => externalFormat_schema_setId(schema, event.target.value);
    const changeLocation = (event) => externalFormat_schema_setLocation(schema, event.target.value);
    return (_jsxs("div", { className: "schema-editor", children: [_jsx("input", { className: "schema-editor__id", disabled: isReadOnly, value: schema.id, spellCheck: false, onChange: changeId, placeholder: "Id" }), _jsx("input", { className: "schema-editor__location", disabled: isReadOnly, value: schema.location, spellCheck: false, onChange: changeLocation, placeholder: "Location" }), _jsx("div", { className: clsx('schema-editor__content'), children: _jsx("div", { className: "schema-editor__content__input", children: _jsx(CodeEditor, { inputValue: schema.content, language: language, updateInput: (val) => {
                            externalFormat_schema_setContent(schema, val);
                        }, hideGutter: true }) }) })] }));
});
export const SchemaSetGeneralEditor = observer((props) => {
    const { schemaSetEditorState, isReadOnly } = props;
    const schemaSet = schemaSetEditorState.schemaSet;
    const applicationStore = schemaSetEditorState.editorStore.applicationStore;
    const importSchemaContentState = schemaSetEditorState.importSchemaContentState;
    const currentSchema = schemaSetEditorState.currentSchema;
    const description = schemaSetEditorState.schemaSetModelGenerationState.description;
    // TEMPROARY engine api should return `fileformat`.
    const language = description
        ? getEditorLanguageForFormat(description.name)
        : CODE_EDITOR_LANGUAGE.TEXT;
    const changeState = (schema) => () => {
        schemaSetEditorState.setCurrentSchema(schema);
    };
    const getIndex = (value) => guaranteeNonNullable(schemaSet.schemas.findIndex((schema) => value === schema), `Can't find schema '${value}' in schema set '${schemaSet.path}'`);
    const addSchema = () => {
        if (!isReadOnly) {
            const schema = new Schema();
            externalFormat_schema_setContent(schema, '');
            externalFormat_schemaSet_addSchema(schemaSet, schema);
            schemaSetEditorState.setCurrentSchema(schema);
        }
    };
    const openSchemaLoader = () => importSchemaContentState.setImportSchemaModal(true);
    const deleteSchema = (val) => () => {
        externalFormat_schemaSet_deleteSchema(schemaSet, val);
        if (schemaSet.schemas.length !== 0) {
            schemaSetEditorState.setCurrentSchema(schemaSet.schemas[schemaSet.schemas.length - 1]);
        }
        if (schemaSet.schemas.length === 0) {
            schemaSetEditorState.setCurrentSchema(undefined);
        }
    };
    const validateSchema = () => {
        if (currentSchema &&
            schemaSetEditorState instanceof SchemaSetEditorState) {
            flowResult(schemaSetEditorState.validateSchema(currentSchema)).catch(applicationStore.alertUnhandledError);
        }
    };
    return (_jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { minSize: 30, size: 300, children: _jsxs("div", { className: "schema-set-panel", children: [_jsxs("div", { className: "schema-set-panel__header", children: [_jsx("div", { className: "panel__header__title", children: _jsx("div", { className: "panel__header__title__label", children: `${schemaSet.format} configuration` }) }), _jsxs("div", { className: "schema-set-panel__header__actions", children: [_jsx("button", { className: "schema-set-panel__header__action", onClick: openSchemaLoader, disabled: isReadOnly, tabIndex: -1, title: "Import Schemas", children: _jsx(UploadIcon, {}) }), _jsx("button", { className: "schema-set-panel__header__action", onClick: addSchema, disabled: isReadOnly, tabIndex: -1, title: "Add Schema", children: _jsx(PlusIcon, {}) })] })] }), schemaSet.schemas.map((schema, index) => (_jsx(ContextMenu, { className: clsx('schema-set-panel__item', {
                                'schema-set-panel__item--active': currentSchema === schema,
                            }), disabled: isReadOnly, content: _jsx(MenuContent, { children: _jsx(MenuContentItem, { onClick: deleteSchema(schema), children: "Delete" }) }), menuProps: { elevation: 7 }, children: _jsx("div", { className: "schema-set-panel__item__label", onClick: changeState(schema), children: schema.id ? schema.id : `Schema${index + 1}` }) }, schema._UUID)))] }) }), _jsx(ResizablePanelSplitter, { children: _jsx(ResizablePanelSplitterLine, { color: "var(--color-dark-grey-200)" }) }), _jsx(ResizablePanel, { children: _jsxs("div", { className: "schema-set-panel", children: [_jsxs("div", { className: "schema-set-panel__header", children: [_jsxs("div", { className: "schema-set-panel__header__title", children: [isReadOnly && (_jsx("div", { className: "schema-set-panel__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "schema-set-panel__header__title__label", children: "Schema" }), _jsx("div", { className: "schema-set-panel__header__title__content", children: currentSchema !== undefined
                                                ? currentSchema.id
                                                    ? currentSchema.id
                                                    : `Schema${getIndex(currentSchema) + 1}`
                                                : '' })] }), _jsx("div", { className: "panel__header__actions", children: schemaSetEditorState instanceof SchemaSetEditorState && (_jsx("button", { className: "btn--dark model-loader__header__load-btn", onClick: validateSchema, disabled: !currentSchema, tabIndex: -1, title: "Validate Schema", children: "Validate" })) })] }), _jsx("div", { className: "schema-set-panel__content", children: _jsxs("div", { className: "schema-set-panel__content__lists", children: [schemaSetEditorState.importSchemaContentState
                                        .importSchemaModal && (_jsx(SchemaLoader, { schemaSetEditorState: schemaSetEditorState })), currentSchema !== undefined && (_jsx(SchemaBasicEditor, { language: language, schema: currentSchema, isReadOnly: isReadOnly }, currentSchema._UUID))] }) })] }) })] }));
});
export const SchemaSetEditor = observer(() => {
    const editorStore = useEditorStore();
    const schemaSetEditorState = editorStore.tabManagerState.getCurrentEditorState(SchemaSetEditorState);
    const isReadOnly = schemaSetEditorState.isReadOnly;
    const schemaSet = schemaSetEditorState.schemaSet;
    const currentTab = schemaSetEditorState.selectedTab;
    const isFetchingDescriptions = editorStore.graphState.graphGenerationState.externalFormatState
        .fetchingDescriptionsState.isInProgress;
    const changeTab = (tab) => () => schemaSetEditorState.setSelectedTab(tab);
    const renderMainEditPanel = () => {
        if (isFetchingDescriptions) {
            return (_jsx(BlankPanelContent, { children: "Fetching format descriptions" }));
        }
        if (currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS) {
            return (_jsx(SchemaSetGeneralEditor, { schemaSetEditorState: schemaSetEditorState, isReadOnly: isReadOnly }));
        }
        const supportsModelGeneraiton = schemaSetEditorState.schemaSetModelGenerationState.description
            ?.supportsModelGeneration;
        return supportsModelGeneraiton ? (_jsx(SchemaSetModelGenerationEditor, { modelGenerationState: schemaSetEditorState.schemaSetModelGenerationState, isReadOnly: isReadOnly })) : (_jsxs(BlankPanelContent, { children: ["Format ", schemaSet.format, " does not support Model Generation"] }));
    };
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SCHEMA_SET_EDITOR);
    return (_jsxs("div", { className: "panel schema-set-panel", children: [_jsx("div", { className: "schema-set-panel__header", children: _jsxs("div", { className: "schema-set-panel__header__title", children: [schemaSetEditorState.isReadOnly && (_jsx("div", { className: "schema-set-panel__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "schema-set-panel__header__title__label", children: "Schema Set" }), _jsx("div", { className: "schema-set-panel__header__title__content", children: schemaSetEditorState.schemaSet.name })] }) }), _jsxs(PanelContent, { children: [_jsx(PanelLoadingIndicator, { isLoading: isFetchingDescriptions }), _jsx("div", { className: "panel__header", children: _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(SCHEMA_SET_TAB_TYPE).map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('relational-connection-editor__tab', {
                                    'relational-connection-editor__tab--active': tab === currentTab,
                                }), children: prettyCONSTName(tab) }, tab))) }) }), _jsxs("div", { className: "panel__content file-generation-editor__content", children: [currentTab === SCHEMA_SET_TAB_TYPE.SCHEMAS && (_jsx(SchemaSetGeneralEditor, { schemaSetEditorState: schemaSetEditorState, isReadOnly: isReadOnly })), currentTab === SCHEMA_SET_TAB_TYPE.GENERATE_MODEL &&
                                renderMainEditPanel()] })] })] }));
});
//# sourceMappingURL=DSL_ExternalFormat_SchemaSetElementEditor.js.map