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 { fileCategoryEntityType } from '../schema/plugin-definition.js';
import { FileCategoryDialog } from './file-category-dialog.js';
function FileCategoryEditorForm({ className, control, }) {
    const { requestConfirm } = useConfirmDialog();
    const { append, update, remove } = useFieldArray({
        control,
        name: 'fileCategories',
    });
    const [categoryToEdit, setCategoryToEdit] = useState();
    const [isEditing, setIsEditing] = useState(false);
    const categories = useWatch({ control, name: 'fileCategories' }) ?? [];
    function handleSaveCategory(newCategory) {
        const existingIndex = categories.findIndex((cat) => cat.id === newCategory.id);
        if (existingIndex === -1) {
            append(newCategory);
        }
        else {
            update(existingIndex, newCategory);
        }
    }
    function handleDeleteCategory(categoryIdx) {
        const category = categories[categoryIdx];
        requestConfirm({
            title: 'Delete File Category',
            content: `Are you sure you want to delete the file category "${category.name}"?`,
            onConfirm: () => {
                remove(categoryIdx);
            },
        });
    }
    return (_jsxs(SectionListSection, { className: className, children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "File Categories" }), _jsx(SectionListSectionDescription, { children: "Configure file categories that define upload constraints, storage adapters, and authorization rules for file uploads." })] }), _jsxs(SectionListSectionContent, { className: "storage:space-y-4", children: [categories.map((category, categoryIdx) => (_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: category.name }) }) }), _jsxs(RecordViewItem, { title: "Max File Size", children: [category.maxFileSizeMb, " MB"] }), category.disableAutoCleanup ? (_jsx(RecordViewItem, { title: "Auto-Cleanup", children: _jsx("span", { className: "storage:text-muted-foreground", children: "Disabled" }) })) : null] }), _jsxs(RecordViewActions, { children: [_jsx(Button, { variant: "ghost", size: "icon", title: "Edit", "aria-label": "Edit file category", onClick: () => {
                                            setCategoryToEdit(category);
                                            setIsEditing(true);
                                        }, children: "Edit" }), _jsx(Button, { variant: "ghostDestructive", size: "icon", title: "Delete", "aria-label": "Delete file category", onClick: () => {
                                            handleDeleteCategory(categoryIdx);
                                        }, children: "Delete" })] })] }, category.id))), _jsx(FileCategoryDialog, { open: isEditing, onOpenChange: setIsEditing, category: categoryToEdit, isNew: categoryToEdit
                            ? !categories.some((c) => c.id === categoryToEdit.id)
                            : true, onSave: handleSaveCategory, parentControl: control }), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => {
                            setCategoryToEdit({
                                id: fileCategoryEntityType.generateNewId(),
                                name: '',
                                maxFileSizeMb: 20,
                                authorize: { uploadRoles: [] },
                                adapterRef: '',
                            });
                            setIsEditing(true);
                        }, children: "Add File Category" })] })] }));
}
export default FileCategoryEditorForm;
//# sourceMappingURL=file-category-editor-form.js.map