"use client";
import { trpc } from "@/app/_trpc/client";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { addLocalOffsetFromDate, cn, getStatusColor } from "@/lib/utils";
import moment from "moment";
import React from "react";

const RecentModifiedTasks = () => {
  const [taskData] = trpc.tasks.getRecentModifiedTasks.useSuspenseQuery(
    undefined,
    {
      refetchOnMount: false,
    }
  );

  return (
    <div className="flex flex-wrap-reverse bg-white gap-3 h-full rounded-xl">
      <div className="py-4 px-5  rounded-xl flex-1 overflow-x-auto  ">
        <h4 className="text-base font-bold mb-4">
          Tareas modificadas recientemente
        </h4>
        <Table className="">
          <TableHeader>
            <TableRow>
              <TableHead className="text-nowrap text-xs ">Projecto</TableHead>
              <TableHead className="text-nowrap text-xs ">Tarea</TableHead>
              <TableHead className="text-nowrap text-xs ">Piso</TableHead>
              <TableHead className="text-nowrap text-xs ">Asignado</TableHead>
              <TableHead className="text-nowrap text-xs ">Estado</TableHead>
              <TableHead className="text-nowrap text-xs ">Prioridad</TableHead>
              <TableHead className="text-nowrap text-xs ">Modificado</TableHead>
            </TableRow>
          </TableHeader>{" "}
          <TableBody className="">
            {taskData?.map((task) => (
              <TableRow key={task.id}>
                <TableCell className="min-w-[80px] text-nowrap text-xs ">
                  {task?.projectName}
                </TableCell>
                <TableCell className="text-nowrap text-xs ">
                  {task?.areaName}
                </TableCell>
                <TableCell className="text-nowrap text-xs ">
                  {task?.floorName}
                </TableCell>
                <TableCell className="text-nowrap text-xs ">
                  {task?.user?.firstName}
                </TableCell>
                <TableCell className="text-left">
                  <span
                    className={cn(
                      " text-xs font-light px-1.5 py-0.5 rounded-lg text-stone-50 capitalize text-nowrap",
                      getStatusColor(task?.status)
                    )}
                  >
                    {task?.status}
                  </span>
                </TableCell>
                <TableCell className="text-nowrap text-xs ">
                  {task?.priority}
                </TableCell>
                <TableCell className="text-nowrap text-xs ">
                  {moment(task?.updatedAt!).fromNow()}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        {taskData?.length === 0 && (
          <p className="text-center font-semibold mt-3 text-sm">
            Aun no hay tareas recientes...
          </p>
        )}
      </div>
    </div>
  );
};

export default RecentModifiedTasks;