import { useEffect, useState } from "react";
import "./App.css";
import "./HP.css"
import "./mediarules.css"
import "./Timelines.css";
import '../App/Graph.css'; 
import '../components/test.css'
import "./LandingPage.css"
import "../contents/example.css"
import "./App.scss";
import 'beautiful-react-diagrams/styles.css';
import "bootstrap/dist/css/bootstrap.min.css";
import "./Graph.css"
import LoadingScreen from "../components/LoadingScreen.tsx";
import { Routes, Route } from "react-router-dom";
import { Footer } from "../components/Footer.tsx";
import { NotFound } from "../components/NotFound.tsx";
import { Navbar } from "../components/Navbar.tsx";
import { getPathMapping } from "../utils/getPathMapping.ts";
import { stringToSlug } from "../utils/stringToSlug.ts";
import { Villbuttonrow } from "../components/Buttons.tsx";
import "../utils/Highlight-functions.js";
import "./LoadingScreen.css";
import { useScroll, motion } from "framer-motion";
import "./calendar.css"

const App = () => {
  const { scrollYProgress } = useScroll({
    offset: ["start start", "end end"],
  });

  window.scrollTo(0, 0);

  const [isLoading, setIsLoading] = useState(true);

  const pathMapping = getPathMapping();
  const currentPath =
    location.pathname
      .split(`${stringToSlug(import.meta.env.VITE_TEAM_NAME)}`)
      .pop() || "/";

  // Set Page Title
  const title =
    currentPath in pathMapping ? pathMapping[currentPath].title : "Not Found";

  useEffect(() => {
    document.title = `${title || ""} | ${import.meta.env.VITE_TEAM_NAME} - iGEM ${import.meta.env.VITE_TEAM_YEAR}`;
  }, [title]);


  useEffect(() => {
    const timer = setTimeout(() => {
      console.log("Hiding loading screen");
      setIsLoading(false);
    }, 0); // Adjust the delay as needed, Update the loading state after 3 seconds

    return () => {
      console.log("Cleaning up timer");
      clearTimeout(timer);  // Clear the timer on component unmount
    };
  }, []);

  return (
    <>
    {isLoading ? (
      <LoadingScreen />
    ) : (

    <>
      
      {/* Navigation */}
      <Navbar />
      <motion.div
        className="progress-bar"
        style={{ scaleX: scrollYProgress }}
      />

      {/* Header and PageContent */}
      <Routes>
        {Object.entries(pathMapping).map(([path, { header: Header, component: Component, navlist: Sidebar }]) => (
          <Route
            key={path}
            path={path}
            element={
              <>
                
                <Header />
                {/* Page content */}
                <div className="container-fluid">
                  <div className="row">
                    <Sidebar />
                    <div className="col">
                      <Component />
                      <Villbuttonrow />
                    </div>
                    <div className="col-1 d-none d-lg-block">
                      {/* <!-- empty!--> */}
                    </div>
                  </div>
                </div>
                {/* End page content */}
              </>
            }
          />
        ))}
        {/* Add a route for the Description component */}
        <Route
          path="/description"
          element={
            <>
              {/* Page content */}
              <div className="container-fluid">
                <div className="row">
                  <div className="col">
                    <Villbuttonrow />
                  </div>
                  <div className="col-1 d-none d-lg-block">
                    {/* <!-- empty!--> */}
                  </div>
                </div>
              </div>
            </>
          }
        />

        <Route
          path="*"
          element={
            <>
              <NotFound />
            </>
          }
        />
      </Routes>

      {/* Footer */}
      <Footer />
      </>
      )}
    </>
  );
};

export default App;