import React, { useEffect } from "react";
import useModuleStore from "../../store/useModuleStore";
import {
  BuilderIcon,
  CartIcon,
  SimulationIcon,
  VisualizationIcon,
} from "../icons/ExportModuleIcons";
import useToggleStore from "../../store/useUIToggleStore";
import { useSelectedZoneStore } from "../../store/useZoneStore";

const ModuleToggle: React.FC = () => {
  const { activeModule, setActiveModule } = useModuleStore();
  const { setToggleUI } = useToggleStore();


  return (
    <div className="module-toggle-container">
      <div
        className={`module-list ${activeModule === "builder" && "active"}`}
        onClick={() => {
          setActiveModule("builder");
          setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
        }}
      >
        <div className="icon">
          <BuilderIcon isActive={activeModule === "builder"} />
        </div>
        <div className="module">Builder</div>
      </div>
      <div
        className={`module-list ${activeModule === "simulation" && "active"}`}
        onClick={() => {
          setActiveModule("simulation");
          setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
        }}
      >
        <div className="icon">
          <SimulationIcon isActive={activeModule === "simulation"} />
        </div>
        <div className="module">Simulation</div>
      </div>
      <div
        className={`module-list ${activeModule === "visualization" && "active"
          }`}
        onClick={() => {
          setActiveModule("visualization");
          setToggleUI(localStorage.getItem('navBarUi') ? localStorage.getItem('navBarUi') === 'true' : true)
        }}
      >
        <div className="icon">
          <VisualizationIcon isActive={activeModule === "visualization"} />
        </div>
        <div className="module">Visualization</div>
      </div>
      <div
        className={`module-list ${activeModule === "market" && "active"}`}
        onClick={() => {
          setActiveModule("market");
          setToggleUI(false);
        }}
      >
        <div className="icon">
          <CartIcon isActive={activeModule === "market"} />
        </div>
        <div className="module">Market Place</div>
      </div>
    </div>
  );
};

export default ModuleToggle;