"use client";

import { trpc } from "@/app/_trpc/client";
import {
  formatDateSpecial,
} from "@/lib/utils";

import moment from "moment";

import FilterTasksByState from "@/components/tasks/FilterTasksByState";
import TaskItem from "@/components/tasks/TaskItem";
import { EmplyPlaceHolder, EmptyContent, EmptyIcon, EmptyTitle } from "@/components/EmplyPlaceHolder";
import { Task } from "@/server/task/domain/models";


const TasksListUser = ({ searchParams }: {
  searchParams: Record<string, string>;
}) => { 
  const  {data:tasks,error} = trpc.tasks.getTasks.useQuery(
    {...searchParams,onlyUserTask:true},
    {
      refetchOnMount: false,
      refetchOnWindowFocus: false,
    }
  );

  
  return (
    <div className="space-y-5 ">
     <FilterTasksByState/>
      <div className="space-y-10">
        {tasks?.length === 0 ? (
           <div className="min-h-[300px] grid place-content-center">
           <EmplyPlaceHolder>
           <EmptyIcon  iconName="notFoundCat" className="text-primary/80"></EmptyIcon>
           <EmptyTitle className="text-base">No tareas encontradas...</EmptyTitle>
             <EmptyContent>Intente limpiar filtros u otros parametros de busqueda.</EmptyContent>
           </EmplyPlaceHolder>
         </div>
        ) : null}
        {tasks?.map(({ startDate, tasks: list }, index) => {
          return (
            <div key={index}>
              <h2 className="text-xl 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 Task} isTeamTask={false}/>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default TasksListUser;