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 { Panel, PanelHeader, PanelContent, PanelForm, PanelFormTextField, PURE_FunctionIcon, LongArrowRightIcon, PanelLoadingIndicator, PURE_ConnectionIcon, CustomSelectorInput, createFilter, ControlledDropdownMenu, MenuContent, MenuContentItem, CaretDownIcon, } from '@finos/legend-art';
import { generateFunctionPrettyName, RelationalDatabaseConnection, DatabaseType, } from '@finos/legend-graph';
import { observer } from 'mobx-react-lite';
import { useApplicationStore } from '@finos/legend-application';
import { useEditorStore } from '../../EditorStoreProvider.js';
import { MemSQLFunctionActivatorEditorState } from '../../../../stores/editor/editor-state/element-editor-state/function-activator/MemSQLFunctionActivatorEditorState.js';
import { flowResult } from 'mobx';
import { useRef } from 'react';
import { buildRelationalDatabaseConnectionOption, } from '../connection-editor/RelationalDatabaseConnectionEditor.js';
import { ActivatorOwnershipForm } from './ActivatorFormComponents.js';
import { ActivatorArtifactViewer } from './ActivatorArtifactViewer.js';
export const MemSQLFunctionActivatorEditor = observer(() => {
    const editorStore = useEditorStore();
    const applicationStore = useApplicationStore();
    const editorState = editorStore.tabManagerState.getCurrentEditorState(MemSQLFunctionActivatorEditorState);
    const isReadOnly = editorState.isReadOnly;
    const activator = editorState.activator;
    const connectionSelectorRef = useRef(null);
    const connectionFilterOption = createFilter({
        ignoreCase: true,
        ignoreAccents: false,
        stringify: (option) => option.data.value.path,
    });
    const connectionOptions = editorStore.graphManagerState.usableConnections
        .filter((connection) => connection.connectionValue instanceof RelationalDatabaseConnection &&
        connection.connectionValue.type === DatabaseType.MemSQL)
        .map(buildRelationalDatabaseConnectionOption);
    const initializeActivationConnection = (val) => {
        if (val) {
            editorState.updateConnection(val);
        }
        return !val
            ? undefined
            : activator.activationConfiguration.activationConnection
                ?.packageableConnection.value;
    };
    const activationConnection = activator.activationConfiguration
        .activationConnection
        ? activator.activationConfiguration.activationConnection
            .packageableConnection.value
        : initializeActivationConnection(connectionOptions.at(0)?.value);
    const changeConnection = (val) => {
        if (!isReadOnly && val.value === activationConnection) {
            return;
        }
        editorState.updateConnection(val.value);
    };
    const changeDescription = (event) => {
        if (!isReadOnly) {
            editorState.updateAppDescription(event.target.value);
        }
    };
    const visitFunction = () => editorState.editorStore.graphEditorMode.openElement(activator.function.value);
    const visitConnection = () => {
        if (activationConnection) {
            editorState.editorStore.graphEditorMode.openElement(activationConnection);
        }
    };
    const validate = () => {
        flowResult(editorState.validate()).catch(applicationStore.alertUnhandledError);
    };
    const renderArtifact = () => {
        flowResult(editorState.renderArtifact()).catch(applicationStore.alertUnhandledError);
    };
    const deploy = () => {
        flowResult(editorState.deployToSandbox()).catch(applicationStore.alertUnhandledError);
    };
    return (_jsx("div", { className: "mem-sql-function-activator-editor", children: _jsxs(Panel, { children: [_jsx(PanelHeader, { title: "Mem SQL Function" }), _jsx(PanelLoadingIndicator, { isLoading: Boolean(editorState.validateState.isInProgress ||
                        editorState.renderArtifactState.isInProgress ||
                        editorState.deployState.isInProgress) }), _jsxs(PanelContent, { children: [_jsxs("div", { className: "mem-sql-function-activator-editor__header", children: [_jsx("div", { className: "mem-sql-function-activator-editor__header__label", children: "Mem SQL Function" }), _jsxs("div", { className: "mem-sql-function-activator-editor__header__actions", children: [_jsxs("div", { className: "mem-sql-function-activator-editor__header__actions btn__dropdown-combo--primary", children: [_jsx("button", { className: "mem-sql-function-activator-editor__header__actions__action mem-sql-function-activator-editor__header__actions__action--primary", onClick: validate, disabled: editorState.validateState.isInProgress, tabIndex: -1, title: "Click Validate to verify your activator before deployment", children: "Validate" }), _jsx(ControlledDropdownMenu, { className: "mem-sql-function-activator-editor__header__actions btn__dropdown-combo btn__dropdown-combo__dropdown-btn", title: "activator-artifact-dropdown", content: _jsx(MenuContent, { children: _jsx(MenuContentItem, { className: "btn__dropdown-combo__option", onClick: renderArtifact, children: "Render Artifact" }) }), menuProps: {
                                                        anchorOrigin: {
                                                            vertical: 'bottom',
                                                            horizontal: 'right',
                                                        },
                                                        transformOrigin: {
                                                            vertical: 'top',
                                                            horizontal: 'right',
                                                        },
                                                    }, children: _jsx(CaretDownIcon, {}) })] }), _jsx("div", { className: "mem-sql-function-activator-editor__header__actions btn__dropdown-combo--primary", children: _jsx("button", { className: "mem-sql-function-activator-editor__header__actions__action mem-sql-function-activator-editor__header__actions__action--primary", onClick: deploy, disabled: editorState.deployState.isInProgress, title: "Deploy to sandbox", tabIndex: -1, children: "Deploy to Sandbox" }) })] })] }), _jsxs(PanelForm, { children: [_jsx("div", { className: "panel__content__form__section", children: _jsx("div", { className: "panel__content__form__section__header__label", children: "Function" }) }), _jsx("div", { className: "mem-sql-function-activator-editor__configuration__items", children: _jsxs("div", { className: "mem-sql-function-activator-editor__configuration__item", children: [_jsx("div", { className: "btn--sm mem-sql-function-activator-editor__configuration__item__label", children: _jsx(PURE_FunctionIcon, {}) }), _jsx("input", { className: "panel__content__form__section__input", spellCheck: false, disabled: true, value: generateFunctionPrettyName(activator.function.value, {
                                                    fullPath: true,
                                                    spacing: false,
                                                }) }), _jsx("button", { className: "btn--dark btn--sm mem-sql-function-activator-editor__configuration__item__btn", onClick: visitFunction, tabIndex: -1, title: "See Function", children: _jsx(LongArrowRightIcon, {}) })] }) })] }), _jsxs(PanelForm, { children: [_jsx("div", { className: "panel__content__form__section", children: _jsx("div", { className: "panel__content__form__section__header__label", children: "Connection" }) }), _jsx("div", { className: "mem-sql-function-activator-editor__configuration__items", children: _jsxs("div", { className: "mem-sql-function-activator-editor__configuration__item", children: [_jsx("div", { className: "btn--sm mem-sql-function-activator-editor__configuration__item__label", children: _jsx(PURE_ConnectionIcon, {}) }), _jsx(CustomSelectorInput, { inputRef: connectionSelectorRef, className: "mem-sql-function-activator-editor__config__connection-selector__input", options: connectionOptions, onChange: changeConnection, value: activationConnection
                                                    ? buildRelationalDatabaseConnectionOption(activationConnection)
                                                    : undefined, darkMode: !applicationStore.layoutService
                                                    .TEMPORARY__isLightColorThemeEnabled, placeholder: "Choose a connection", filterOption: connectionFilterOption }), _jsx("button", { className: "btn--dark btn--sm mem-sql-function-activator-editor__configuration__item__btn", onClick: visitConnection, disabled: !activationConnection, tabIndex: -1, title: "See Connection", children: _jsx(LongArrowRightIcon, {}) })] }) })] }), _jsx(PanelForm, { children: _jsx(PanelFormTextField, { value: activator.functionName, isReadOnly: isReadOnly, name: "Activator Identifer", placeholder: "Specify the name of the UDF for this activator...", update: (value) => editorState.updateApplicationName(value ?? '') }) }), _jsx(PanelForm, { children: _jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Description" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: `Provide a brief description of Mem SQL Function` }), _jsx("textarea", { className: "panel__content__form__section__textarea service-editor__documentation__input", spellCheck: false, disabled: isReadOnly, value: activator.description, onChange: changeDescription })] }) }), _jsx(PanelForm, { children: _jsx(ActivatorOwnershipForm, { activator: activator, isReadOnly: isReadOnly }) }), _jsx(ActivatorArtifactViewer, { artifact: editorState.artifact, setArtifact: (value) => editorState.setArtifact(value), darkMode: !applicationStore.layoutService
                                .TEMPORARY__isLightColorThemeEnabled })] })] }) }));
});
//# sourceMappingURL=MemSQLFunctionActivatorEditor.js.map