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 { useState, useRef, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { compareLabelFn, ControlledDropdownMenu, NonBlockingDialog, createFilter, CustomSelectorInput, MoreHorizontalIcon, CaretDownIcon, Modal, MenuContent, MenuContentItem, } from '@finos/legend-art';
import { getElementTypeIcon } from '../../ElementIconUtils.js';
import { useEditorStore } from '../EditorStoreProvider.js';
import { buildElementOption, getPackageableElementOptionFormatter, } from '@finos/legend-lego/graph-editor';
export const ProjectSearchCommand = observer(() => {
    const editorStore = useEditorStore();
    const applicationStore = editorStore.applicationStore;
    const selectorRef = useRef(null);
    const closeModal = () => editorStore.setShowSearchElementCommand(false);
    const types = editorStore.getSupportedElementTypes();
    const [elementType, setElementType] = useState();
    const changeType = (type) => () => setElementType(type);
    const options = [
        // NOTE: we don't include system elements here for now
        // ...editorStore.graphManagerState.graph.systemModel.allOwnElements,
        ...editorStore.graphManagerState.graph.dependencyManager.allOwnElements,
        ...editorStore.graphManagerState.graph.allOwnElements,
        ...editorStore.graphManagerState.graph.generationModel.allOwnElements,
    ]
        .filter((element) => !elementType ||
        editorStore.graphState.getPackageableElementType(element) ===
            elementType)
        .map(buildElementOption)
        .sort(compareLabelFn);
    const filterOption = createFilter({
        ignoreCase: true,
        ignoreAccents: false,
        stringify: (option) => option.data.value.path,
    });
    const openElement = (val) => {
        if (val?.value) {
            closeModal();
            // NOTE: since it takes time to close the modal, this will prevent any auto-focus effort when we open a new element
            // to fail as the focus is still trapped in this modal, we need to use `setTimeout` here
            setTimeout(() => editorStore.graphEditorMode.openElement(val.value), 0);
        }
    };
    const handleEnter = () => {
        setElementType(undefined);
        selectorRef.current?.focus();
    };
    useEffect(() => {
        selectorRef.current?.focus();
    }, [elementType]);
    return (_jsx(NonBlockingDialog, { open: editorStore.showSearchElementCommand, onClose: closeModal, onClickAway: closeModal, classes: { container: 'search-modal__container' }, slotProps: {
            transition: {
                onEnter: handleEnter,
            },
            paper: {
                classes: { root: 'search-modal__inner-container' },
            },
        }, children: _jsx(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "search-modal", children: _jsxs("div", { className: "project-search-command", children: [_jsxs(ControlledDropdownMenu, { className: "project-search-command__type", title: "Choose Element Type...", content: _jsxs(MenuContent, { className: "project-search-command__options", children: [_jsx(MenuContentItem, { className: "project-search-command__option", onClick: changeType(undefined), children: _jsx(MoreHorizontalIcon, {}) }), types.map((type) => (_jsx(MenuContentItem, { className: "project-search-command__option", onClick: changeType(type), children: getElementTypeIcon(type, editorStore) }, type)))] }), children: [_jsx("div", { className: "project-search-command__type__label", children: elementType ? (getElementTypeIcon(elementType, editorStore)) : (_jsx(MoreHorizontalIcon, {})) }), _jsx("div", { className: "project-search-command__type__selector", children: _jsx(CaretDownIcon, {}) })] }), _jsx(CustomSelectorInput, { inputRef: selectorRef, className: "project-search-command__input", options: options, onChange: openElement, filterOption: filterOption, placeholder: `Search ${elementType ? elementType.toLowerCase() : 'elements'} by path`, escapeClearsValue: true, darkMode: !applicationStore.layoutService
                            .TEMPORARY__isLightColorThemeEnabled, formatOptionLabel: getPackageableElementOptionFormatter({
                            darkMode: !applicationStore.layoutService
                                .TEMPORARY__isLightColorThemeEnabled,
                        }) })] }) }) }));
});
//# sourceMappingURL=ProjectSearchCommand.js.map