import React, { useEffect } from "react";
import RenderOverlay from "./Overlay";
import { LogoIconLarge } from "../icons/Logo";
import { useParams } from "react-router-dom";
import { useProjectName } from "../../store/builder/store";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { useComparisonProduct } from "../../store/simulation/useSimulationStore";
import { getUserData } from "../../functions/getUserData";

interface LoadingPageProps {
  progress: number; // Expect progress as a percentage (0-100)
}

const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
  const { projectName, setProjectName } = useProjectName();
  const { projectId } = useParams();
  const { comparisonProduct } = useComparisonProduct();
  const { userId, organization } = getUserData();

  const validatedProgress = Math.min(100, Math.max(0, progress));

  useEffect(() => {
    if (!userId) return;

    getAllProjects(userId, organization).then((projects) => {
      const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
      if (filterProject) {
        setProjectName(filterProject.projectName);
      }
    }).catch((error) => {
      console.log(error);
    })
  }, []);

  return (
    <RenderOverlay>
      <div
        className={`loading-wrapper ${comparisonProduct != null ? "comparisionLoading" : ""
          }`}
      >
        <div className="loading-container">
          <div className="project-name">{projectName}</div>
          <div className="loading-hero-container">
            <div className="logo">
              <LogoIconLarge />
            </div>
            <div className="content">Entering A New World with your Aalai</div>
          </div>
          <div className="progress-container">
            <div className="progress-value">{validatedProgress}%</div>
            <div className="progress-indicator-container">
              <div
                className="progress-bar"
                style={{ width: `${validatedProgress}%` }} // Dynamic width
              ></div>
            </div>
          </div>
        </div>
      </div>
    </RenderOverlay>
  );
};

export default LoadingPage;