"use client"

import { ColumnDef } from "@tanstack/react-table"
import { Checkbox } from "@/components/ui/checkbox"

import { DataTableColumnHeader } from "./column-header"

import { Video } from "@/app/types"
import { triggerDownload } from "@/lib/triggerDownload"
import { ChangeStatusButton } from "./change-status-button"

export const columns: ColumnDef<Video>[] = [
  /*
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
        className="translate-y-[2px]"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select video"
        className="translate-y-[2px]"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  */
  {
    accessorKey: "id",
    header: ({ column }) => null,
    cell: ({ row }) => null,
    enableSorting: false,
    enableHiding: true,
  },
  {
    accessorKey: "videoPrompt",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Prompt" />
    ),
    cell: ({ row: { original: { videoPrompt }} }) => (
      <div className="flex space-x-2">
        <span className="max-w-[500px] font-medium">{videoPrompt}</span>
      </div>
    ),
    enableSorting: false,
  },
  {
    accessorKey: "progressPercent",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Progress" />
    ),
    cell: ({ row: { original: { progressPercent, status }} }) => (
      <div className="flex items-center"><span>{
        status === "pending"
          ? `${Number(progressPercent || 0)}%`
        : status === "completed"
          ? "done"
          : status === "abort"
          ? "N.A."
          : status === "delete"
          ? "N.A."
        : status === "pause"
          ? "paused"
          : "N.A."
      }</span></div>
    ),
    enableSorting: false,
  },
  {
    id: "preview",
    header: ({ column }) => null,// no header
    cell: ({ row: { original: { ownerId, id, progressPercent } } }) => <div className="w-[100px]">
      <video src={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4?progress=${progressPercent || 0}`} muted />
    </div>,
    enableSorting: false,
    enableHiding: false,
  },
  {
    id: "save",
    header: ({ column }) => null,
    cell: ({ row: { original: { ownerId, id }} }) => <div className="">
      <a
        className="hover:underline cursor-pointer"
        target="_blank"
        href={`${process.env.NEXT_PUBLIC_DOWNLOAD_URL}/${ownerId}/${id}.mp4`}>Save</a>
    </div>,
    enableSorting: false,
    enableHiding: false,
  },
  {
    id: "scene",
    header: ({ column }) => null,
    cell: ({ row: { original } }) => {
      const scene = JSON.stringify({
        videoPrompt: original.videoPrompt,
        backgroundAudioPrompt: original.backgroundAudioPrompt,
        foregroundAudioPrompt: original.foregroundAudioPrompt,
        shots: original.shots.map(shot => ({
          shotPrompt: shot.shotPrompt,
          backgroundAudioPrompt: shot.backgroundAudioPrompt,
          foregroundAudioPrompt: shot.foregroundAudioPrompt,
          actorPrompt: shot.actorPrompt,
          actorVoicePrompt: shot.actorVoicePrompt,
          actorDialoguePrompt: shot.actorDialoguePrompt,
        }))
      }, null, 2)
      return (<div className="">
        <a
          className="hover:underline cursor-pointer"
          target="_blank"
          onClick={() => triggerDownload("scene.json", scene)}>Scene</a>
      </div>
      )
    },
    enableSorting: false,
    enableHiding: false,
  },
  {
    id: "status",
    header: ({ column }) => null, // no header
    cell: ({ row: { original, original: { status } } }) =>
      status === "pending" ? <ChangeStatusButton video={original} status="pause">Pause</ChangeStatusButton> :
      status === "pause" ? <ChangeStatusButton video={original} status="pending">Continue</ChangeStatusButton> :
      null,
    enableSorting: false,
    enableHiding: false,
  },

  {
    id: "delete",
    header: ({ column }) => null, // no header
    cell: ({ row: { original, original: { status } } }) =>
      <ChangeStatusButton video={original} status="delete">Delete</ChangeStatusButton>,
    enableSorting: false,
    enableHiding: false,
  },
  /*
  {
    id: "actions",
    cell: ({ row }) => <VideoActions row={row} />,
  },
  */
]