"use client";
import {
  TableCell,
  TableHead,
  TableRow,
} from "@/components/ui/table";
import ModifyTaskSidebar from "./ModifyTask";
import AlertDeleteTask from "./AlertDeleteTask";
import { cn, formatDate, getStatusColor } from "@/lib/utils";
import "moment/locale/es";
import { Infinity } from 'lucide-react';
import WorkingTaskTimer from "./WorkingTaskTimer";
import {  useState } from "react";
import { Task } from "@/server/task/domain/models";

const TaskRowList = ({ task }:{task:Task}) => {
  
  const [selectedTask, setselectedTask] = useState<Task | null>(null);

  
  return (
    <TableRow key={task.id}>
      <TableCell className="min-w-[120px] text-nowrap text-xs md:text-base">{task?.areaName}</TableCell>
      <TableCell className="text-nowrap text-sm md:text-base" >{task?.floorName}</TableCell>
      <TableCell className="text-nowrap text-sm md:text-base">{task?.user?.firstName}</TableCell>
      <TableCell >
        <span className={cn( " px-1 text-sm md:text-base md:px-3 font-light py-1 rounded-lg text-stone-50 capitalize text-nowrap", getStatusColor(task?.status))}>
        {task?.status}
        </span>
      </TableCell>
      <TableCell className="text-nowrap text-sm md:text-base">{task?.priority}</TableCell>
      <TableCell className="text-nowrap text-sm md:text-base">{task?.expireDate ? formatDate(task.expireDate): <Infinity/>}</TableCell>
      <TableCell className="text-nowrap text-sm md:text-base">{<WorkingTaskTimer status={task?.status! as any} startedTime={task?.startedTime!} endedTime={task?.endedTime!}/>}</TableCell>
      <TableHead>
        <div className="flex justify-end items-start gap-1">
          <button onClick={() => setselectedTask(task)}>
            <ModifyTaskSidebar isEmployeeEdit={false} selectedTask={selectedTask!} />
          </button>
          <button onClick={() => setselectedTask(task)}>
            <AlertDeleteTask selectedTask={selectedTask} />
          </button>
        </div>
      </TableHead>
    </TableRow>
  );
};

export default TaskRowList;