import { toast } from 'sonner';
import {
  MoreHorizontal,
  EditIcon,
  Trash2Icon,
  LinkIcon,
  FilesIcon,
  CopyIcon,
} from 'lucide-react';

import { Button } from '@/components/ui/formsButton';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import ResponsesDialog from './ResponsesDialog';
import { useDeleteFormMutation } from '@/app/backend/endpoints/forms';

export default function DataTableRowActions({
  formId,
  formName,
}: {
  formId: string;
  formName: string;
}) {
  const [open, setOpen] = useState(false);
  const navigate = useNavigate();

  const [deleteForm, { isLoading }] = useDeleteFormMutation();

  const mutate = () => {
    deleteForm(formId)
      .unwrap()
      .then(() => {
        toast.success('Form deleted successfully');
      })
      .catch(() => {
        toast.error('Error deleting form');
      });
  };

  return (
    <DropdownMenu modal={false} open={open} onOpenChange={setOpen}>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          className="h-8 w-8 p-0 data-[state=open]:bg-muted"
          onClick={(e) => e.stopPropagation()}
        >
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="end"
        className="m-w-[160px]"
        onClick={(e) => e.stopPropagation()}
      >
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuItem
          className="flex items-center gap-2"
          onClick={() => navigator.clipboard.writeText(formId)}
        >
          <CopyIcon className="h-4 w-4 text-muted-foreground" />
          <span>Copy Id</span>
        </DropdownMenuItem>
        <DropdownMenuItem
          className="flex items-center gap-2"
          // navigator.clipboard.writeText(webSiteUrl/form/formId)
          onClick={() =>
            navigator.clipboard.writeText(
              window.location.origin + '/forms/' + formId
            )
          }
        >
          <LinkIcon className="h-4 w-4 text-muted-foreground" />
          <span>Copy Form Link</span>
        </DropdownMenuItem>
        {/* <DropdownMenuItem
          className="flex items-center gap-2"
          onClick={() =>
            window.open(
              window.location.origin + '/admin/forms/' + formId,
              '_blank'
            )
          }
        >
          <LinkIcon className="h-4 w-4 text-muted-foreground" />
          <span className="text-left">Open Form Link</span>
        </DropdownMenuItem> */}

        <ResponsesDialog
          formId={formId}
          formName={formName}
          closeHandler={() => setOpen(false)}
        >
          <DropdownMenuItem
            className="flex items-center gap-2"
            onSelect={(e) => e.preventDefault()}
          >
            <FilesIcon className="h-4 w-4 text-muted-foreground" />
            <span className="text-left">Show Responses</span>
          </DropdownMenuItem>
        </ResponsesDialog>
        <DropdownMenuItem
          className="flex items-center gap-2"
          onClick={() => navigate(formId + '/edit')}
        >
          <EditIcon className="h-4 w-4 text-muted-foreground" />
          <span>Edit</span>
        </DropdownMenuItem>

        <AlertDialog
          onOpenChange={(open) => {
            if (!open) setOpen(false);
          }}
        >
          <AlertDialogTrigger asChild>
            <DropdownMenuItem
              className="flex items-center gap-2"
              onSelect={(e) => e.preventDefault()}
            >
              <Trash2Icon className="h-4 w-4 text-muted-foreground" />
              <span>Delete</span>
            </DropdownMenuItem>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
              <AlertDialogDescription>
                This action cannot be undone. This will permanently delete your
                data and remove your data from db.
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter className="sm:space-x-4">
              <Button
                variant="destructive"
                isLoading={isLoading}
                onClick={() => {
                  mutate();
                }}
              >
                Yes, delete form
              </Button>
              <AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}