import { ContextMenuContent, ContextMenuItem, ContextMenuSubTrigger, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent } from "@/components/ui/context-menu"
import Link from "next/link"
import { ComponentProps, useState } from "react"
import { Row, Table, TableState } from "@tanstack/react-table"

export default function FormContextMenu({ table, row, openEditDialog, openDeleteDialog }: ComponentProps<"div"> & { table: Table<any>, row: Row<any>, openEditDialog: (row: Row<any>) => void, openDeleteDialog: (row: Row<any>) => void }) {
  const pathname = table.options.meta.pathname
  const selectedRows = table.getSelectedRowModel().flatRows


  return (
    <ContextMenuContent >
      {pathname !== "/submission" && selectedRows.length <= 1 ?
        <>
          <Link href={`${pathname}/${row.original.id}`}>
            <ContextMenuItem>Inspect</ContextMenuItem>
          </Link>
        </>
        : ""
      }

      <ContextMenuItem onClick={() => openEditDialog(row)}>
        Edit
      </ContextMenuItem>

      {
        selectedRows.length > 0 ?
          <ContextMenuItem onClick={() => { table.resetRowSelection() }}>Deselect</ContextMenuItem>
          : ""
      }
      <ContextMenuSeparator />
      <ContextMenuItem className="text-destructive" onClick={() => openDeleteDialog(row)}>Delete</ContextMenuItem>
    </ContextMenuContent>

  )
}