import { useState } from "react";
import { useRouter } from "next/navigation";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { MoreHorizontal } from "lucide-react";
import { generateShareToken } from "@/app/(sharing)/[token]/token";

interface ActionsCellProps {
  row: any; //unsure what to use here
}

const ActionsCell: React.FC<ActionsCellProps> = ({ row }) => {
  const [error, setError] = useState<string>("");
  const router = useRouter();

  const handleGenerateShareToken = async () => {
    const { token, error } = await generateShareToken(row.original.id);
    if (error) {
      setError(error);
    } else {
      const newTab = window.open(`/${token}/${row.original.id}`);
      if (newTab) {
        newTab.focus();
      } else {
        router.push(`/${token}/${row.original.id}`);
      }
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="h-8 w-8 p-0">
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={handleGenerateShareToken}>
          Share Song
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default ActionsCell;