import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { authConfigSpec } from '@baseplate-dev/project-builder-lib';
import { useProjectDefinition } from '@baseplate-dev/project-builder-lib/web';
import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, InputFieldController, MultiComboboxFieldController, } from '@baseplate-dev/ui-components';
import { zodResolver } from '@hookform/resolvers/zod';
import { useId, useMemo } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import '#src/styles.css';
const planFormSchema = z.object({
    id: z.string(),
    key: z
        .string()
        .min(1, 'Plan key is required')
        .regex(/^[a-z0-9-]+$/, 'Must be kebab-case (e.g. pro-plan)'),
    displayName: z.string().min(1, 'Display name is required'),
    grantedRoles: z.array(z.string()).default([]),
});
export function PlanDialog({ open, onOpenChange, plan, isNew = false, onSave, }) {
    const { definition, definitionContainer } = useProjectDefinition();
    const authConfig = definitionContainer.pluginStore.use(authConfigSpec);
    const availableRoles = useMemo(() => {
        const config = authConfig.getAuthConfig(definition);
        return (config?.roles ?? [])
            .filter((r) => !r.builtIn)
            .map((r) => ({
            id: r.id,
            name: r.name,
            comment: r.comment,
        }));
    }, [authConfig, definition]);
    const authPluginUrl = authConfig.pluginKey
        ? `/plugins/edit/${authConfig.pluginKey}`
        : undefined;
    const form = useForm({
        resolver: zodResolver(planFormSchema),
        values: plan,
    });
    const { control, handleSubmit } = form;
    const onSubmit = handleSubmit((data) => {
        onSave(data);
        onOpenChange?.(false);
    });
    const formId = useId();
    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { children: _jsxs("form", { id: formId, onSubmit: (e) => {
                    e.stopPropagation();
                    return onSubmit(e);
                }, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isNew ? 'Add Plan' : 'Edit Plan' }), _jsx(DialogDescription, { children: isNew
                                    ? 'Enter the details for the new billing plan.'
                                    : 'Update the plan details below.' })] }), _jsxs("div", { className: "payments:space-y-4 payments:py-4", children: [_jsx(InputFieldController, { label: "Plan Key", name: "key", control: control, placeholder: "e.g. pro-plan", description: "Kebab-case identifier used in code and Stripe metadata" }), _jsx(InputFieldController, { label: "Display Name", name: "displayName", control: control, placeholder: "e.g. Pro Plan" }), _jsxs("div", { children: [_jsx(MultiComboboxFieldController, { label: "Granted Roles", name: "grantedRoles", control: control, options: availableRoles, getOptionLabel: (role) => role.name, getOptionValue: (role) => role.id, placeholder: "Select roles...", description: "Auth roles granted when this plan is active" }), authPluginUrl ? (_jsxs("p", { className: "payments:mt-1 payments:text-xs payments:text-muted-foreground", children: ["Manage roles in the", ' ', _jsx("a", { href: authPluginUrl, className: "payments:underline payments:hover:text-foreground", children: "Auth plugin settings" }), "."] })) : null] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                    onOpenChange?.(false);
                                }, children: "Cancel" }), _jsxs(Button, { form: formId, type: "submit", children: [isNew ? 'Add' : 'Update', " Plan"] })] })] }) }) }));
}
//# sourceMappingURL=plan-dialog.js.map