import React, { useContext, useState, useEffect, Fragment } from "react";
import { LoadingContext } from "../utils/LoadingContext";
import { fetchData } from "../../api";
import Home from "./Home";
import About from "./About";
import Work from "./Work";
import Skills from "./Skills";
import Activity from "./Activity";
import Contact from "./Contact";
import SectionObserver from "./SectionObserver";

const GET_INTRO = import.meta.env.VITE_GET_INTRO;
const GET_ABOUT = import.meta.env.VITE_GET_ABOUT;
const GET_WORK = import.meta.env.VITE_GET_WORK;
const GET_SKILLS = import.meta.env.VITE_GET_SKILLS;
const GET_ACTIVITY = import.meta.env.VITE_GET_ACTIVITY;
const GET_CONTACT = import.meta.env.VITE_GET_CONTACT;

const MainPage = () => {
  const { isLoading, setIsLoading } = useContext(LoadingContext);
  const activeSections = SectionObserver();

  // State to store fetched data
  const [introData, setIntroData] = useState([]);
  const [aboutMe, setAboutData] = useState([]);
  const [workData, setWorkData] = useState([]);
  const [skillsData, setSkillsData] = useState([]);
  const [activityData, setActivityData] = useState([]);
  const [contactData, setContactData] = useState([]);

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        setIsLoading(true); // Set loading to true before fetching data
        const [intro, about, work, skills, activity, contact] =
          await Promise.all([
            fetchData(GET_INTRO),
            fetchData(GET_ABOUT),
            fetchData(GET_WORK),
            fetchData(GET_SKILLS),
            fetchData(GET_ACTIVITY),
            fetchData(GET_CONTACT),
          ]);

        // Store fetched data in state
        setIntroData(intro);
        setAboutData(about);
        setWorkData(work);
        setSkillsData(skills);
        setActivityData(activity);
        setContactData(contact);
      } catch (error) {
        console.error("Error fetching data:", error);
      } finally {
        setIsLoading(false); // Set loading to false after fetching data
      }
    };

    fetchAllData();
  }, [setIsLoading]);

  if (isLoading) {
    return <div>Loading...</div>; // Or your custom loading spinner
  }

  return (
    <Fragment>
      {/* Home Section */}
      <section id="home" className="bg-[#181818] text-white">
        <Home isVisible={activeSections.has("home")} introData={introData} />
        {/* Diagonal separator */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100"
          viewBox="0 0 1200 100"
          preserveAspectRatio="none"
        >
          <polygon
            points="0,0 1200,0 1200,100 0,100"
            style={{ fill: "#232323" }}
          />
          <polygon
            points="0,0 1200,100 1200,0 0,0"
            style={{ fill: "#181818" }}
          />
        </svg>
      </section>

      {/* About Section */}
      <section id="about" className="bg-[#232323] text-white">
        <About isVisible={activeSections.has("about")} aboutMe={aboutMe} />
        {/* Diagonal separator */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100"
          viewBox="0 0 1200 100"
          preserveAspectRatio="none"
        >
          <polygon
            points="0,0 1200,0 1200,100 0,100"
            style={{ fill: "#232323" }}
          />
          <polygon
            points="0,100 1200,0 1200,100 0,100"
            style={{ fill: "#181818" }}
          />
        </svg>
      </section>

      {/* Work Section */}
      <section id="work" className="bg-[#181818] text-white">
        <Work isVisible={activeSections.has("work")} work={workData} />
        {/* Diagonal separator */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100"
          viewBox="0 0 1200 100"
          preserveAspectRatio="none"
        >
          <polygon
            points="0,0 1200,0 1200,100 0,100"
            style={{ fill: "#232323" }}
          />
          <polygon
            points="0,0 1200,100 1200,0 0,0"
            style={{ fill: "#181818" }}
          />
        </svg>
      </section>

      {/* Skills Section */}
      <section id="skills" className="bg-[#232323] text-white">
        <Skills
          isVisible={activeSections.has("skills")}
          skillsData={skillsData}
        />
        {/* Diagonal separator */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100"
          viewBox="0 0 1200 100"
          preserveAspectRatio="none"
        >
          <polygon
            points="0,0 1200,0 1200,100 0,100"
            style={{ fill: "#232323" }}
          />
          <polygon
            points="0,100 1200,0 1200,100 0,100"
            style={{ fill: "#181818" }}
          />
        </svg>
      </section>

      {/* Activity Section */}
      <section id="activity" className="bg-[#181818] text-white">
        <Activity
          isVisible={activeSections.has("activity")}
          activityData={activityData}
        />
        {/* Diagonal separator */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="100%"
          height="100"
          viewBox="0 0 1200 100"
          preserveAspectRatio="none"
        >
          <polygon
            points="0,0 1200,0 1200,100 0,100"
            style={{ fill: "#232323" }}
          />
          <polygon
            points="0,0 1200,100 1200,0 0,0"
            style={{ fill: "#181818" }}
          />
        </svg>
      </section>

      {/* Contact Section */}
      <section id="contact" className="bg-[#232323] text-white">
        <Contact
          isVisible={activeSections.has("contact")}
          contactData={contactData}
        />
      </section>
    </Fragment>
  );
};

export default MainPage;