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";

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 validatedProgress = Math.min(100, Math.max(0, progress));
  const generateThumbnail = async () => {
    const email = localStorage.getItem("email");
    const userId = localStorage.getItem("userId");
    try {
      if (!email || !userId) {
        console.error("User data not found in localStorage");
        return;
      }

      const emailParts = email.split("@");
      if (emailParts.length < 2) {
        console.error("Invalid email format");
        return;
      }

      const domainParts = emailParts[1].split(".");
      const Organization = domainParts[0];
      const projects = await getAllProjects(
        userId, Organization
      );
      const filterProject = projects?.Projects.find((val: any) => val.projectUuid === projectId || val._id
        === projectId)

      setProjectName(filterProject.projectName)

    }
    catch {

    }
  }
  useEffect(() => {
    generateThumbnail();
  }, []);
  return (
    <RenderOverlay>
      <div className="loading-wrapper">
        <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 of Dwinzo</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;
