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 { observer } from 'mobx-react-lite';
import { BlankPanelContent, Dialog, InputWithInlineValidation, Modal, ModalBody, ModalFooter, ModalFooterButton, ModalHeader, ModalHeaderActions, ModalTitle, Panel, PanelContent, PanelHeader, PanelLoadingIndicator, ResizablePanel, ResizablePanelGroup, ResizablePanelSplitter, TimesIcon, } from '@finos/legend-art';
import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../__lib__/LegendStudioApplicationNavigationContext.js';
import { useApplicationStore, useConditionedApplicationNavigationContext, } from '@finos/legend-application';
import { flowResult } from 'mobx';
import { useEffect, useMemo } from 'react';
import { CODE_EDITOR_LANGUAGE } from '@finos/legend-code-editor';
import { CodeEditor } from '@finos/legend-lego/code-editor';
import { debounce, noop } from '@finos/legend-shared';
import { isValidPath } from '@finos/legend-graph';
export const DatabaseModelPackageInput = observer((props) => {
    const { databaseModelBuilderState } = props;
    const applicationStore = useApplicationStore();
    const debouncedRegenerate = useMemo(() => debounce(() => flowResult(databaseModelBuilderState.previewDatabaseModels()), 500), [databaseModelBuilderState]);
    const changeTargetPackage = (event) => {
        databaseModelBuilderState.setTargetPackage(event.target.value);
        debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
    };
    const targetPackageValidationMessage = !databaseModelBuilderState.targetPackage
        ? `Target package path can't be empty`
        : !isValidPath(databaseModelBuilderState.targetPackage)
            ? 'Invalid target package path'
            : undefined;
    return (_jsxs("div", { className: "panel__content__form__section", children: [_jsx("div", { className: "panel__content__form__section__header__label", children: "Target Package" }), _jsx("div", { className: "panel__content__form__section__header__prompt", children: "Target Package of Mapping and Models Generated" }), _jsx(InputWithInlineValidation, { className: "query-builder__variables__variable__name__input input-group__input", spellCheck: false, value: databaseModelBuilderState.targetPackage, onChange: changeTargetPackage, placeholder: "Target package path", error: targetPackageValidationMessage, showEditableIcon: true })] }));
});
export const DatabaseModelPreviewEditor = observer((props) => {
    const { databaseModelBuilderState, grammarCode } = props;
    const isExecutingAction = databaseModelBuilderState.generatingModelState.isInProgress ||
        databaseModelBuilderState.saveModelState.isInProgress;
    return (_jsxs(Panel, { className: "database-builder__model", children: [_jsx(PanelHeader, { title: "database model" }), _jsxs(PanelContent, { children: [_jsx(PanelLoadingIndicator, { isLoading: isExecutingAction }), _jsx("div", { className: "database-builder__modeler", children: _jsxs("div", { className: "database-builder__modeler__preview", children: [_jsx("div", { className: "database-builder__modeler__preview__header", children: "readonly" }), databaseModelBuilderState.generatedGrammarCode && (_jsx(CodeEditor, { language: CODE_EDITOR_LANGUAGE.PURE, inputValue: grammarCode, isReadOnly: true })), !databaseModelBuilderState.generatedGrammarCode && (_jsx(BlankPanelContent, { children: "No model preview" }))] }) })] })] }));
});
export const DatabaseModelBuilder = observer((props) => {
    const { databaseModelBuilderState, isReadOnly } = props;
    const applicationStore = useApplicationStore();
    const debouncedRegenerate = useMemo(() => debounce(() => flowResult(databaseModelBuilderState.previewDatabaseModels()), 500), [databaseModelBuilderState]);
    const preview = () => {
        debouncedRegenerate.cancel();
        debouncedRegenerate()?.catch(applicationStore.alertUnhandledError);
    };
    const saveModels = applicationStore.guardUnhandledError(() => flowResult(databaseModelBuilderState.saveModels()));
    const closeModal = () => {
        databaseModelBuilderState.close();
    };
    const isExecutingAction = databaseModelBuilderState.generatingModelState.isInProgress ||
        databaseModelBuilderState.saveModelState.isInProgress;
    useEffect(() => {
        flowResult(databaseModelBuilderState.previewDatabaseModels()).catch(applicationStore.alertUnhandledError);
    }, [applicationStore, databaseModelBuilderState]);
    useConditionedApplicationNavigationContext(LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.DATABASE_MODEL_BUILDER, databaseModelBuilderState.showModal);
    return (_jsx(Dialog, { open: databaseModelBuilderState.showModal, classes: { container: 'search-modal__container' }, onClose: noop, slotProps: {
            paper: {
                classes: {
                    root: 'search-modal__inner-container database-builder__container',
                },
            },
        }, children: _jsxs(Modal, { darkMode: !applicationStore.layoutService.TEMPORARY__isLightColorThemeEnabled, className: "database-builder", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { title: "Database Model Builder" }), _jsx(ModalHeaderActions, { children: _jsx("button", { className: "modal__header__action", tabIndex: -1, onClick: closeModal, children: _jsx(TimesIcon, {}) }) })] }), _jsx(ModalBody, { className: "database-builder__content", children: _jsxs(ResizablePanelGroup, { orientation: "vertical", children: [_jsx(ResizablePanel, { size: 450, children: _jsxs("div", { className: "database-builder__config", children: [_jsx(PanelHeader, { title: "schema explorer" }), _jsx(PanelContent, { className: "database-builder__config__content", children: _jsx(DatabaseModelPackageInput, { databaseModelBuilderState: databaseModelBuilderState }) })] }) }), _jsx(ResizablePanelSplitter, {}), _jsx(ResizablePanel, { children: _jsx(DatabaseModelPreviewEditor, { databaseModelBuilderState: databaseModelBuilderState, grammarCode: databaseModelBuilderState.generatedGrammarCode }) })] }) }), _jsxs(ModalFooter, { children: [_jsx(ModalFooterButton, { className: "database-builder__action--btn", disabled: isReadOnly || isExecutingAction, onClick: preview, title: "Preview models...", children: "Preview" }), _jsx(ModalFooterButton, { className: "database-builder__action--btn", disabled: isReadOnly || isExecutingAction, onClick: saveModels, children: "Save Models" })] })] }) }));
});
//# sourceMappingURL=DatabaseModelBuilder.js.map