import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { authRoleEntityType } from '@baseplate-dev/project-builder-lib';
import { Badge, 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 { RoleDialog } from './role-dialog.js';
export function RoleEditorForm({ className, control, }) {
    const { requestConfirm } = useConfirmDialog();
    const { append, update, remove } = useFieldArray({
        control,
        name: 'roles',
    });
    const [roleToEdit, setRoleToEdit] = useState();
    const [isEditing, setIsEditing] = useState(false);
    const roles = useWatch({ control, name: 'roles' });
    function handleSaveRole(newRole) {
        const existingIndex = roles.findIndex((role) => role.id === newRole.id);
        if (existingIndex === -1) {
            append(newRole);
        }
        else {
            update(existingIndex, newRole);
        }
    }
    function handleDeleteRole(roleIdx) {
        const role = roles[roleIdx];
        requestConfirm({
            title: 'Delete Role',
            content: `Are you sure you want to delete the role "${role.name}"?`,
            onConfirm: () => {
                remove(roleIdx);
            },
        });
    }
    return (_jsxs(SectionListSection, { className: className, children: [_jsxs(SectionListSectionHeader, { children: [_jsx(SectionListSectionTitle, { children: "User Roles" }), _jsx(SectionListSectionDescription, { children: "Define roles for your application. Default roles are protected and cannot be removed." })] }), _jsxs(SectionListSectionContent, { className: "auth:space-y-4", children: [roles.map((role, roleIdx) => (_jsxs(RecordView, { children: [_jsxs(RecordViewItemList, { children: [_jsx(RecordViewItem, { title: "Name", children: _jsx("div", { className: "auth:flex auth:items-center auth:gap-2", children: _jsx("span", { children: role.name }) }) }), _jsx(RecordViewItem, { title: "Description", children: role.comment.trim() || (_jsx("span", { className: "auth:text-muted-foreground", children: "No description" })) })] }), _jsxs(RecordViewActions, { children: [role.builtIn && _jsx(Badge, { variant: "secondary", children: "Default Role" }), !role.builtIn && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "icon", title: "Edit", "aria-label": "Edit role", onClick: () => {
                                                    setRoleToEdit(role);
                                                    setIsEditing(true);
                                                }, children: _jsx(MdEdit, {}) }), _jsx(Button, { variant: "ghostDestructive", size: "icon", title: "Delete", "aria-label": "Delete role", onClick: () => {
                                                    handleDeleteRole(roleIdx);
                                                }, children: _jsx(MdDeleteOutline, {}) })] }))] })] }, role.id))), _jsx(RoleDialog, { open: isEditing, onOpenChange: setIsEditing, role: roleToEdit, isNew: roleToEdit ? !roles.some((r) => r.id === roleToEdit.id) : true, onSave: handleSaveRole }), _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => {
                            setRoleToEdit({
                                id: authRoleEntityType.generateNewId(),
                                name: '',
                                comment: '',
                                builtIn: false,
                            });
                            setIsEditing(true);
                        }, children: [_jsx(MdAdd, {}), "Add Role"] })] })] }));
}
//# sourceMappingURL=role-editor-form.js.map