"use client";
import { trpc } from "@/app/_trpc/client";
import { ProjectProgressBar } from "@/components/dashboard/ProjectProgressBar";
import { Hotel, House } from "lucide-react";
import React from "react";

const getProjectAreasStatus = (project: any) => {
  const allAreas = project?.floor
    ?.map((floor: any) => {
      return floor?.areas;
    })
    .flat();

  const areasCompleated = allAreas?.filter(
    (area: any) => area.status === "completada"
  );

  const compleatedPorcentage =
    (areasCompleated?.length / allAreas?.length) * 100 || 0;
  return {
    compleated: areasCompleated?.length ?? 0,
    totals: allAreas?.length ?? 0,
    compleatedPorcentage,
  };
};

const RecentWorkingProjects = () => {
  const [recentProjectStatus] = trpc.projects.getProjects.useSuspenseQuery({
    limit: 2,
    status: "en proceso",
  });

  return (
    <div className=" flex-grow w-full lg:flex lg:flex-col px-5 pt-3 min-w-[200px] h-full bg-white rounded-xl py-2 ">
      <h4 className="text-base font-bold mb-2">Projectos trabajando</h4>
      <div className=" flex-1 flex lg:flex-col w-full  gap-1 ">
        {recentProjectStatus.projects?.length === 0 && (
          <p className="text-center font-semibold mt-5 text-sm">
            Sin resultados...
          </p>
        )}
        {recentProjectStatus &&
          recentProjectStatus.projects?.map((project) => {
            return (
              <article
                key={project.id}
                className="py-2 flex justify-between gap-3    px-3  h-fit bg-gray-200 rounded-md max-w-[300px]  lg:w-full"
              >
                <div className="mb-0.5 gap-1 text-center">
                  <div className="flex items-center gap-1">
                    {project?.residence === "apartamento" ? (
                      <Hotel size={20} />
                    ) : (
                      <House size={20} />
                    )}
                    <p className=" first-letter:uppercase text-xs md:text-sm ">
                      {project.name}
                    </p>
                  </div>
                </div>
                <div className="">
                  {getProjectAreasStatus(project)?.compleatedPorcentage}%
                </div>
              </article>
            );
          })}
      </div>
    </div>
  );
};

export default RecentWorkingProjects;