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 { useCallback, useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { CustomSelectorInput, createFilter, TimesIcon, ArrowCircleRightIcon, PanelEntryDragHandle, PanelDnDEntry, DragPreviewLayer, useDragPreviewLayer, clsx, } from '@finos/legend-art';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { isStubbed_PackageableElement, } from '@finos/legend-graph';
import { annotatedElement_swapStereotypes, stereotypeReference_setValue, } from '../../../../stores/graph-modifier/DomainGraphModifierHelper.js';
import { buildElementOption, } from '@finos/legend-lego/graph-editor';
import { useDrop, useDrag } from 'react-dnd';
export const STEREOTYPE_DND_TYPE = 'STEREOTYPE';
export const StereotypeDragPreviewLayer = () => (_jsx(DragPreviewLayer, { labelGetter: (item) => isStubbed_PackageableElement(item.stereotype.ownerReference.value)
        ? '(unknown)'
        : `${item.stereotype.ownerReference.value.name}.${item.stereotype.value.value}`, types: [STEREOTYPE_DND_TYPE] }));
export const StereotypeSelector = observer((props) => {
    const ref = useRef(null);
    const handleRef = useRef(null);
    const { annotatedElement, stereotype, deleteStereotype, isReadOnly, darkTheme, } = props;
    const editorStore = useEditorStore();
    // Profile
    const profileOptions = editorStore.graphManagerState.usableProfiles
        .map(buildElementOption)
        .filter((p) => p.value.p_stereotypes.length);
    const filterOption = createFilter({
        ignoreCase: true,
        ignoreAccents: false,
        stringify: (option) => option.data.value.path,
    });
    const [selectedProfile, setSelectedProfile] = useState({ value: stereotype.value._OWNER, label: stereotype.value._OWNER.name });
    const changeProfile = (val) => {
        if (val.value.p_stereotypes.length) {
            setSelectedProfile(val);
            stereotypeReference_setValue(stereotype, val.value.p_stereotypes[0]);
        }
    };
    const visitProfile = () => editorStore.graphEditorMode.openElement(selectedProfile.value);
    // Stereotype
    const stereotypeOptions = selectedProfile.value.p_stereotypes.map((st) => ({
        label: st.value,
        value: st,
    }));
    const stereotypeFilterOption = createFilter({
        ignoreCase: true,
        ignoreAccents: false,
        stringify: (option) => option.data.label,
    });
    const selectedStereotype = {
        value: stereotype.value,
        label: stereotype.value.value,
    };
    const updateStereotype = (val) => stereotypeReference_setValue(stereotype, val.value);
    // Drag and Drop
    const handleHover = useCallback((item) => {
        const draggingProperty = item.stereotype;
        const hoveredProperty = stereotype;
        annotatedElement_swapStereotypes(annotatedElement, draggingProperty, hoveredProperty);
    }, [annotatedElement, stereotype]);
    const [{ isBeingDraggedStereotype }, dropConnector] = useDrop(() => ({
        accept: [STEREOTYPE_DND_TYPE],
        hover: (item) => handleHover(item),
        collect: (monitor) => ({
            isBeingDraggedStereotype: monitor.getItem()?.stereotype,
        }),
    }), [handleHover]);
    const isBeingDragged = stereotype === isBeingDraggedStereotype;
    const [, dragConnector, dragPreviewConnector] = useDrag(() => ({
        type: STEREOTYPE_DND_TYPE,
        item: () => ({
            stereotype: stereotype,
        }),
    }), [stereotype]);
    dragConnector(handleRef);
    dropConnector(ref);
    useDragPreviewLayer(dragPreviewConnector);
    return (_jsxs(PanelDnDEntry, { ref: ref, className: "stereotype-selector__container", placeholder: _jsx("div", { className: "dnd__placeholder--light" }), showPlaceholder: isBeingDragged, children: [_jsx(PanelEntryDragHandle, { dragSourceConnector: handleRef, isDragging: isBeingDragged }), _jsxs("div", { className: clsx('stereotype-selector', {
                    'stereotype-selector--dark': darkTheme,
                }), children: [_jsxs("div", { className: "stereotype-selector__profile", children: [_jsx(CustomSelectorInput, { className: "stereotype-selector__profile__selector", disabled: isReadOnly, options: profileOptions, onChange: changeProfile, value: selectedProfile, placeholder: "Choose a profile", filterOption: filterOption, darkMode: Boolean(darkTheme) }), _jsx("button", { className: "stereotype-selector__profile__visit-btn", disabled: isStubbed_PackageableElement(stereotype.value._OWNER), onClick: visitProfile, tabIndex: -1, title: "Visit profile", children: _jsx(ArrowCircleRightIcon, {}) })] }), _jsx(CustomSelectorInput, { className: "stereotype-selector__stereotype", disabled: isReadOnly, options: stereotypeOptions, onChange: updateStereotype, value: selectedStereotype, placeholder: "Choose a stereotype", filterOption: stereotypeFilterOption, darkMode: Boolean(darkTheme) }), !isReadOnly && (_jsx("button", { className: clsx('uml-element-editor__remove-btn', {
                            'btn--dark btn--caution': darkTheme,
                        }), disabled: isReadOnly, onClick: deleteStereotype, tabIndex: -1, title: "Remove", children: _jsx(TimesIcon, {}) }))] })] }));
});
//# sourceMappingURL=StereotypeSelector.js.map