import { useEffect } from "react";
import "./App.css";
import '../App/Graph.css'; 
import '../components/test.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 { 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.js";
import "./LoadingScreen.css";


const App = () => {
  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]);

  return (
    <>
      {/* Navigation */}
      <Navbar />

      {/* 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;