import { useTranslation } from 'react-i18next';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { trpc } from '@/lib/trpc';
import { useNotify } from '@/hooks/useNotify';

interface FolderUnlinkDialogProps {
  projectId: string;
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

export function FolderUnlinkDialog({
  projectId,
  open,
  onOpenChange,
}: FolderUnlinkDialogProps) {
  const { t } = useTranslation();
  const { notifyError } = useNotify();
  const utils = trpc.useUtils();
  const unlink = trpc.projectFolders.unlink.useMutation({
    onSuccess: () => {
      utils.projects.get.invalidate({ id: projectId });
      utils.projectFolders.listFiles.invalidate({ projectId });
      onOpenChange(false);
    },
    onError: (err) => notifyError('errors.error', err),
  });

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t('projects.folder.unlink')}</DialogTitle>
          <DialogDescription>
            {t('projects.deleteProjectDescription')}
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="ghost" onClick={() => onOpenChange(false)}>
            {t('common.cancel')}
          </Button>
          <Button
            variant="destructive"
            onClick={() => unlink.mutate({ projectId })}
            disabled={unlink.isPending}
          >
            {unlink.isPending ? t('common.deleting') : t('projects.folder.unlink')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
