import UserInviteMemberForm from '@form/house/user-invite-member-form';
import useHasPermission from '@hooks/use-has-permission';
import usePreventAutoFocus from '@hooks/use-prevent-auto-focus';
import { m } from '@paraglide/messages';
import { PaperPlaneTiltIcon } from '@phosphor-icons/react';
import { Button } from '@ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@ui/dialog';
import { useState } from 'react';
import { Skeleton } from '../ui/skeleton';

type ActionProps = {};

const InviteUserAction = ({}: ActionProps) => {
  const { hasPermission, isLoading } = useHasPermission(
    'invitation',
    'create',
    true,
  );
  const [_open, _setOpen] = useState(false);
  const prevent = usePreventAutoFocus();

  if (isLoading) {
    return <Skeleton className="h-7 w-29.6 rounded-full" />;
  }

  if (!hasPermission) return null;

  return (
    <Dialog open={_open} onOpenChange={_setOpen}>
      <DialogTrigger asChild>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          className="rounded-full cursor-pointer bg-white text-black hover:bg-green-500 hover:text-white"
        >
          <PaperPlaneTiltIcon weight="fill" />
          {m.houses_user_page_action_invite_user()}
        </Button>
      </DialogTrigger>
      <DialogContent
        className="max-w-80 xl:max-w-lg"
        {...prevent}
        onPointerDownOutside={(e) => e.preventDefault()}
      >
        <DialogHeader>
          <DialogTitle className="flex items-center gap-3 text-lg font-bold text-green-600">
            <PaperPlaneTiltIcon size={16} weight="fill" />
            {m.houses_user_page_action_invite_user()}
          </DialogTitle>
          <DialogDescription className="sr-only">
            {m.houses_user_page_action_invite_user()}
          </DialogDescription>
        </DialogHeader>
        <UserInviteMemberForm onSubmit={_setOpen} />
      </DialogContent>
    </Dialog>
  );
};

export default InviteUserAction;
