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 { prettyCONSTName } from '@finos/legend-shared';
import { UMLEditorState, UML_EDITOR_TAB, } from '../../../../stores/editor/editor-state/element-editor-state/UMLEditorState.js';
import { observer } from 'mobx-react-lite';
import { clsx, InputWithInlineValidation, PlusIcon, TimesIcon, LockIcon, PanelEntryDragHandle, DragPreviewLayer, useDragPreviewLayer, Panel, PanelContent, PanelDnDEntry, PanelContentLists, } from '@finos/legend-art';
import { LEGEND_STUDIO_TEST_ID } from '../../../../__lib__/LegendStudioTesting.js';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { stub_Tag, stub_Stereotype, } from '@finos/legend-graph';
import { profile_addTag, profile_addStereotype, profile_deleteTag, profile_deleteStereotype, tagStereotype_setValue, profile_swapTags, profile_swapStereotypes, } from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
import { useApplicationNavigationContext } from '@finos/legend-application';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { useRef, useCallback } from 'react';
import { useDrop, useDrag } from 'react-dnd';
const TAG_DND_TYPE = 'TAG';
const TagBasicEditor = observer((props) => {
    const ref = useRef(null);
    const handleRef = useRef(null);
    const { tag, _profile, deleteValue, isReadOnly } = props;
    const changeValue = (event) => {
        tagStereotype_setValue(tag, event.target.value);
    };
    const isTagDuplicated = (val) => tag._OWNER.p_tags.filter((t) => t.value === val.value).length >= 2;
    // Drag and Drop
    const handleHover = useCallback((item) => {
        const draggingTag = item.tag;
        const hoveredTag = tag;
        profile_swapTags(_profile, draggingTag, hoveredTag);
    }, [_profile, tag]);
    const [{ isBeingDraggedTag }, dropConnector] = useDrop(() => ({
        accept: [TAG_DND_TYPE],
        hover: (item) => handleHover(item),
        collect: (monitor) => ({
            isBeingDraggedTag: monitor.getItem()?.tag,
        }),
    }), [handleHover]);
    const isBeingDragged = tag === isBeingDraggedTag;
    const [, dragConnector, dragPreviewConnector] = useDrag(() => ({
        type: TAG_DND_TYPE,
        item: () => ({
            tag: tag,
        }),
    }), [tag]);
    dragConnector(handleRef);
    dropConnector(ref);
    useDragPreviewLayer(dragPreviewConnector);
    return (_jsxs(PanelDnDEntry, { ref: ref, className: "tag-basic-editor__container", placeholder: _jsx("div", { className: "dnd__placeholder--light" }), showPlaceholder: isBeingDragged, children: [_jsx(PanelEntryDragHandle, { dragSourceConnector: handleRef, isDragging: isBeingDragged }), _jsxs("div", { className: "tag-basic-editor", children: [_jsx(InputWithInlineValidation, { className: "tag-basic-editor__value input-group__input", spellCheck: false, disabled: isReadOnly, value: tag.value, onChange: changeValue, placeholder: "Tag value", error: isTagDuplicated(tag) ? 'Duplicated tag' : undefined }), !isReadOnly && (_jsx("button", { className: "uml-element-editor__remove-btn", disabled: isReadOnly, onClick: deleteValue, tabIndex: -1, title: "Remove", children: _jsx(TimesIcon, {}) }))] })] }));
});
const STEREOTYPE_DND_TYPE = 'STEREOTYPE';
const StereotypeBasicEditor = observer((props) => {
    const ref = useRef(null);
    const handleRef = useRef(null);
    const { stereotype, _profile, deleteStereotype, isReadOnly } = props;
    const changeValue = (event) => {
        tagStereotype_setValue(stereotype, event.target.value);
    };
    const isStereotypeDuplicated = (val) => stereotype._OWNER.p_stereotypes.filter((s) => s.value === val.value)
        .length >= 2;
    // Drag and Drop
    const handleHover = useCallback((item) => {
        const draggingTag = item.stereotype;
        const hoveredTag = stereotype;
        profile_swapStereotypes(_profile, draggingTag, hoveredTag);
    }, [_profile, stereotype]);
    const [{ isBeingDraggedTag }, dropConnector] = useDrop(() => ({
        accept: [STEREOTYPE_DND_TYPE],
        hover: (item) => handleHover(item),
        collect: (monitor) => ({
            isBeingDraggedTag: monitor.getItem()
                ?.stereotype,
        }),
    }), [handleHover]);
    const isBeingDragged = stereotype === isBeingDraggedTag;
    const [, dragConnector, dragPreviewConnector] = useDrag(() => ({
        type: STEREOTYPE_DND_TYPE,
        item: () => ({
            stereotype: stereotype,
        }),
    }), [stereotype]);
    dragConnector(handleRef);
    dropConnector(ref);
    useDragPreviewLayer(dragPreviewConnector);
    return (_jsxs(PanelDnDEntry, { ref: ref, placeholder: _jsx("div", { className: "dnd__placeholder--light" }), className: "stereotype-basic-editor__container", showPlaceholder: isBeingDragged, children: [_jsx(PanelEntryDragHandle, { dragSourceConnector: handleRef, isDragging: isBeingDragged }), _jsxs("div", { className: "stereotype-basic-editor", children: [_jsx(InputWithInlineValidation, { className: "stereotype-basic-editor__value input-group__input", spellCheck: false, disabled: isReadOnly, value: stereotype.value, onChange: changeValue, placeholder: "Stereotype value", error: isStereotypeDuplicated(stereotype)
                            ? 'Duplicated stereotype'
                            : undefined }), !isReadOnly && (_jsx("button", { className: "uml-element-editor__remove-btn", disabled: isReadOnly, onClick: deleteStereotype, tabIndex: -1, title: "Remove", children: _jsx(TimesIcon, {}) }))] })] }));
});
export const ProfileEditor = observer((props) => {
    const { profile } = props;
    const editorStore = useEditorStore();
    const editorState = editorStore.tabManagerState.getCurrentEditorState(UMLEditorState);
    const isReadOnly = editorState.isReadOnly;
    // Tab
    const selectedTab = editorState.selectedTab;
    const tabs = [UML_EDITOR_TAB.TAGS, UML_EDITOR_TAB.STEREOTYPES];
    const changeTab = (tab) => () => editorState.setSelectedTab(tab);
    // Tagged value and Stereotype
    let addButtonTitle = '';
    switch (selectedTab) {
        case UML_EDITOR_TAB.TAGS:
            addButtonTitle = 'Add tagged value';
            break;
        case UML_EDITOR_TAB.STEREOTYPES:
            addButtonTitle = 'Add stereotype';
            break;
        default:
            break;
    }
    const addValue = () => {
        if (!isReadOnly) {
            if (selectedTab === UML_EDITOR_TAB.TAGS) {
                profile_addTag(profile, stub_Tag(profile));
            }
            else if (selectedTab === UML_EDITOR_TAB.STEREOTYPES) {
                profile_addStereotype(profile, stub_Stereotype(profile));
            }
        }
    };
    const deleteStereotype = (val) => () => profile_deleteStereotype(profile, val);
    const deleteTag = (val) => () => profile_deleteTag(profile, val);
    useApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.PROFILE_EDITOR);
    return (_jsx("div", { className: "uml-element-editor profile-editor", children: _jsxs(Panel, { children: [_jsx("div", { className: "panel__header", children: _jsxs("div", { className: "panel__header__title", children: [isReadOnly && (_jsx("div", { className: "uml-element-editor__header__lock", children: _jsx(LockIcon, {}) })), _jsx("div", { className: "panel__header__title__label", children: "profile" }), _jsx("div", { className: "panel__header__title__content", children: profile.name })] }) }), _jsxs("div", { "data-testid": LEGEND_STUDIO_TEST_ID.UML_ELEMENT_EDITOR__TABS_HEADER, className: "panel__header uml-element-editor__tabs__header", children: [_jsx("div", { className: "uml-element-editor__tabs", children: tabs.map((tab) => (_jsx("div", { onClick: changeTab(tab), className: clsx('uml-element-editor__tab', {
                                    'uml-element-editor__tab--active': tab === selectedTab,
                                }), children: prettyCONSTName(tab) }, tab))) }), _jsx("div", { className: "panel__header__actions", children: _jsx("button", { className: "panel__header__action", onClick: addValue, disabled: isReadOnly, tabIndex: -1, title: addButtonTitle, children: _jsx(PlusIcon, {}) }) })] }), _jsxs(PanelContent, { children: [selectedTab === UML_EDITOR_TAB.TAGS && (_jsxs(PanelContentLists, { children: [_jsx(DragPreviewLayer, { labelGetter: (item) => item.tag.value === '' ? '(unknown)' : item.tag.value, types: [TAG_DND_TYPE] }), profile.p_tags.map((tag) => (_jsx(TagBasicEditor, { tag: tag, _profile: profile, deleteValue: deleteTag(tag), isReadOnly: isReadOnly }, tag._UUID)))] })), selectedTab === UML_EDITOR_TAB.STEREOTYPES && (_jsxs(PanelContentLists, { children: [_jsx(DragPreviewLayer, { labelGetter: (item) => item.stereotype.value === ''
                                        ? '(unknown)'
                                        : item.stereotype.value, types: [STEREOTYPE_DND_TYPE] }), profile.p_stereotypes.map((stereotype) => (_jsx(StereotypeBasicEditor, { _profile: profile, stereotype: stereotype, deleteStereotype: deleteStereotype(stereotype), isReadOnly: isReadOnly }, stereotype._UUID)))] }))] })] }) }));
});
//# sourceMappingURL=ProfileEditor.js.map