import React, { useEffect } from "react";
import ModuleToggle from "../components/ui/ModuleToggle";
import SideBarLeft from "../components/layout/sidebarLeft/SideBarLeft";
import SideBarRight from "../components/layout/sidebarRight/SideBarRight";
import useModuleStore, { useThreeDStore } from "../store/useModuleStore";
import RealTimeVisulization from "../modules/visualization/RealTimeVisulization";
import Tools from "../components/ui/Tools";
import {
  useSocketStore,
  useFloorItems,
  useOrganization,
  useUserName,
  useWallItems,
  useZones,
  useLoadingProgress,
} from "../store/store";
import { useNavigate } from "react-router-dom";
import { usePlayButtonStore } from "../store/usePlayButtonStore";
import MarketPlace from "../modules/market/MarketPlace";
import LoadingPage from "../components/templates/LoadingPage";
import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
import KeyPressListener from "../utils/shortcutkeys/handleShortcutKeys";
import { useSelectedUserStore } from "../store/useCollabStore";
import FollowPerson from "../components/templates/FollowPerson";
import ProductionCapacity from "../components/ui/analysis/ProductionCapacity";
import ThroughputSummary from "../components/ui/analysis/ThroughputSummary";
import ROISummary from "../components/ui/analysis/ROISummary";
import Footer from "../components/ui/footer/Footer";
import RenderOverlay from "../components/templates/Overlay";
import LogList from "../components/ui/log/LogList";
import { useLogger } from "../components/ui/log/LoggerContext";

const Project: React.FC = () => {
  let navigate = useNavigate();
  const { activeModule, setActiveModule } = useModuleStore();
  const { loadingProgress } = useLoadingProgress();
  const { setUserName } = useUserName();
  const { setOrganization } = useOrganization();
  const { setFloorItems } = useFloorItems();
  const { setWallItems } = useWallItems();
  const { setZones } = useZones();

  useEffect(() => {
    setFloorItems([]);
    setWallItems([]);
    setZones([]);
    setActiveModule("builder");
    const email = localStorage.getItem("email");
    if (email) {
      const Organization = email.split("@")[1].split(".")[0];
      useSocketStore.getState().initializeSocket(email, Organization);
      const name = localStorage.getItem("userName");
      if (Organization && name) {
        setOrganization(Organization);
        setUserName(name);
      }
    } else {
      navigate("/");
    }
  }, []);

  const { isPlaying } = usePlayButtonStore();
  const { toggleThreeD } = useThreeDStore();
  const { selectedUser } = useSelectedUserStore();
  const { isLogListVisible } = useLogger();

  return (
    <div className="project-main">
      {/* <div className="analysis">
        <div className="analysis-wrapper">
          <ProductionCapacity />
          <ThroughputSummary />
        </div>
        <ROISummary />
      </div> */}
      <KeyPressListener />
      {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
      {!isPlaying && (
        <>
          {toggleThreeD && <ModuleToggle />}
          <SideBarLeft />
          <SideBarRight />
        </>
      )}
      {/* <RenderOverlay>
        <MenuBar setOpenMenu={setOpenMenu} />
      </RenderOverlay> */}
      {activeModule === "market" && <MarketPlace />}
      <RealTimeVisulization />
      {activeModule !== "market" && <Tools />}
      {isPlaying && activeModule === "simulation" && <SimulationPlayer />}
      {/* {<SimulationPlayer />} */}
      {isLogListVisible && (
        <RenderOverlay>
          <LogList />
        </RenderOverlay>
      )}
      {selectedUser && <FollowPerson />}
      <Footer />
    </div>
  );
};

export default Project;