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

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

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

export default ModuleToggle;