"use client";
import {
  addLocalOffsetFromDate,
  cn,
  formatPricePesos,
  getStatusColor,
} from "@/lib/utils";
import Link from "next/link";
import { TbHomeEdit } from "react-icons/tb";
import { MdApartment } from "react-icons/md";
import { trpc } from "@/app/_trpc/client";
import moment from "moment";
import { EmplyPlaceHolder, EmptyContent, EmptyIcon, EmptyTitle } from "@/components/EmplyPlaceHolder";

const ProjectsList = ({
  searchParams,
}: {
  searchParams: Record<string, string>;
}) => {
  
  const [data] = trpc.projects.getProjects.useSuspenseQuery(searchParams, {
    refetchOnMount: false,
  });

  if(!data?.projects.length){
    return(
      <div className="min-h-[55vh] grid place-content-center">
      <EmplyPlaceHolder>
        <EmptyIcon iconName="notFoundCat" className="text-primary/80" />
        <EmptyTitle className="text-2xl mt-1 font-bold">Projectos no encotrados</EmptyTitle>
        <EmptyContent className="text-center">Intente distintos filtros de busqueda </EmptyContent>
      </EmplyPlaceHolder>
    </div>
  );
    
  }

 

  return (
    <div className=" mt-2 min-h-[80%]">
      <section className="">

        <div className="grid gap-5 pt-5 grid-cols-[repeat(auto-fill,minmax(270px,1fr))] ">
          {data?.projects?.map((project) => {
            return (
              <Link
                key={project?.id}
                href={`/dashboard/projects/${project?.id}`}
              >
                <article className="bg-white relative flex items-center gap-3 rounded-xl py-6 space-y-3 px-5">
                  <div className="absolute top-3 right-3 flex gap-2 justify-between">
                    <div
                      className={cn(
                        "text-xs px-2 pt-0.5 capitalize font-semibold rounded-xl",
                        getStatusColor(project?.status!)
                      )}
                    >
                      {project?.status}
                    </div>
                  </div>
                  <div
                    className={cn(
                      "h-20 w-20 rounded-2xl grid place-content-center text-center p-3",
                      project?.residence === "casa"
                        ? "bg-primary"
                        : "bg-slate-500"
                    )}
                  >
                    {project?.residence === "casa" ? (
                      <TbHomeEdit size={40} className="text-white" />
                    ) : (
                      <MdApartment size={40} className="text-white" />
                    )}
                  </div>
                  <div className="flex-1 min-w-0 pt-1">
                    <p className="text-sm font-semibold capitalize">
                      Nombre:{" "}
                      <span className="truncate overflow-hidden text-ellipsis whitespace-nowrap block max-w-[150px]">
                        {project?.name}
                      </span>
                    </p>
                    <p className="text-sm font-medium truncate overflow-hidden text-ellipsis">
                      Cotización:{" "}
                      {formatPricePesos(
                        (project?.totalCostMaterials || 0) +
                         (project?.totalCostPerMeter || 0) +
                          (project?.laborCost || 0)
                      )}
                    </p>
                
                  </div>
                </article>
              </Link>
            );
          })}
        </div>
      </section>
    </div>
  );
};

export default ProjectsList;