import React, { useContext, useState, useEffect, Fragment } from "react";
import { LoadingContext } from "../utils/LoadingContext";
import { fetchData } from "../../api";
import { motion } from "motion/react";
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";
import useIsMobile from "../../constants/useIsMobile";
import { static_social_media } from "../../constants";

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();
  const isMobile = useIsMobile();

  // 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);
      }
    };

    fetchAllData();
  }, [setIsLoading]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  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>

      <div className="fixed bottom-8 right-8 flex flex-col space-y-4 z-10">
        {!isMobile &&
          static_social_media.map((social, index) => (
            <motion.div
              key={social.name}
              initial={{ opacity: 0, scale: 0 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{
                delay: index * 0.2,
                duration: 0.2,
                ease: "easeOut",
              }}
            >
              <motion.a
                href={social.url}
                whileHover={{ backgroundColor: "#000" }}
                className="w-[38px] h-[38px] flex items-center justify-center bg-white rounded-full group"
              >
                <motion.img
                  src={social.logo}
                  alt={social.name}
                  className="w-[18px] group-hover:brightness-0 group-hover:invert"
                />
              </motion.a>
            </motion.div>
          ))}
      </div>
    </Fragment>
  );
};

export default MainPage;