"use client";

import { trpc } from "@/app/_trpc/client";

import { formatDateSpecial } from "@/lib/utils";

import moment from "moment";

import TaskItem from "@/components/tasks/TaskItem";
import {
  EmplyPlaceHolder,
  EmptyIcon,
  EmptyTitle,
} from "@/components/EmplyPlaceHolder";
import useHandleParams from "@/hooks/useHandleParams";

const TeamTasksList = () => {

  const {getAllParams}=useHandleParams()
  const searchParams = getAllParams()
  const [tasks] = trpc.tasks.getTasks.useSuspenseQuery(searchParams, {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  });


  return (
    <div className="space-y-5 ">
      {searchParams?.q && tasks?.length! > 0 && (
        <p className="font-medium">
          Resultados para: <span className="font-light">{searchParams?.q}</span>
        </p>
      )}
      {tasks?.length === 0 && (
        <EmplyPlaceHolder>
             <EmptyIcon  iconName="notFoundCat" className="text-primary/80"></EmptyIcon>
             <EmptyTitle className="text-sm">
            Sin resultados...
          </EmptyTitle>
          
        </EmplyPlaceHolder>
      )}

      <div className="space-y-10">
        {tasks?.map(({ startDate, tasks: list }, index) => (
          <div key={startDate}>
            <h2 className="text-base font-medium first-letter:uppercase mb-2">
              {formatDateSpecial(moment(startDate).format("YYYY-MM-DD"))}
            </h2>
            <div className="space-y-2">
              {list?.map((task) => {
                return <TaskItem key={task.id} task={task as any} isTeamTask={true} />;
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TeamTasksList;