import AdminSetUserRoleForm from '@form/user/admin-set-user-role-form';
import useHasPermission from '@hooks/use-has-permission';
import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
import { m } from '@paraglide/messages';
import { UserGearIcon } from '@phosphor-icons/react';
import { Button } from '@ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@ui/dialog';
import { Label } from '@ui/label';
import { Tooltip, TooltipContent, TooltipTrigger } from '@ui/tooltip';
import { UserWithRole } from 'better-auth/plugins';
import { useState } from 'react';

type SetRoleProps = {
  data: UserWithRole;
};

const ChangeRoleAction = ({ data }: SetRoleProps) => {
  const [_open, _setOpen] = useState(false);
  const prevent = usePreventAutoFocus();
  const { hasPermission, isLoading } = useHasPermission('user', 'set-role');

  if (isLoading) return null;

  if (hasPermission) {
    return (
      <Dialog open={_open} onOpenChange={_setOpen}>
        <Tooltip>
          <TooltipTrigger asChild>
            <DialogTrigger asChild>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="rounded-full cursor-pointer text-yellow-500 hover:bg-yellow-100 hover:text-yellow-600"
              >
                <UserGearIcon size={16} />
                <span className="sr-only">{m.ui_change_role_btn()}</span>
              </Button>
            </DialogTrigger>
          </TooltipTrigger>
          <TooltipContent className="bg-yellow-500 [&_svg]:bg-yellow-500 [&_svg]:fill-yellow-500 text-white">
            <Label>{m.ui_change_role_btn()}</Label>
          </TooltipContent>
        </Tooltip>
        <DialogContent
          className="max-w-80 xl:max-w-sm"
          {...prevent}
          onPointerDownOutside={(e) => e.preventDefault()}
        >
          <DialogHeader>
            <DialogTitle className="flex items-center gap-3 text-lg font-bold text-yellow-600">
              <UserGearIcon size={16} />
              {m.ui_change_role_btn()}
            </DialogTitle>
            <DialogDescription className="sr-only">
              {m.ui_change_role_btn()}
            </DialogDescription>
          </DialogHeader>
          <AdminSetUserRoleForm data={data} onSubmit={_setOpen} />
        </DialogContent>
      </Dialog>
    );
  }
};

export default ChangeRoleAction;
