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 { clsx, CustomSelectorInput, TimesIcon, LockIcon, PanelDropZone, PanelFormSection, } from '@finos/legend-art';
import { capitalize, filterByType, guaranteeNonNullable, prettyCONSTName, } from '@finos/legend-shared';
import { BINDING_TAB_TYPE, BindingEditorState, } from '../../../../stores/editor/editor-state/element-editor-state/external-format/DSL_ExternalFormat_BindingEditorState.js';
import { PackageableElementExplicitReference, SchemaSet, } from '@finos/legend-graph';
import { useCallback, useRef } from 'react';
import { useDrop } from 'react-dnd';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { getElementIcon } from '../../../ElementIconUtils.js';
import { CORE_DND_TYPE, } from '../../../../stores/editor/utils/DnDUtils.js';
import { externalFormat_Binding_setContentType, externalFormat_Binding_setSchemaId, externalFormat_Binding_setSchemaSet, externalFormat_modelUnit_addPackageableElementExcludes, externalFormat_modelUnit_addPackageableElementIncludes, externalFormat_modelUnit_deletePackageableElementExcludes, externalFormat_modelUnit_deletePackageableElementIncludes, } from '../../../../stores/graph-modifier/DSL_ExternalFormat_GraphModifierHelper.js';
import { useApplicationNavigationContext } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
const ModelUnitPackagableElementEntryEditor = observer((props) => {
    const { elementRef, removeElement, isReadOnly } = props;
    const editorStore = useEditorStore();
    return (_jsx("div", { className: "panel__content__form__section__list__item", children: _jsxs(_Fragment, { children: [_jsxs("div", { className: "panel__content__form__section__list__item__value model-unit-entry-editor__element", children: [_jsx("div", { className: "model-unit-entry-editor__element__icon", children: getElementIcon(elementRef.value, editorStore) }), _jsx("div", { className: "model-unit-entry-editor__element__path", children: elementRef.value.path })] }), _jsx("div", { className: "panel__content__form__section__list__item__actions", children: _jsx("button", { className: "panel__content__form__section__list__item__remove-btn", disabled: isReadOnly, onClick: () => removeElement(elementRef), tabIndex: -1, children: _jsx(TimesIcon, {}) }) })] }) }, elementRef.value.path));
});
const ModelUnitPackageElementEditor = observer((props) => {
    const { elements, addElement, removeElement, allowAddingElement, handleDropElement, isReadOnly, } = props;
    const [{ isElementDragOver }, dropConnector] = useDrop(() => ({
        accept: [
            CORE_DND_TYPE.PROJECT_EXPLORER_ENUMERATION,
            CORE_DND_TYPE.PROJECT_EXPLORER_PACKAGE,
            CORE_DND_TYPE.PROJECT_EXPLORER_CLASS,
            CORE_DND_TYPE.PROJECT_EXPLORER_PROFILE,
            CORE_DND_TYPE.PROJECT_EXPLORER_ASSOCIATION,
            CORE_DND_TYPE.PROJECT_EXPLORER_FUNCTION,
        ],
        drop: (item) => handleDropElement(item),
        collect: (monitor) => ({
            isElementDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDropElement]);
    return (_jsx("div", { className: "model-unit-editor", children: _jsx("div", { className: "model-unit-editor__panel__content", children: _jsx(PanelDropZone, { dropTargetConnector: dropConnector, isDragOver: isElementDragOver && !isReadOnly, children: _jsx("div", { className: "model-unit-editor__panel__content__form__section", children: _jsxs("div", { className: "model-unit-editor__panel__content__form__section__list", children: [elements.map((elementRef) => (_jsx(ModelUnitPackagableElementEntryEditor, { elementRef: elementRef, removeElement: removeElement, isReadOnly: isReadOnly }, elementRef.value._UUID))), _jsx("div", { className: "model-unit-editor__panel__content__form__section__list__new-item__add", children: _jsx("button", { className: "model-unit-editor__panel__content__form__section__list__new-item__add-btn btn btn--dark", disabled: !allowAddingElement, tabIndex: -1, onClick: addElement, title: "Add Element", children: "Add Value" }) })] }) }) }) }) }));
});
const BindingGeneralEditor = observer((props) => {
    const { editorState, isReadOnly } = props;
    const editorStore = useEditorStore();
    const applicationStore = editorStore.applicationStore;
    const binding = editorState.binding;
    const schemaSets = Array.from(editorStore.graphManagerState.graph.allOwnElements).filter(filterByType(SchemaSet));
    const schemaSetOptions = schemaSets.map((e) => ({
        value: e,
        label: e.path,
    }));
    const onSchemaSetChange = (val) => {
        externalFormat_Binding_setSchemaId(binding, undefined);
        return externalFormat_Binding_setSchemaSet(binding, PackageableElementExplicitReference.create(val.value));
    };
    const selectedSchemaSet = binding.schemaSet
        ? {
            label: binding.schemaSet.valueForSerialization ?? '',
            value: binding.schemaSet.value,
        }
        : null;
    const schemaIdOptions = selectedSchemaSet?.value.schemas
        .filter((e) => e.id)
        .map((e) => ({
        value: guaranteeNonNullable(e.id),
        label: guaranteeNonNullable(e.id),
    }));
    const onSchemaIdChange = (val) => externalFormat_Binding_setSchemaId(binding, val?.value);
    const selectedSchemaId = binding.schemaId
        ? {
            value: binding.schemaId,
            label: binding.schemaId,
        }
        : null;
    const projectSelectorRef = useRef(null);
    const contentTypeOptions = editorStore.graphState.graphGenerationState.externalFormatState.formatContentTypes.map((e) => ({
        value: e,
        label: e,
    }));
    const onContentTypeChange = (val) => externalFormat_Binding_setContentType(binding, val.value);
    const selectedContentType = {
        value: binding.contentType,
        label: binding.contentType,
    };
    return (_jsxs("div", { className: "binding-general-editor", children: [_jsx("div", { className: "binding-general-editor__section__header__label", children: "Content Type" }), _jsx("div", { children: _jsx(CustomSelectorInput, { className: "binding-general-editor__section__dropdown", disabled: isReadOnly, options: contentTypeOptions, onChange: onContentTypeChange, value: selectedContentType, placeholder: "Choose a content type", darkMode: !applicationStore.layoutService
                        .TEMPORARY__isLightColorThemeEnabled }) }), _jsx("div", { className: "binding-general-editor__section__header__label", children: "Schema Set" }), _jsx("div", { className: "binding-general-editor__content", children: _jsx(CustomSelectorInput, { className: "binding-general-editor__section__dropdown", disabled: isReadOnly, inputRef: projectSelectorRef, options: schemaSetOptions, onChange: onSchemaSetChange, value: selectedSchemaSet, isClearable: true, placeholder: "Choose a schema set", darkMode: !applicationStore.layoutService
                        .TEMPORARY__isLightColorThemeEnabled }) }), _jsx("div", { className: "binding-general-editor__section__header__label", children: "Schema ID" }), _jsx("div", { className: "binding-general-editor__content", children: _jsx(CustomSelectorInput, { className: "binding-general-editor__section__dropdown", disabled: isReadOnly, inputRef: projectSelectorRef, options: schemaIdOptions, onChange: onSchemaIdChange, value: selectedSchemaId, isClearable: true, placeholder: "Choose a schema ID", darkMode: !applicationStore.layoutService
                        .TEMPORARY__isLightColorThemeEnabled }) })] }));
});
export const ModelUnitEditor = observer((props) => {
    const editorStore = useEditorStore();
    const { modelUnit, isReadOnly } = props;
    const graph = editorStore.graphManagerState.graph;
    const allowedElements = [
        ...graph.ownProfiles,
        ...graph.ownEnumerations,
        ...graph.ownClasses,
        ...graph.ownAssociations,
        ...graph.ownFunctions,
    ];
    const elements = allowedElements.filter((element) => !modelUnit.packageableElementIncludes
        .map((e) => e.value)
        .includes(element) &&
        !modelUnit.packageableElementExcludes
            .map((e) => e.value)
            .includes(element));
    const allowAddingElement = !isReadOnly && Boolean(elements.length);
    const addInclusion = () => {
        if (allowAddingElement) {
            externalFormat_modelUnit_addPackageableElementIncludes(modelUnit, PackageableElementExplicitReference.create(guaranteeNonNullable(elements[0])));
        }
    };
    const addExclusion = () => {
        if (allowAddingElement) {
            externalFormat_modelUnit_addPackageableElementExcludes(modelUnit, PackageableElementExplicitReference.create(guaranteeNonNullable(elements[0])));
        }
    };
    const removeInclusion = (val) => externalFormat_modelUnit_deletePackageableElementIncludes(modelUnit, val);
    const removeExclusion = (val) => externalFormat_modelUnit_deletePackageableElementExcludes(modelUnit, val);
    const handleDropInclusion = useCallback((item) => {
        const element = item.data.packageableElement;
        if (!isReadOnly &&
            !modelUnit.packageableElementIncludes
                .map((e) => e.value)
                .includes(element)) {
            externalFormat_modelUnit_addPackageableElementIncludes(modelUnit, PackageableElementExplicitReference.create(element));
        }
    }, [isReadOnly, modelUnit]);
    const handleDropExclusion = useCallback((item) => {
        const element = item.data.packageableElement;
        if (!isReadOnly &&
            !modelUnit.packageableElementExcludes
                .map((e) => e.value)
                .includes(element)) {
            externalFormat_modelUnit_addPackageableElementExcludes(modelUnit, PackageableElementExplicitReference.create(element));
        }
    }, [isReadOnly, modelUnit]);
    return (_jsxs(_Fragment, { children: [_jsxs(PanelFormSection, { children: [_jsx("div", { className: "panel__content__form__section__header__label", children: _jsx("div", { className: "panel__content__form__section__header__label__text", children: capitalize('Model Includes') }) }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Specifies the list of models included" }), _jsx(ModelUnitPackageElementEditor, { elements: modelUnit.packageableElementIncludes, addElement: addInclusion, removeElement: removeInclusion, allowAddingElement: allowAddingElement, handleDropElement: handleDropInclusion, isReadOnly: isReadOnly })] }), _jsxs(PanelFormSection, { children: [_jsx("div", { className: "panel__content__form__section__header__label", children: _jsx("div", { className: "panel__content__form__section__header__label__text", children: capitalize('Model Excludes') }) }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Specifies the list of models excluded" }), _jsx(ModelUnitPackageElementEditor, { elements: modelUnit.packageableElementExcludes, addElement: addExclusion, removeElement: removeExclusion, allowAddingElement: allowAddingElement, handleDropElement: handleDropExclusion, isReadOnly: isReadOnly })] })] }));
});
export const BindingEditor = observer(() => {
    const editorStore = useEditorStore();
    const editorState = editorStore.tabManagerState.getCurrentEditorState(BindingEditorState);
    const binding = editorState.binding;
    const modelUnit = binding.modelUnit;
    const isReadOnly = editorState.isReadOnly;
    const selectedTab = editorState.selectedTab;
    const changeTab = (tab) => () => editorState.setSelectedTab(tab);
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.BINDING_EDITOR);
    return (_jsxs("div", { className: "binding-editor", children: [_jsx("div", { className: "binding-editor__header", children: _jsxs("div", { className: "binding-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "binding-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "binding-editor__header__title__label", children: "Binding" }), _jsx("div", { className: "binding-editor__header__title__content", children: binding.name })] }) }), _jsx("div", { className: "uml-element-editor__tabs", children: Object.values(BINDING_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: "binding-editor_content", children: [selectedTab === BINDING_TAB_TYPE.GENERAL && (_jsxs(_Fragment, { children: [_jsx("div", { className: "binding-editor__header", children: _jsxs("div", { className: "binding-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "binding-editor__header__title__label", children: "General" })] }) }), _jsx("div", { className: "binding-editor__content", children: _jsx("div", { className: "binding-editor__content__lists", children: _jsx(BindingGeneralEditor, { editorState: editorState, isReadOnly: isReadOnly }) }) })] })), selectedTab === BINDING_TAB_TYPE.MODELS && (_jsxs(_Fragment, { children: [_jsx("div", { className: "binding-editor__header", children: _jsxs("div", { className: "binding-editor__header__title", children: [isReadOnly && (_jsx("div", { className: "element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "binding-editor__header__title__label", children: "Model Unit" })] }) }), _jsx("div", { className: "binding-editor__content", children: _jsx("div", { className: "binding-editor__content__lists", children: _jsx("div", { className: "binding-editor__model-unit-editor", children: _jsx(ModelUnitEditor, { modelUnit: modelUnit, isReadOnly: isReadOnly }) }) }) })] }))] })] }));
});
//# sourceMappingURL=DSL_ExternalFormat_BindingElementEditor.js.map