"use client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { ArrowUpDown, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Trash2, Search } from "lucide-react"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { deleteStory, deleteSub } from "app/lib/del"
import Link from "next/link"
import { SubComplete } from "./page"


const columnHelper = createColumnHelper<SubComplete>()

export const columns: ColumnDef<SubComplete>[] = [
  {
    accessorFn: row => new Date(row.submitted),
    id: "submitted",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Date Submitted
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
    cell: props => { return props.getValue().toLocaleDateString() }
  },
  {
    accessorFn: row => new Date(row.responded),
    id: "responded",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Date Responded
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
    cell: props => { return props.getValue().toLocaleDateString() }
  },
  {
    accessorFn: row => {
      if (row.response) {
        return row.response.response
      }
      return "RECORD DELETED"
    },
    id: "response",
    header: "Response"
  },
  {
    accessorFn: row => {
      if (row.pub) {
        return row.pub.title
      }
      return "RECORD DELETED"
    },
    id: "pub",
    header: "Publication"
  },
  {
    accessorFn: row => {
      if (row.story) {
        return row.story.title
      }
      return "RECORD DELETED"
    },
    id: "story",
    header: "Story"
  },


  {
    id: "actions",
    // header: "Actions",
    cell: ({ row }) => {
      return <div className="flex items-center justify-around">
        <Link href={`/submission/${row.original.id}`}><Search /></Link>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="ghost"><Trash2 color="red" /></Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Are you sure?</DialogTitle>
              <DialogDescription>
                Deleting a submission cannot be undone!
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose asChild>
                <Button variant="destructive"
                  onClick={() => {
                    deleteSub(row.original.id)
                  }}>Yes, delete it!
                </Button>
              </DialogClose>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    }
  }

]