"use client"
import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { ArrowUpDown, BookText, CalendarMinus, CalendarPlus, MessageCircleReply, NotepadText } from "lucide-react"
import { Button } from "@/components/ui/button"
import { SubComplete } from "./page"
import { selectCol } from "app/ui/tables/selectColumn"
import TitleContainer from "app/ui/titleContainer"
import { CalendarArrowUp } from "lucide"



export const columns: ColumnDef<SubComplete>[] = [
  selectCol,
  {
    accessorFn: row => {
      if (row.story) {
        return row.story.title
      }
      return "RECORD DELETED"
    },
    id: "story",
    header: () => (
      <>
        <span className="hidden md:block">Story</span>
        <NotepadText className="block md:hidden" />
      </>
    ),
    cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
  },
  {
    accessorFn: row => {
      if (row.pub) {
        return row.pub.title
      }
      return "RECORD DELETED"
    },
    id: "pub",
    header: () => (
      <>
        <span className="hidden md:block">Publication</span>
        <BookText className="block md:hidden" />
      </>
    ),
    cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
  },
  {
    accessorFn: row => new Date(row.submitted),
    id: "submitted",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          className="p-0"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          <span className="hidden md:block"> Date Submitted </span>
          <CalendarPlus className="block md:hidden" />
          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
    cell: (props: CellContext<any, any>) => (
      <p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
        day: 'numeric',
        month: 'numeric',
        year: '2-digit'
      })}</p>
    )
  },
  {
    accessorFn: row => row.responded ? new Date(row.responded) : null,
    id: "responded",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          className="p-0"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          <span className="hidden md:block"> Date Responded </span>
          <CalendarMinus className="block md:hidden" />
          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
        </Button>
      )
    },
    enableColumnFilter: false,
    sortingFn: "datetime",
    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
      day: 'numeric',
      month: 'numeric',
      year: '2-digit'
    })}</p>)
  },
  {
    accessorFn: row => {
      if (row.response) {
        return row.response.response
      }
      return "RECORD DELETED"
    },
    id: "response",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          className="p-0"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          <span className="hidden md:block"> Response </span>
          <MessageCircleReply className="block md:hidden" />
          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
        </Button>
      )
    },
    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
  },

]