import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, RecordView, RecordViewActions, RecordViewItem, RecordViewItemList, SectionListSection, SectionListSectionContent, SectionListSectionDescription, SectionListSectionHeader, SectionListSectionTitle, useConfirmDialog, } from '@baseplate-dev/ui-components';
import { useState } from 'react';
import { useFieldArray, useWatch } from 'react-hook-form';
import { storageAdapterEntityType } from '../schema/plugin-definition.js';
import { AdapterDialog } from './adapter-dialog.js';
function AdapterEditorForm({ className, control }) {
    const { requestConfirm } = useConfirmDialog();
    const { append, update, remove } = useFieldArray({
        control,
        name: 's3Adapters',
    });
    const [adapterToEdit, setAdapterToEdit] = useState();
    const [isEditing, setIsEditing] = useState(false);
    const adapters = useWatch({ control, name: 's3Adapters' });
    function handleSaveAdapter(newAdapter) {
        const existingIndex = adapters.findIndex((adapter) => adapter.id === newAdapter.id);
        if (existingIndex === -1) {
            append(newAdapter);
        }
        else {
            update(existingIndex, newAdapter);
        }
    }
    function handleDeleteAdapter(adapterIdx) {
        const adapter = adapters[adapterIdx];
        requestConfirm({
            title: 'Delete Adapter',
            content: `Are you sure you want to delete the adapter "${adapter.name}"?`,
            onConfirm: () => {
                remove(adapterIdx);
            },
        });
    }
    return (_jsxs(SectionListSection, { className: className, children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "S3 Adapters" }), _jsx(SectionListSectionDescription, { children: "Configure S3 storage adapters for file uploads. Each adapter can have its own bucket and configuration." })] }), _jsxs(SectionListSectionContent, { className: "storage:space-y-4", children: [adapters.map((adapter, adapterIdx) => (_jsxs(RecordView, { children: [_jsxs(RecordViewItemList, { children: [_jsx(RecordViewItem, { title: "Name", children: _jsx("div", { className: "storage:flex storage:items-center storage:gap-2", children: _jsx("span", { children: adapter.name }) }) }), _jsx(RecordViewItem, { title: "Bucket Config Variable", children: adapter.bucketConfigVar || (_jsx("span", { className: "storage:text-muted-foreground", children: "Not configured" })) }), _jsx(RecordViewItem, { title: "URL Prefix Config Variable", children: adapter.hostedUrlConfigVar ?? (_jsx("span", { className: "storage:text-muted-foreground", children: "Not configured" })) })] }), _jsxs(RecordViewActions, { children: [_jsx(Button, { variant: "ghost", size: "icon", title: "Edit", "aria-label": "Edit adapter", onClick: () => {
                                            setAdapterToEdit(adapter);
                                            setIsEditing(true);
                                        }, children: "Edit" }), _jsx(Button, { variant: "ghostDestructive", size: "icon", title: "Delete", "aria-label": "Delete adapter", onClick: () => {
                                            handleDeleteAdapter(adapterIdx);
                                        }, children: "Delete" })] })] }, adapter.id))), _jsx(AdapterDialog, { open: isEditing, onOpenChange: setIsEditing, adapter: adapterToEdit, isNew: adapterToEdit
                            ? !adapters.some((a) => a.id === adapterToEdit.id)
                            : true, onSave: handleSaveAdapter }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
                            setAdapterToEdit({
                                id: storageAdapterEntityType.generateNewId(),
                                name: '',
                                bucketConfigVar: '',
                                hostedUrlConfigVar: '',
                            });
                            setIsEditing(true);
                        }, children: "Add Adapter" })] })] }));
}
export default AdapterEditorForm;
//# sourceMappingURL=adapter-editor-form.js.map