"use client";

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { TaskViewProps } from "../TaskView";
import { getColor } from "@/lib/ui/color";
import TableTask from "./Task";

export function TableView({ tasks, setTasks, tags }: TaskViewProps) {
  const tasksArray = Object.values(tasks).sort(
    (a, b) => b.createdAt - a.createdAt,
  );

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Title</TableHead>
          <TableHead>Description</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Tags</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {tasksArray.length === 0 ? (
          <TableRow>
            <TableCell
              colSpan={5}
              className="text-center text-muted-foreground"
            >
              No tasks yet
            </TableCell>
          </TableRow>
        ) : (
          tasksArray.map((task) => (
            <TableTask
              key={task.id}
              task={task}
              setTask={(t) =>
                setTasks({
                  ...tasks,
                  [t.id]: t,
                })
              }
              tags={tags}
            />
          ))
        )}
      </TableBody>
    </Table>
  );
}