import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getManagedPluginsForPlugin, PluginUtils, } from '@baseplate-dev/project-builder-lib';
import { useBlockUnsavedChangesNavigate, useDefinitionSchema, useProjectDefinition, useResettableForm, } from '@baseplate-dev/project-builder-lib/web';
import { Alert, AlertDescription, AlertTitle, FormActionBar, SectionList, SectionListSection, SectionListSectionContent, SectionListSectionDescription, SectionListSectionHeader, SectionListSectionTitle, SelectFieldController, } from '@baseplate-dev/ui-components';
import { zodResolver } from '@hookform/resolvers/zod';
import { Link, useNavigate } from '@tanstack/react-router';
import { useMemo } from 'react';
import { QueueConfigTabs } from '#src/common/index.js';
import { createQueuePluginDefinitionSchema } from '../schema/plugin-definition.js';
import '#src/styles.css';
export function QueueDefinitionEditor({ definition: pluginMetadata, metadata, onSave, }) {
    const { definitionContainer, schemaParserContext, saveDefinitionWithFeedback, } = useProjectDefinition();
    const queuePluginDefinitionSchema = useDefinitionSchema(createQueuePluginDefinitionSchema);
    const availableImplementations = getManagedPluginsForPlugin(schemaParserContext.pluginStore, metadata.key);
    // Use pg-boss by default
    const pgBossImplementation = availableImplementations.find((i) => i.fullyQualifiedName === '@baseplate-dev/plugin-queue:pg-boss');
    const defaultValues = useMemo(() => {
        if (pluginMetadata?.config) {
            return pluginMetadata.config;
        }
        const implementationKey = availableImplementations.length > 0
            ? (pgBossImplementation ?? availableImplementations[0]).key
            : '';
        return {
            implementationPluginKey: implementationKey,
        };
    }, [pluginMetadata?.config, pgBossImplementation, availableImplementations]);
    const form = useResettableForm({
        resolver: zodResolver(queuePluginDefinitionSchema),
        defaultValues,
    });
    const { control, reset, handleSubmit, watch } = form;
    const implementationPluginKey = watch('implementationPluginKey');
    const selectedPlugin = implementationPluginKey &&
        availableImplementations.find((i) => i.key === implementationPluginKey);
    const isSelectedImplementationActive = !!PluginUtils.byKey(definitionContainer.definition, implementationPluginKey);
    const hasSelectedImplementationChanged = implementationPluginKey !==
        pluginMetadata?.config
            ?.implementationPluginKey;
    const selectedImplementationUrl = selectedPlugin
        ? `/plugins/edit/${selectedPlugin.key}`
        : undefined;
    const navigate = useNavigate();
    const onSubmit = handleSubmit((data) => saveDefinitionWithFeedback((draftConfig) => {
        PluginUtils.setPluginConfig(draftConfig, metadata, data, definitionContainer.pluginStore);
        // Make sure we disable other plugins that are not the selected implementation
        const otherPlugins = availableImplementations.filter((i) => i.key !== implementationPluginKey);
        for (const plugin of otherPlugins) {
            PluginUtils.disablePlugin(draftConfig, plugin.key, definitionContainer.parserContext);
        }
    }, {
        successMessage: `Successfully saved queue plugin! ${selectedImplementationUrl && !isSelectedImplementationActive ? `Please configure the provider plugin before syncing.` : ''}`,
        onSuccess: () => {
            onSave();
            if (selectedImplementationUrl && !isSelectedImplementationActive) {
                setTimeout(() => {
                    navigate({ to: selectedImplementationUrl });
                }, 100);
            }
        },
    }));
    useBlockUnsavedChangesNavigate({ control, reset, onSubmit });
    return (_jsxs("div", { className: "queue:relative queue:flex queue:h-full queue:flex-1 queue:flex-col queue:gap-4 queue:overflow-hidden", children: [_jsx(QueueConfigTabs, {}), _jsx("div", { className: "queue:mb-[--action-bar-height] queue:flex queue:flex-1 queue:overflow-y-auto", style: {
                    '--action-bar-height': '52px',
                }, children: _jsxs("form", { onSubmit: onSubmit, className: "queue:max-w-6xl queue:flex-1", children: [_jsxs("div", { className: "queue:pb-16", children: [!isSelectedImplementationActive &&
                                    selectedPlugin &&
                                    !hasSelectedImplementationChanged && (_jsxs(Alert, { variant: "warning", children: [_jsx(AlertTitle, { children: "Implementation Provider Not Active" }), _jsx(AlertDescription, { children: _jsxs("p", { children: ["The selected implementation provider is not active. Please make sure", ' ', _jsx(Link, { to: selectedImplementationUrl, className: "queue:inline-block queue:font-medium", children: "configure the provider" }), ' ', "before syncing."] }) })] })), _jsx(SectionList, { children: _jsxs(SectionListSection, { children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "General Settings" }), _jsx(SectionListSectionDescription, { children: "Configure the general settings for the queue plugin." })] }), _jsx(SectionListSectionContent, { className: "queue:space-y-6", children: _jsx(SelectFieldController, { label: "Queue Provider", name: "implementationPluginKey", control: control, options: availableImplementations, renderItemLabel: (item) => (_jsxs("div", { className: "queue:flex queue:flex-col queue:gap-2", children: [_jsx("div", { className: "queue:text-sm queue:font-medium", children: item.displayName }), _jsx("div", { className: "queue:text-sm queue:text-muted-foreground", children: item.description })] })), getOptionLabel: (item) => item.displayName, getOptionValue: (item) => item.key, description: "The queue provider to use for your project" }) })] }) })] }), _jsx(FormActionBar, { form: form, allowSaveWithoutDirty: !pluginMetadata })] }) })] }));
}
//# sourceMappingURL=queue-definition-editor.js.map