"use client";

import { trpc } from "@/app/_trpc/client";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import useGroupTasks from "@/hooks/useGroupTasks";
import {
  cn,
  formatDateSpecial,
  getStatusColor,
} from "@/lib/utils";
import { TasksByDate } from "@/server/task/domain/models";



const UserTasksTabs = () => {
  const [tasks] = trpc.tasks.getTasks.useSuspenseQuery({onlyUserTask:true});



  const {rearrangedTaks}=useGroupTasks(tasks as TasksByDate[])
  
  if(!rearrangedTaks)return

  return (
    <div className="flex-1">
      <h2 className="text-xl md:text-3xl font-bold ml-3">Mis tareas</h2>
      <Tabs
        className="  min-h-[200px] md:min-h-[300px]  bg-transparent"
        defaultValue="Recientes"
      >
        <TabsList className="bg-transparent " asChild>
          <div className="flex gap-2 flex-nowrap  min-h-10 ">
            {Object.values(rearrangedTaks)?.map((item) => {
              return (
                <TabsTrigger
                  key={item.label}
                  value={item.label}
                  name={item.label}
                  className="text-xs md:text-base !bg-transparent !shadow-none"
                >
                  {item.label}
                </TabsTrigger>
              );
            })}
          </div>
        </TabsList>

        { Object.values(rearrangedTaks)?.map(({ label, list }) => {
          return (
            <TabsContent
              key={label}
              value={label}
              className="userTabContainer  h-[230px] px-2 text-center  overflow-y-scroll"
            >
              <div className="space-y-5">
                {list?.map((task) => {
                  return (
                    <article
                      key={task.id}
                      className="relative py-4 px-3 justify-between rounded-md bg-white border-l-2"
                    >
                      <div
                        className={cn(
                          "w-[6px] rounded-l-md h-full text-nowrap absolute grid place-content-center left-0 top-0 bottom-0 ",
                          getStatusColor(task?.status)
                        )}
                      ></div>

                      <div className="">
                        <div className="flex gap-5">
                          <div>
                            <p className="text-xs space-x-2 first-letter:uppercase font-light">
                              <span>{formatDateSpecial(task?.startDate!)}</span>
                              <span>
                                {task?.expireDate
                                  ? formatDateSpecial(task?.expireDate)
                                  : "-"}
                              </span>
                            </p>
                          </div>
                        </div>
                      </div>

                      <div>
                        <p className="space-x-0.5 text-base font-bold text-start">
                          <span>{task?.projectName}</span>
                          <span>-</span>
                          <span>{task?.floorName}</span>
                        </p>
                        <p className="text-start text-gray-500">{task?.areaName}</p>
                        <p className="text-xs text-gray-500 text-left">
                          {task?.comments}
                        </p>
                      </div>
                    </article>
                  );
                })}
                {!list ||
                  (list.length === 0 && (
                    <span className=" text-xs md:text-base block mt-20 text-primary font-semibold">
                      No hay resultados...
                    </span>
                  ))}
              </div>
            </TabsContent>
          );
        })}
      </Tabs>
    </div>
  );
};

export default UserTasksTabs;