import AdminUpdateUserInfoForm from '@form/user/admin-update-user-info-form';
import useHasPermission from '@hooks/use-has-permission';
import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
import { m } from '@paraglide/messages';
import { PenIcon } 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 EditUserProps = {
  data: UserWithRole;
};

const EditUserAction = ({ data }: EditUserProps) => {
  const [_open, _setOpen] = useState(false);
  const prevent = usePreventAutoFocus();
  const { hasPermission, isLoading } = useHasPermission('user', 'update');

  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-blue-500 hover:bg-blue-100 hover:text-blue-600"
              >
                <PenIcon size={16} />
                <span className="sr-only">{m.ui_edit_user_btn()}</span>
              </Button>
            </DialogTrigger>
          </TooltipTrigger>
          <TooltipContent className="bg-blue-500 [&_svg]:bg-blue-500 [&_svg]:fill-blue-500 text-white">
            <Label>{m.ui_edit_user_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-blue-600">
              <PenIcon size={16} /> {m.ui_edit_user_btn()}
            </DialogTitle>
            <DialogDescription className="sr-only">
              {m.ui_edit_user_btn()}
            </DialogDescription>
          </DialogHeader>
          <AdminUpdateUserInfoForm data={data} onSubmit={_setOpen} />
        </DialogContent>
      </Dialog>
    );
  }

  return null;
};

export default EditUserAction;