"use client";

import * as React from "react";

import { Progress } from "../ui/progress";

interface progress{
  compleated:number,
  totals:number,
  compleatedPorcentage:number
}

export function ProjectProgressBar({ project }:{project:any}) {
  const floorAreasStatus = React.useMemo(() => {
    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;
    return {
      compleated: areasCompleated?.length,
      totals: allAreas?.length,
      compleatedPorcentage
    };
  }, [project]);


  const [progress, setProgress] = React.useState<progress>({compleated:0,totals:0,compleatedPorcentage:0})
 
  React.useEffect(() => {
    const timer = setTimeout(() => setProgress(floorAreasStatus), 500)
    return () => clearTimeout(timer)
  }, [floorAreasStatus])
 
  return <div className="flex gap-1 items-center text-sm">
    <div>
      <span>{progress.compleated}</span>
      <span>/</span>
      <span>{progress.totals}</span>
    </div>
    <Progress value={progress.compleatedPorcentage}  className="w-[75%]" />
  </div>
}