"use client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { ArrowUpDown, BookType, Clock, Drama, SquareArrowOutUpRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { PubWithGenres } from "./page"
import { TextInputCell } from "app/ui/tables/inputs/textInput"
import { selectCol } from "app/ui/tables/selectColumn"
import NumberInputCell from "app/ui/tables/inputs/numberInput"
import { pubSchema } from "app/ui/forms/schemas"
import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
import { genrePickerFilterFn } from "app/lib/filterFns"


const columnHelper = createColumnHelper<PubWithGenres>()

export const columns: ColumnDef<PubWithGenres>[] = [
  selectCol,
  {
    accessorKey: "title",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          <span className="hidden sm:block">
            Title
          </span>
          <span className="block sm:hidden"><BookType /></span>
          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
        </Button>
      )
    },
    cell: cell => (
      <>
        {/* @ts-ignore */}
        <p className="block text-xs max-w-24 break-words md:hidden">{cell.getValue()}</p>
        <TextInputCell cellContext={cell} className="hidden md:block" />
      </>
    ),
    meta: { formSchema: pubSchema }
  },

  {
    accessorKey: "link",
    header: () => (
      <div className="mx-auto w-fit">
        <span className="hidden sm:block">Link</span>
        <span className="block sm:hidden"><SquareArrowOutUpRight /></span>
      </div>
    ),
    cell: cell => (
      <>
        {/* @ts-ignore */}
        <p className="block text-xs max-w-16 truncate md:hidden">{cell.getValue()}</p>
        <TextInputCell cellContext={cell} className="hidden md:block" />
      </>
    ),
    meta: { formSchema: pubSchema }
  },

  columnHelper.accessor("genres", {
    header: () => (
      <div className="w-fit mx-auto">
        <span className="hidden sm:block">Genres</span>
        <span className="sm:hidden"><Drama /></span>
      </div>
    ),
    cell: GenrePickerInputCell,
    filterFn: genrePickerFilterFn
  }),


  {
    accessorKey: "query_after_days",
    header: () => (
      <div>
        <span className="hidden sm:block">Query After (days)</span>
        <span className="sm:hidden"><Clock /></span>
      </div>
    ),
    enableColumnFilter: false,
    cell: cell => (
      <>
        {/* @ts-ignore */}
        <p className="block md:hidden text-center">{cell.getValue()}</p>
        <NumberInputCell cellContext={cell} className="hidden md:block" />
      </>
    ),
    meta: {
      step: 10,
      formSchema: pubSchema
    },

  },
]