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 { createSentryPluginDefinitionSchema } from '../schema/plugin-definition.js';
import '#src/styles.css';
export function SentryDefinitionEditor({ definition: pluginMetadata, metadata, onSave, }) {
    const { definitionContainer, saveDefinitionWithFeedback } = useProjectDefinition();
    const sentryPluginDefinitionSchema = useDefinitionSchema(createSentryPluginDefinitionSchema);
    const defaultValues = useMemo(() => pluginMetadata?.config ?? {
        sentryOptions: {},
    }, [pluginMetadata?.config]);
    const form = useResettableForm({
        resolver: zodResolver(sentryPluginDefinitionSchema),
        defaultValues,
    });
    const { control, reset, handleSubmit } = form;
    const onSubmit = handleSubmit((data) => saveDefinitionWithFeedback((draftConfig) => {
        PluginUtils.setPluginConfig(draftConfig, metadata, data, definitionContainer);
    }, {
        successMessage: 'Successfully saved Sentry configuration!',
        onSuccess: () => {
            onSave();
        },
    }));
    useBlockUnsavedChangesNavigate({ control, reset, onSubmit });
    return (_jsx("div", { className: "sentry:relative sentry:flex sentry:h-full sentry:flex-1 sentry:flex-col sentry:gap-4 sentry:overflow-hidden", children: _jsx("div", { className: "sentry:mb-[--action-bar-height] sentry:flex sentry:flex-1 sentry:overflow-y-auto", style: {
                '--action-bar-height': '52px',
            }, children: _jsxs("form", { onSubmit: onSubmit, className: "sentry:max-w-6xl sentry:flex-1", children: [_jsx("div", { className: "sentry:pb-16", children: _jsx(SectionList, { children: _jsxs(SectionListSection, { children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "Sentry Configuration" }), _jsxs(SectionListSectionDescription, { children: ["Sentry provides error monitoring and performance tracking for both your backend and frontend applications. Once enabled, configure the ", _jsx("code", { children: "SENTRY_DSN" }), " and", ' ', _jsx("code", { children: "VITE_SENTRY_DSN" }), " environment variables in your project to activate error reporting."] })] }), _jsx(SectionListSectionContent, { children: _jsx("p", { className: "sentry:text-sm sentry:text-muted-foreground", children: "No additional configuration is required. Save to enable Sentry integration in your project." }) })] }) }) }), _jsx(FormActionBar, { form: form, allowSaveWithoutDirty: !pluginMetadata })] }) }) }));
}
//# sourceMappingURL=sentry-definition-editor.js.map