import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PluginUtils } from '@baseplate-dev/project-builder-lib';
import { useBlockUnsavedChangesNavigate, useDefinitionSchema, useProjectDefinition, useResettableForm, } from '@baseplate-dev/project-builder-lib/web';
import { FormActionBar, SectionList, SectionListSection, SectionListSectionContent, SectionListSectionDescription, SectionListSectionHeader, SectionListSectionTitle, } from '@baseplate-dev/ui-components';
import { zodResolver } from '@hookform/resolvers/zod';
import { useMemo } from 'react';
import { EmailConfigTabs } from '#src/common/index.js';
import { createPostmarkPluginDefinitionSchema } from '../schema/plugin-definition.js';
import '#src/styles.css';
export function PostmarkDefinitionEditor({ definition: pluginMetadata, metadata, onSave, }) {
    const { definitionContainer, saveDefinitionWithFeedback } = useProjectDefinition();
    const postmarkPluginDefinitionSchema = useDefinitionSchema(createPostmarkPluginDefinitionSchema);
    const defaultValues = useMemo(() => {
        if (pluginMetadata?.config) {
            return pluginMetadata.config;
        }
        return {
            postmarkOptions: {},
        };
    }, [pluginMetadata?.config]);
    const form = useResettableForm({
        resolver: zodResolver(postmarkPluginDefinitionSchema),
        defaultValues,
    });
    const { control, reset, handleSubmit } = form;
    const onSubmit = handleSubmit((data) => saveDefinitionWithFeedback((draftConfig) => {
        PluginUtils.setPluginConfig(draftConfig, metadata, data, definitionContainer);
    }, {
        successMessage: 'Successfully saved Postmark configuration!',
        onSuccess: () => {
            onSave();
        },
    }));
    useBlockUnsavedChangesNavigate({ control, reset, onSubmit });
    return (_jsxs("div", { className: "email:relative email:flex email:h-full email:flex-1 email:flex-col email:gap-4 email:overflow-hidden", children: [_jsx(EmailConfigTabs, {}), _jsx("div", { className: "email:mb-[--action-bar-height] email:flex email:flex-1 email:overflow-y-auto", style: {
                    '--action-bar-height': '52px',
                }, children: _jsxs("form", { onSubmit: onSubmit, className: "email:max-w-6xl email:flex-1", children: [_jsx("div", { className: "email:pb-16", children: _jsx(SectionList, { children: _jsxs(SectionListSection, { children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "Postmark Configuration" }), _jsx(SectionListSectionDescription, { children: "Postmark is configured using the POSTMARK_SERVER_TOKEN environment variable. No additional configuration is needed here." })] }), _jsx(SectionListSectionContent, { className: "email:space-y-6", children: _jsxs("p", { className: "email:text-sm email:text-muted-foreground", children: ["Add your Postmark Server API Token to your environment variables as ", _jsx("code", { children: "POSTMARK_SERVER_TOKEN" }), "."] }) })] }) }) }), _jsx(FormActionBar, { form: form, allowSaveWithoutDirty: !pluginMetadata })] }) })] }));
}
//# sourceMappingURL=postmark-definition-editor.js.map