import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useProjectDefinition } from '@baseplate-dev/project-builder-lib/web';
import { Button, RecordView, RecordViewActions, RecordViewItem, RecordViewItemList, SectionListSection, SectionListSectionContent, SectionListSectionDescription, SectionListSectionHeader, SectionListSectionTitle, useConfirmDialog, } from '@baseplate-dev/ui-components';
import { useFieldArray } from '@hookform/lenses/rhf';
import { useState } from 'react';
import { useWatch } from 'react-hook-form';
import { MdAdd, MdDeleteOutline, MdEdit } from 'react-icons/md';
import { billingPlanEntityType } from '../schema/plugin-definition.js';
import { PlanDialog } from './plan-dialog.js';
import '#src/styles.css';
export function PlanEditorForm({ control }) {
    const { requestConfirm } = useConfirmDialog();
    const { append, update, remove } = useFieldArray({
        control,
        name: 'billing.plans',
    });
    const { definitionContainer } = useProjectDefinition();
    const [planToEdit, setPlanToEdit] = useState();
    const [isEditing, setIsEditing] = useState(false);
    const watchedPlans = useWatch({ control, name: 'billing.plans' });
    const plans = (watchedPlans ??
        []);
    function handleSavePlan(newPlan) {
        const existingIndex = plans.findIndex((p) => p.id === newPlan.id);
        if (existingIndex === -1) {
            append(newPlan);
        }
        else {
            update(existingIndex, newPlan);
        }
    }
    function handleDeletePlan(planIdx) {
        const plan = plans[planIdx];
        requestConfirm({
            title: 'Delete Plan',
            content: `Are you sure you want to delete the plan "${plan.displayName}"?`,
            onConfirm: () => {
                remove(planIdx);
            },
        });
    }
    return (_jsxs(SectionListSection, { children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "Subscription Plans" }), _jsx(SectionListSectionDescription, { children: "Define the subscription plans available to your users. Each plan generates a config entry with placeholder Stripe Price IDs that you replace with your actual IDs." })] }), _jsxs(SectionListSectionContent, { className: "payments:space-y-4", children: [plans.map((plan, planIdx) => (_jsxs(RecordView, { children: [_jsxs(RecordViewItemList, { children: [_jsx(RecordViewItem, { title: "Key", children: plan.key }), _jsx(RecordViewItem, { title: "Display Name", children: plan.displayName }), _jsx(RecordViewItem, { title: "Granted Roles", children: plan.grantedRoles.length > 0 ? (plan.grantedRoles
                                            .map((role) => definitionContainer.nameFromId(role))
                                            .join(', ')) : (_jsx("span", { className: "payments:text-muted-foreground", children: "None" })) })] }), _jsxs(RecordViewActions, { children: [_jsx(Button, { variant: "ghost", size: "icon", title: "Edit", "aria-label": "Edit plan", onClick: () => {
                                            setPlanToEdit(plan);
                                            setIsEditing(true);
                                        }, children: _jsx(MdEdit, {}) }), _jsx(Button, { variant: "ghostDestructive", size: "icon", title: "Delete", "aria-label": "Delete plan", onClick: () => {
                                            handleDeletePlan(planIdx);
                                        }, children: _jsx(MdDeleteOutline, {}) })] })] }, plan.id))), _jsx(PlanDialog, { open: isEditing, onOpenChange: setIsEditing, plan: planToEdit, isNew: planToEdit ? !plans.some((p) => p.id === planToEdit.id) : true, onSave: handleSavePlan }), _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => {
                            setPlanToEdit({
                                id: billingPlanEntityType.generateNewId(),
                                key: '',
                                displayName: '',
                                grantedRoles: [],
                            });
                            setIsEditing(true);
                        }, children: [_jsx(MdAdd, {}), "Add Plan"] })] })] }));
}
//# sourceMappingURL=plan-editor-form.js.map