import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { graphql, readFragment } from '%graphqlImports';
import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, MultiComboboxFieldController, } from '%reactComponentsImports';
import { useMutation } from '@apollo/client/react';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';
const roleFormSchema = z.object({
    roles: z.array(z.string()),
});
// Define available roles (excluding built-in roles)
const AVAILABLE_ROLES = TPL_AVAILABLE_ROLES;
export const roleManagerDialogUserFragment = graphql(`
  fragment RoleManagerDialog_user on User {
    id
    name
    email
    roles {
      role
    }
  }
`);
const updateUserRolesMutation = graphql(`
    mutation UpdateUserRoles($input: UpdateUserRolesInput!) {
      updateUserRoles(input: $input) {
        user {
          ...RoleManagerDialog_user
        }
      }
    }
  `, [roleManagerDialogUserFragment]);
/**
 * Dialog for managing user roles.
 * Allows admins to assign or remove roles from users.
 * Self-contained component that handles its own mutation logic.
 *
 * @param props - The component props
 * @param props.user - The user whose roles are being managed
 * @param props.open - Whether the dialog is open
 * @param props.onOpenChange - Callback when dialog open state changes
 * @returns The role manager dialog component
 */
export function RoleManagerDialog({ user, open, onOpenChange, }) {
    const [isSaving, setIsSaving] = useState(false);
    // Unmask the fragment data
    const userData = readFragment(roleManagerDialogUserFragment, user);
    const [updateUserRoles] = useMutation(updateUserRolesMutation);
    const form = useForm({
        resolver: zodResolver(roleFormSchema),
        defaultValues: {
            roles: userData.roles.map((r) => r.role),
        },
    });
    const handleSubmit = async (data) => {
        setIsSaving(true);
        try {
            await updateUserRoles({
                variables: {
                    input: { userId: userData.id, roles: data.roles },
                },
            });
            toast.success('Roles updated successfully');
            onOpenChange(false);
        }
        catch {
            toast.error('Failed to update roles');
        }
        finally {
            setIsSaving(false);
        }
    };
    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[500px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Manage Roles" }), _jsxs(DialogDescription, { children: ["Assign roles to ", userData.name ?? userData.email] })] }), _jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), children: [_jsx("div", { className: "py-4", children: _jsx(MultiComboboxFieldController, { control: form.control, name: "roles", label: "User Roles", description: "Select one or more roles for this user. Built-in roles like 'user' and 'public' are automatically assigned.", placeholder: "Search and select roles...", options: AVAILABLE_ROLES, getOptionLabel: (option) => option.label, getOptionValue: (option) => option.value, renderItemLabel: (option) => (_jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: option.label }), _jsx("span", { className: "text-xs text-muted-foreground", children: option.description })] })), noResultsText: "No roles found" }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
                                        onOpenChange(false);
                                    }, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: isSaving, children: "Save Roles" })] })] })] }) }));
}
//# sourceMappingURL=role-manager-dialog.js.map