'use client';
import React from 'react';
import { Loader, Trash } from 'lucide-react';
import { useMediaQuery } from '@/hooks/use-media-query';
import {
  Dialog,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogClose,
  DialogContent,
  DialogTrigger,
  DialogDescription
} from '@/components/ui/dialog';
import {
  Drawer,
  DrawerClose,
  DrawerTitle,
  DrawerFooter,
  DrawerHeader,
  DrawerTrigger,
  DrawerContent,
  DrawerDescription,
} from '@/components/ui/drawer';
import { Button } from '@/components/ui/button';

interface DeleteCommentDialogProps
  extends React.ComponentPropsWithoutRef<typeof Dialog> {
  commentId: string;
  postId: string;
  showTrigger?: boolean;
  onSuccess?: () => void;
}

export function DeleteCommentDialog({
  commentId,
  showTrigger = true,
  onSuccess,
  ...props
}: DeleteCommentDialogProps) {
  const [open, setOpen] = React.useState(false);
  const isDesktop = useMediaQuery('(min-width: 640px)');

  function onDelete() {
    // deleteCommentMutation.mutate(
    //   { id: commentId },
    //   {
    //     onSuccess: () => {
    //       setOpen(false);
    //       onSuccess?.();
    //     }
    //   }
    // );
  }

  if (isDesktop) {
    return (
      <Dialog open={open} onOpenChange={setOpen} {...props}>
        {showTrigger ? (
          <DialogTrigger asChild>
            <Button variant='ghost' size='sm'>
              <Trash className='size-4' aria-hidden='true' />
              Delete
            </Button>
          </DialogTrigger>
        ) : null}
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Are you absolutely sure?</DialogTitle>
            <DialogDescription>
              This action cannot be undone. This will permanently delete your
              comment.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className='gap-2 sm:space-x-0'>
            <DialogClose asChild>
              <Button variant='outline'>Cancel</Button>
            </DialogClose>
            {/* <Button
              aria-label='Delete comment'
              variant='destructive'
              onClick={onDelete}
              disabled={deleteCommentMutation.isPending}
            >
              {deleteCommentMutation.isPending && (
                <Loader
                  className='mr-2 size-4 animate-spin'
                  aria-hidden='true'
                />
              )}
              Delete
            </Button> */}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  }

  return (
    <Drawer open={open} onOpenChange={setOpen} {...props}>
      {showTrigger ? (
        <DrawerTrigger asChild>
          <Button variant='ghost' size='sm'>
            <Trash className='size-4' aria-hidden='true' />
            Delete
          </Button>
        </DrawerTrigger>
      ) : null}
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Are you absolutely sure?</DrawerTitle>
          <DrawerDescription>
            This action cannot be undone. This will permanently delete your
            comment.
          </DrawerDescription>
        </DrawerHeader>
        <DrawerFooter className='gap-2 sm:space-x-0'>
          {/* <Button
            aria-label='Delete comment'
            variant='destructive'
            onClick={onDelete}
            disabled={deleteCommentMutation.isPending}
          >
            {deleteCommentMutation.isPending && (
              <Loader className='mr-2 size-4 animate-spin' aria-hidden='true' />
            )}
            Delete
          </Button> */}
          <DrawerClose asChild>
            <Button variant='outline'>Cancel</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}