import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createLibraryWebConfig } from '@baseplate-dev/project-builder-lib';
import { useBlockUnsavedChangesNavigate, useDefinitionSchema, useProjectDefinition, useResettableForm, } from '@baseplate-dev/project-builder-lib/web';
import { Alert, AlertDescription, AlertTitle, FormActionBar, InputFieldController, SectionList, SectionListSection, SectionListSectionContent, SectionListSectionDescription, SectionListSectionHeader, SectionListSectionTitle, } from '@baseplate-dev/ui-components';
import { zodResolver } from '@hookform/resolvers/zod';
import { TRANSACTIONAL_LIB_TYPE, transactionalLibDefinitionSchemaEntry, } from '../schema/transactional-lib-definition.js';
import '#src/styles.css';
function TransactionalLibEditComponent({ packageDefinition, }) {
    const { saveDefinitionWithFeedback } = useProjectDefinition();
    const transactionalLibSchema = useDefinitionSchema(transactionalLibDefinitionSchemaEntry.definitionSchema);
    const formProps = useResettableForm({
        resolver: zodResolver(transactionalLibSchema),
        values: packageDefinition,
    });
    const { control, handleSubmit, reset } = formProps;
    const onSubmit = handleSubmit((data) => saveDefinitionWithFeedback((draftConfig) => {
        draftConfig.libraries = draftConfig.libraries.map((lib) => lib.id === packageDefinition.id ? data : lib);
    }));
    useBlockUnsavedChangesNavigate({ control, reset, onSubmit });
    return (_jsxs("form", { className: "email:w-full email:max-w-7xl email:space-y-4 email:px-4", onSubmit: onSubmit, children: [_jsxs(SectionList, { children: [_jsxs(SectionListSection, { children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "General" }), _jsx(SectionListSectionDescription, { children: "Basic configuration for your transactional email library." })] }), _jsx(SectionListSectionContent, { className: "email:space-y-6", children: _jsx(InputFieldController, { label: "Name", control: control, name: "name" }) })] }), _jsxs(SectionListSection, { children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "Customization" }), _jsx(SectionListSectionDescription, { children: "How to customize your transactional email library." })] }), _jsx(SectionListSectionContent, { children: _jsxs(Alert, { children: [_jsx(AlertTitle, { children: "Customize Your Email Theme" }), _jsxs(AlertDescription, { children: [_jsx("p", { className: "email:mb-2", children: "After syncing, customize the constants in your transactional library:" }), _jsxs("ul", { className: "email:list-inside email:list-disc email:space-y-1 email:text-sm", children: [_jsxs("li", { children: [_jsx("code", { className: "email:rounded-sm email:bg-muted email:px-1", children: "src/constants/theme.ts" }), ' ', "- Colors, typography, and spacing tokens"] }), _jsxs("li", { children: [_jsx("code", { className: "email:rounded-sm email:bg-muted email:px-1", children: "src/components/layout.tsx" }), ' ', "- Email header, footer, and branding"] })] }), _jsx("p", { className: "email:mt-2 email:text-sm email:text-muted-foreground", children: "These files are generated once and won't be overwritten during future syncs." })] })] }) })] })] }), _jsx(FormActionBar, { form: formProps })] }));
}
export const transactionalLibWebConfig = createLibraryWebConfig({
    name: transactionalLibDefinitionSchemaEntry.name,
    displayName: 'Transactional Email Library',
    EditComponent: TransactionalLibEditComponent,
    createDefinition: ({ id, name }) => ({
        id,
        name,
        type: TRANSACTIONAL_LIB_TYPE,
    }),
});
//# sourceMappingURL=transactional-lib-edit.js.map