import { Badge } from "@/components/ui/badge";
import { SheetTrigger } from "@/components/ui/sheet";
import { TableCell, TableRow } from "@/components/ui/table";
import { Task, Tag, TagId } from "@/lib/types";
import { Color, getColor } from "@/lib/ui/color";
import TaskEdit from "../edit/TaskEdit";
import { Button } from "@/components/ui/button";
import { Trash2 } from "lucide-react";

export default function TableTask({
  task,
  setTask,
  tags,
  onDelete,
}: {
  task: Task;
  setTask: (t: Task) => void;
  tags: Record<TagId, Tag>;
  onDelete?: (taskId: string) => void;
}) {
  return (
    <TaskEdit task={task} tags={tags} setTask={setTask}>
      <SheetTrigger asChild>
        <TableRow className="cursor-pointer hover:bg-accent">
          <TableCell className="font-medium">{task.title}</TableCell>
          <TableCell className="max-w-[250px] truncate">
            {task.description || "-"}
          </TableCell>
          <TableCell>
            <Badge variant="outline">{task.statusId}</Badge>
          </TableCell>
          <TableCell className="flex gap-1 items-center justify-between">
            <div className="flex gap-1">
              {task.tagIds?.map((tagId) => (
                <Badge
                  key={tagId}
                  variant="outline"
                  style={
                    tags[tagId]
                      ? getColor(tags[tagId].color || "#808080")
                      : undefined
                  }
                >
                  {tags[tagId]?.name || tagId}
                </Badge>
              ))}
            </div>
            {onDelete && (
              <Button
                size="sm"
                variant="ghost"
                onClick={(e) => {
                  e.stopPropagation();
                  onDelete(task.id);
                }}
              >
                <Trash2 className="h-4 w-4 text-red-500" />
              </Button>
            )}
          </TableCell>
        </TableRow>
      </SheetTrigger>
    </TaskEdit>
  );
}