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 { useEditorStore } from '../../EditorStoreProvider.js';
import { CaretDownIcon, clsx, CustomSelectorInput, ControlledDropdownMenu, LockIcon, LongArrowRightIcon, MenuContent, MenuContentItem, PanelContent, PURE_ClassIcon, PURE_DataIcon, WrenchIcon, createFilter, } from '@finos/legend-art';
import React, { useEffect, useRef } from 'react';
import { UnsupportedEditorPanel } from '../UnsupportedElementEditor.js';
import { externalFormatData_setContentType, externalFormatData_setData, modelStoreData_setDataModelModel, } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
import { DataElementReferenceState, ExternalFormatDataState, RelationalCSVDataState, ModelStoreDataState, ModelEmbeddedDataState, RelationElementsDataState, } from '../../../../stores/editor/editor-state/element-editor-state/data/EmbeddedDataState.js';
import { PackageableElementExplicitReference, } from '@finos/legend-graph';
import { buildElementOption, getPackageableElementOptionFormatter, } from '@finos/legend-lego/graph-editor';
import { RelationalCSVDataEditor } from './RelationalCSVDataEditor.js';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.js';
import { useApplicationNavigationContext } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { RelationElementsDataEditor } from './RelationElementsDataEditor.js';
export const ExternalFormatDataEditor = observer((props) => {
    const { externalFormatDataState, isReadOnly } = props;
    const editorStore = useEditorStore();
    const typeNameRef = useRef(null);
    const changeData = (val) => externalFormatData_setData(externalFormatDataState.embeddedData, val);
    useEffect(() => {
        if (!isReadOnly) {
            typeNameRef.current?.focus();
        }
    }, [isReadOnly]);
    const contentTypeOptions = editorStore.graphState.graphGenerationState.externalFormatState
        .formatContentTypes;
    const onContentTypeChange = (val) => externalFormatData_setContentType(externalFormatDataState.embeddedData, val);
    const language = getEditorLanguageForFormat(editorStore.graphState.graphGenerationState.externalFormatState.getFormatTypeForContentType(externalFormatDataState.embeddedData.contentType));
    const format = () => externalFormatDataState.format();
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_EXTERNAL_FORMAT_EDITOR);
    return (_jsxs("div", { className: "panel external-format-data-editor", children: [_jsxs("div", { className: "external-format-data-editor__header", children: [_jsxs("div", { className: "external-format-data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "external-format-editor-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "external-format-data-editor__header__title__label", children: externalFormatDataState.label() })] }), _jsxs("div", { className: "external-format-data-editor__header__actions", children: [_jsx("button", { className: "panel__header__action", disabled: !externalFormatDataState.supportsFormatting || isReadOnly, tabIndex: -1, onClick: format, title: "Format External Format", children: _jsx(WrenchIcon, {}) }), _jsxs(ControlledDropdownMenu, { className: "external-format-data-editor__type", disabled: isReadOnly, content: _jsx(MenuContent, { className: "external-format-data-editor__dropdown", children: contentTypeOptions.map((contentType) => (_jsx(MenuContentItem, { className: "external-format-data-editor__option", onClick: () => onContentTypeChange(contentType), children: contentType }, contentType))) }), menuProps: {
                                    anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
                                    transformOrigin: { vertical: 'top', horizontal: 'right' },
                                }, children: [_jsx("div", { className: "external-format-data-editor__type__label", children: externalFormatDataState.embeddedData.contentType }), _jsx("div", { className: "external-format-data-editor__type__icon", children: _jsx(CaretDownIcon, {}) })] })] })] }), _jsx(PanelContent, { className: "model-loader__editor", children: _jsx(CodeEditor, { language: language, inputValue: externalFormatDataState.embeddedData.data, updateInput: changeData, hideGutter: true }) })] }));
});
export const DataElementReferenceDataEditor = observer((props) => {
    const { dataElementReferenceState, isReadOnly } = props;
    const dataElement = dataElementReferenceState.embeddedData.dataElement.value;
    const editorStore = dataElementReferenceState.editorStore;
    const applicationStore = editorStore.applicationStore;
    const options = editorStore.graphManagerState.usableDataElements.map(buildElementOption);
    const selectedOption = buildElementOption(dataElement);
    const onDataElementChange = (val) => {
        if (val.value !== selectedOption.value) {
            dataElementReferenceState.setDataElement(val.value);
        }
    };
    const visitData = () => editorStore.graphEditorMode.openElement(dataElement);
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_DATA_ELEMENT_REFERENCE_EDITOR);
    return (_jsxs("div", { className: "panel data-element-reference-editor", children: [_jsx("div", { className: "data-element-reference-editor__header", children: _jsxs("div", { className: "data-element-reference-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "external-format-editor-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-element-reference-editor__header__title__label", children: dataElementReferenceState.label() })] }) }), _jsxs("div", { className: clsx('data-element-reference-editor__content'), children: [_jsxs("div", { className: "data-element-reference-editor__value", children: [_jsx("div", { className: "btn--sm data-element-reference-editor__value__label", children: _jsx(PURE_DataIcon, {}) }), _jsx(CustomSelectorInput, { className: "panel__content__form__section__dropdown data-element-reference-editor__value__dropdown", disabled: isReadOnly, options: options, onChange: onDataElementChange, value: selectedOption, darkMode: !applicationStore.layoutService
                                    .TEMPORARY__isLightColorThemeEnabled }), _jsx("button", { className: "btn--dark btn--sm data-element-reference-editor__value-btn", onClick: visitData, tabIndex: -1, title: "See data element", children: _jsx(LongArrowRightIcon, {}) })] }), _jsx("div", { className: "data-element-reference-editor__content__value", children: renderEmbeddedDataEditor(dataElementReferenceState.embeddedDataValueState, isReadOnly, true) })] })] }));
});
export const ModelEmbeddedDataEditor = observer((props) => {
    const { isReadOnly, modelStoreDataState, modelDataState } = props;
    const modelData = modelDataState.modelData;
    const hideClass = modelStoreDataState.hideClass;
    const classSelectorRef = useRef(null);
    const elementFilterOption = createFilter({
        ignoreCase: true,
        ignoreAccents: false,
        stringify: (option) => option.data.value.path,
    });
    const editorStore = modelStoreDataState.editorStore;
    const applicationStore = editorStore.applicationStore;
    const _class = modelData.model.value;
    const classOptions = editorStore.graphManagerState.usableClasses.map((_cl) => ({
        value: _cl,
        label: _cl.name,
    }));
    const selectedClassOption = {
        value: _class,
        label: _class.name,
    };
    const changeClass = (val) => {
        if (val?.value) {
            modelStoreData_setDataModelModel(modelData, PackageableElementExplicitReference.create(val.value));
        }
    };
    return (_jsxs(_Fragment, { children: [!hideClass && (_jsxs("div", { className: "sample-data-generator__controller", children: [_jsx("div", { className: "sample-data-generator__controller__icon", title: "class", children: _jsx(PURE_ClassIcon, {}) }), _jsx(CustomSelectorInput, { inputRef: classSelectorRef, className: "sample-data-generator__controller__class-selector", options: classOptions, onChange: changeClass, value: selectedClassOption, darkMode: !applicationStore.layoutService
                            .TEMPORARY__isLightColorThemeEnabled, filterOption: elementFilterOption, formatOptionLabel: getPackageableElementOptionFormatter({
                            darkMode: !applicationStore.layoutService
                                .TEMPORARY__isLightColorThemeEnabled,
                        }) })] })), renderEmbeddedDataEditor(modelDataState.embeddedDataState, isReadOnly)] }));
});
export const ModelStoreDataEditor = observer((props) => {
    const { isReadOnly, modelStoreDataState } = props;
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.EMBEDDED_DATA_MODEL_STORE_EDITOR);
    return (_jsx("div", { className: "panel connection-editor", children: modelStoreDataState.modelDataStates.map((_modelDataState) => {
            if (_modelDataState instanceof ModelEmbeddedDataState) {
                return (_jsx(ModelEmbeddedDataEditor, { modelDataState: _modelDataState, modelStoreDataState: modelStoreDataState, isReadOnly: isReadOnly }, _modelDataState.uuid));
            }
            return (_jsx(UnsupportedEditorPanel, { text: 'Unsuppored Model Data Type', isReadOnly: false }, _modelDataState.uuid));
        }) }));
});
export const EmbeddedDataEditor = observer((props) => {
    const { embeddedDataEditorState, isReadOnly } = props;
    return (_jsx("div", { className: "panel connection-editor", children: renderEmbeddedDataEditor(embeddedDataEditorState.embeddedDataState, isReadOnly) }));
});
export function renderEmbeddedDataEditor(embeddedDataState, isReadOnly, isSharedData) {
    if (embeddedDataState instanceof ExternalFormatDataState) {
        return (_jsx(ExternalFormatDataEditor, { externalFormatDataState: embeddedDataState, isReadOnly: isReadOnly }));
    }
    else if (embeddedDataState instanceof RelationalCSVDataState) {
        return (_jsx(RelationalCSVDataEditor, { dataState: embeddedDataState, isReadOnly: isReadOnly }));
    }
    else if (embeddedDataState instanceof RelationElementsDataState) {
        return (_jsx(RelationElementsDataEditor, { dataState: embeddedDataState, isReadOnly: isReadOnly, isSharedData: isSharedData, hideColumnDefinitions: true }));
    }
    else if (embeddedDataState instanceof DataElementReferenceState) {
        return (_jsx(DataElementReferenceDataEditor, { dataElementReferenceState: embeddedDataState, isReadOnly: isReadOnly }));
    }
    else if (embeddedDataState instanceof ModelStoreDataState) {
        return (_jsx(ModelStoreDataEditor, { modelStoreDataState: embeddedDataState, isReadOnly: isReadOnly }));
    }
    else {
        const extraEmbeddedDataEditorRenderers = embeddedDataState.editorStore.pluginManager
            .getApplicationPlugins()
            .flatMap((plugin) => plugin.getExtraEmbeddedDataEditorRenderers?.() ?? []);
        for (const editorRenderer of extraEmbeddedDataEditorRenderers) {
            const editor = editorRenderer(embeddedDataState, isReadOnly);
            if (editor) {
                return editor;
            }
        }
        return (_jsxs("div", { className: "panel connection-editor", children: [_jsx("div", { className: "data-editor__header", children: _jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-editor__header__title__label", children: embeddedDataState.label() })] }) }), _jsx(PanelContent, { children: _jsx(UnsupportedEditorPanel, { text: "Can't display this embedded data in form-mode", isReadOnly: isReadOnly }) })] }));
    }
}
//# sourceMappingURL=EmbeddedDataEditor.js.map