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

import React, { useMemo } from "react";

import TaskItem from "@/components/tasks/TaskItem";
import {
  EmplyPlaceHolder,
  EmptyContent,
  EmptyIcon,
  EmptyTitle,
} from "@/components/EmplyPlaceHolder";
import { formatDate } from "@/lib/utils";

const TeamRecentlyModified = () => {
  const [tasks] = trpc.tasks.getTasks.useSuspenseQuery({});

  const recentlyModifiedTasks = useMemo(() => {
    if(!tasks?.length) return []
    return tasks
      .filter((task) => task.startDate >= formatDate(new Date()))
      .map(item=>item)
      .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime())
      .slice(0,5) 
  }, [tasks]);
  

  return (
    <div className="space-y-1.5 overflow-y-auto   py-2  rounded-sm min-h-[100px]">
      {!recentlyModifiedTasks?.length ? (
        <EmplyPlaceHolder>
             <EmptyIcon  iconName="notFoundCat" className="text-primary/80"></EmptyIcon>
             <EmptyTitle className="text-sm">
            No hay tareas modificadas recientemente...
          </EmptyTitle>
        </EmplyPlaceHolder>
      ) : null}
      {recentlyModifiedTasks?.map(({tasks}) => (
        tasks.map(task=>(
          <TaskItem
          key={task.startDate}
          task={task as any}
          isTeamTask={true}
          isRecentModify={true}
        />
        ))
      ))}
    </div>
  );
};

export default TeamRecentlyModified;