import { ExternalAdminPermissionSelector } from "@/features/external-admin-users/components/ExternalAdminPermissionSelector.jsx";
import styles from "@/features/external-admin-users/external-admin-users.module.css";
import { Button } from "@/shared/ui/Button.jsx";
import { SideDrawer } from "@/shared/ui/SideDrawer.jsx";

export function ExternalAdminPermissionDrawer({
    abilities,
    catalog,
    catalogError,
    catalogLoading,
    error,
    loading,
    onChange,
    onClose,
    onReloadCatalog,
    onRetry,
    onSubmit,
    permissions,
    permissionsLoading,
    user,
}) {
    const open = Boolean(user);
    const unavailable = Boolean(
        !catalog.length || catalogError || error || catalogLoading || permissionsLoading || loading,
    );

    return (
        <SideDrawer
            actions={
                <>
                    <Button disabled={loading} onClick={onClose}>
                        取消
                    </Button>
                    <Button
                        disabled={!abilities.canManagePermissions || unavailable}
                        variant="primary"
                        onClick={onSubmit}
                    >
                        {loading ? "保存中" : "保存权限"}
                    </Button>
                </>
            }
            contentClassName={styles.permissionDrawerBody}
            open={open}
            title={`配置权限${user?.username ? ` · ${user.username}` : ""}`}
            width="detail"
            onClose={onClose}
        >
            <ExternalAdminPermissionSelector
                catalog={catalog}
                disabled={!abilities.canManagePermissions || loading}
                error={catalogError || error}
                loading={catalogLoading || permissionsLoading}
                value={permissions}
                onChange={onChange}
                onRetry={catalogError ? onReloadCatalog : error ? onRetry : undefined}
            />
        </SideDrawer>
    );
}
