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 { DATA_TAB_TYPE, PackageableDataEditorState, } from '../../../../stores/editor/editor-state/element-editor-state/data/DataEditorState.js';
import { CaretDownIcon, clsx, ControlledDropdownMenu, InfoCircleIcon, LockIcon, MenuContent, MenuContentItem, PanelContentLists, PanelDropZone, PlusIcon, } from '@finos/legend-art';
import { prettyCONSTName } from '@finos/legend-shared';
import { StereotypeExplicitReference, Profile, stub_Stereotype, stub_Profile, stub_TaggedValue, stub_Tag, } from '@finos/legend-graph';
import { annotatedElement_addStereotype, annotatedElement_addTaggedValue, annotatedElement_deleteStereotype, annotatedElement_deleteTaggedValue, } from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
import { useDrop } from 'react-dnd';
import { CORE_DND_TYPE, } from '../../../../stores/editor/utils/DnDUtils.js';
import { TaggedValueDragPreviewLayer, TaggedValueEditor, } from '../uml-editor/TaggedValueEditor.js';
import { useCallback, useEffect, useRef } from 'react';
import { StereotypeDragPreviewLayer, StereotypeSelector, } from '../uml-editor/StereotypeSelector.js';
import { externalFormatData_setContentType, externalFormatData_setData, } from '../../../../stores/graph-modifier/DSL_Data_GraphModifierHelper.js';
import { renderEmbeddedDataEditor } from './EmbeddedDataEditor.js';
import { useApplicationNavigationContext, useApplicationStore, } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../../../__lib__/LegendStudioDocumentation.js';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { getEditorLanguageForFormat } from '../../../../stores/editor/editor-state/ArtifactGenerationViewerState.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));
    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() })] }), _jsx("div", { className: "external-format-data-editor__header__actions", children: _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("div", { className: clsx('external-format-data-editor__content'), children: _jsx("div", { className: "external-format-data-editor__content__input", children: _jsx(CodeEditor, { language: language, inputValue: externalFormatDataState.embeddedData.data, updateInput: changeData, hideGutter: true }) }) })] }));
});
export const EmbeddedDataEditor = observer((props) => {
    const { embeddedDataEditorState, isReadOnly } = props;
    const embeddedDataState = embeddedDataEditorState.embeddedDataState;
    return (_jsx("div", { className: "panel connection-editor", children: renderEmbeddedDataEditor(embeddedDataState, isReadOnly) }));
});
export const DataElementEditor = observer(() => {
    const editorStore = useEditorStore();
    const applicationStore = useApplicationStore();
    const editorState = editorStore.tabManagerState.getCurrentEditorState(PackageableDataEditorState);
    const dataElement = editorState.data;
    const isReadOnly = editorState.isReadOnly;
    const selectedTab = editorState.selectedTab;
    const changeTab = (tab) => () => editorState.setSelectedTab(tab);
    const addStereotype = () => {
        annotatedElement_addStereotype(dataElement, StereotypeExplicitReference.create(stub_Stereotype(stub_Profile())));
    };
    const addTaggedValue = () => {
        annotatedElement_addTaggedValue(dataElement, stub_TaggedValue(stub_Tag(stub_Profile())));
    };
    const deleteTaggedValue = (val) => () => annotatedElement_deleteTaggedValue(dataElement, val);
    const _deleteStereotype = (val) => () => annotatedElement_deleteStereotype(dataElement, val);
    const handleDropTaggedValue = useCallback((item) => {
        if (!isReadOnly && item.data.packageableElement instanceof Profile) {
            annotatedElement_addTaggedValue(dataElement, stub_TaggedValue(stub_Tag(item.data.packageableElement)));
        }
    }, [dataElement, isReadOnly]);
    const [{ isTaggedValueDragOver }, taggedValueDropConnector] = useDrop(() => ({
        accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
        drop: (item) => handleDropTaggedValue(item),
        collect: (monitor) => ({
            isTaggedValueDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDropTaggedValue]);
    const handleDropStereotype = useCallback((item) => {
        if (!isReadOnly && item.data.packageableElement instanceof Profile) {
            annotatedElement_addStereotype(dataElement, StereotypeExplicitReference.create(stub_Stereotype(item.data.packageableElement)));
        }
    }, [dataElement, isReadOnly]);
    const [{ isStereotypeDragOver }, stereotypeDropConnector] = useDrop(() => ({
        accept: [CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE],
        drop: (item) => handleDropStereotype(item),
        collect: (monitor) => ({
            isStereotypeDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDropStereotype]);
    const seeDocumentation = () => applicationStore.assistantService.openDocumentationEntry(LEGEND_STUDIO_DOCUMENTATION_KEY.QUESTION_HOW_TO_CREATE_A_DATA_ELEMENT);
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATA_ELEMENT_EDITOR);
    return (_jsxs("div", { className: "data-editor", children: [_jsx("div", { className: "data-editor__header", children: _jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "data-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsxs("div", { className: "data-editor__header__title__label", children: ["Data Element", _jsx("button", { className: "binding-editor__header__title__label__hint", tabIndex: -1, onClick: seeDocumentation, title: "click to see more details on creating a data element", children: _jsx(InfoCircleIcon, {}) })] }), _jsx("div", { className: "data-editor__header__title__content", children: dataElement.name })] }) }), _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(DATA_TAB_TYPE).map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('relational-connection-editor__tab', {
                        'relational-connection-editor__tab--active': tab === selectedTab,
                    }), children: prettyCONSTName(tab) }, tab))) }), _jsxs("div", { className: "data-editor__content", children: [selectedTab === DATA_TAB_TYPE.GENERAL && (_jsx(EmbeddedDataEditor, { embeddedDataEditorState: editorState.embeddedDataState, isReadOnly: isReadOnly })), selectedTab === DATA_TAB_TYPE.STEREOTYPES && (_jsxs(_Fragment, { children: [_jsxs("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: "Stereotypes" })] }), _jsx("div", { className: "data-editor__header__actions", children: _jsx("button", { className: "data-editor__header__action", onClick: addStereotype, disabled: isReadOnly, tabIndex: -1, title: "Add Stereotype", children: _jsx(PlusIcon, {}) }) })] }), _jsx("div", { className: "data-editor__content", children: _jsx("div", { className: "data-editor__content__lists", children: _jsx(PanelDropZone, { isDragOver: isStereotypeDragOver && !isReadOnly, dropTargetConnector: stereotypeDropConnector, children: _jsxs(PanelContentLists, { children: [_jsx(StereotypeDragPreviewLayer, {}), dataElement.stereotypes.map((stereotype) => (_jsx(StereotypeSelector, { annotatedElement: dataElement, stereotype: stereotype, deleteStereotype: _deleteStereotype(stereotype), isReadOnly: isReadOnly, darkTheme: true }, stereotype.value._UUID)))] }) }) }) })] })), selectedTab === DATA_TAB_TYPE.TAGGED_VALUES && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "data-editor__header", children: [_jsxs("div", { className: "data-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "data-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "data-editor__header__title__label", children: "Tagged Values" })] }), _jsx("div", { className: "data-editor__header__actions", children: _jsx("button", { className: "data-editor__header__action", onClick: addTaggedValue, disabled: isReadOnly, tabIndex: -1, title: "Add Tagged value", children: _jsx(PlusIcon, {}) }) })] }), _jsx("div", { className: "data-editor__content", children: _jsx("div", { className: "data-editor__content__lists", children: _jsx(PanelDropZone, { isDragOver: isTaggedValueDragOver && !isReadOnly, dropTargetConnector: taggedValueDropConnector, children: _jsxs(PanelContentLists, { children: [_jsx(TaggedValueDragPreviewLayer, {}), dataElement.taggedValues.map((taggedValue) => (_jsx(TaggedValueEditor, { annotatedElement: dataElement, taggedValue: taggedValue, deleteValue: deleteTaggedValue(taggedValue), isReadOnly: isReadOnly, darkTheme: true }, taggedValue._UUID)))] }) }) }) })] }))] })] }));
});
//# sourceMappingURL=DataElementEditor.js.map