import React, { useEffect } from "react";
import Header from "./Header";
import useModuleStore, {
  useSubModuleStore,
} from "../../../store/useModuleStore";
import {
  AnalysisIcon,
  MechanicsIcon,
  PropertiesIcon,
  SimulationIcon,
} from "../../icons/SimulationIcons";
import { useToggleStore } from "../../../store/useUIToggleStore";
import Visualization from "./visualization/Visualization";
import Analysis from "./analysis/Analysis";
import Simulations from "./simulation/Simulations";
import useVersionHistoryStore, {
  useSaveVersion,
  useSelectedFloorItem,
  useToolMode,
} from "../../../store/builder/store";
import {
  useSelectedEventData,
  useSelectedEventSphere,
} from "../../../store/simulation/useSimulationStore";
import GlobalProperties from "./properties/GlobalProperties";
import AsstePropertiies from "./properties/AssetProperties";
import ZoneProperties from "./properties/ZoneProperties";
import EventProperties from "./properties/eventProperties/EventProperties";
import VersionHistory from "./versionHisory/VersionHistory";
import AisleProperties from "./properties/AisleProperties";
import WallProperties from "./properties/eventProperties/WallProperties";

const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
  const { toggleUIRight } = useToggleStore();
  const { toolMode } = useToolMode();
  const { subModule, setSubModule } = useSubModuleStore();
  const { selectedFloorItem } = useSelectedFloorItem();
  const { selectedEventData } = useSelectedEventData();
  const { selectedEventSphere } = useSelectedEventSphere();
  const { viewVersionHistory, setVersionHistory } = useVersionHistoryStore();
  const { isVersionSaved } = useSaveVersion();

  // Reset activeList whenever activeModule changes
  useEffect(() => {
    if (activeModule !== "simulation") setSubModule("properties");
    if (activeModule === "simulation") setSubModule("simulations");
  }, [activeModule, setSubModule]);

  useEffect(() => {
    if (
      activeModule !== "mechanics" &&
      selectedEventData &&
      selectedEventSphere
    ) {
      setSubModule("mechanics");
    } else if (!selectedEventData && !selectedEventSphere) {
      if (activeModule === "simulation") {
        setSubModule("simulations");
      }
    }
    if (activeModule !== "simulation") {
      setSubModule("properties");
    }
  }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);

  return (
    <div
      className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
        }`}
    >
      <Header />
      {toggleUIRight && (
        <>
          {!isVersionSaved && (
            <div className="sidebar-actions-container">
              {activeModule !== "simulation" && (
                <button
                  id="sidebar-action-list-properties"
                  className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
                    }`}
                  onClick={() => {
                    setSubModule("properties");
                    setVersionHistory(false);
                  }}
                >
                  <div className="tooltip">properties</div>
                  <PropertiesIcon isActive={subModule === "properties"} />
                </button>
              )}
              {activeModule === "simulation" && (
                <>
                  <button
                    id="sidebar-action-list-simulation"
                    className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
                      }`}
                    onClick={() => {
                      setSubModule("simulations");
                      setVersionHistory(false);
                    }}
                  >
                    <div className="tooltip">simulations</div>
                    <SimulationIcon isActive={subModule === "simulations"} />
                  </button>
                  <button
                    id="sidebar-action-list-mechanics"
                    className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
                      }`}
                    onClick={() => {
                      setSubModule("mechanics");
                      setVersionHistory(false);
                    }}
                  >
                    <div className="tooltip">mechanics</div>
                    <MechanicsIcon isActive={subModule === "mechanics"} />
                  </button>
                  <button
                    id="sidebar-action-list-analysis"
                    className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
                      }`}
                    onClick={() => {
                      setSubModule("analysis");
                      setVersionHistory(false);
                    }}
                  >
                    <div className="tooltip">analysis</div>
                    <AnalysisIcon isActive={subModule === "analysis"} />
                  </button>
                </>
              )}
            </div>
          )}

          {viewVersionHistory && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <VersionHistory />
              </div>
            </div>
          )}

          {/* process builder */}
          {!viewVersionHistory &&
            subModule === "properties" &&
            activeModule !== "visualization" &&
            !selectedFloorItem && (
              <div className="sidebar-right-container">
                <div className="sidebar-right-content-container">
                  {(() => {
                    if (toolMode === "Aisle") {
                      return <AisleProperties />;
                    } else if (toolMode === "Wall") {
                      return <WallProperties />;
                    } else {
                      return <GlobalProperties />;
                    }
                  })()}
                </div>
              </div>
            )}
          {!viewVersionHistory &&
            subModule === "properties" &&
            activeModule !== "visualization" &&
            selectedFloorItem && (
              <div className="sidebar-right-container">
                <div className="sidebar-right-content-container">
                  <AsstePropertiies />
                </div>
              </div>
            )}

          {!viewVersionHistory &&
            subModule === "zoneProperties" &&
            (activeModule === "builder" || activeModule === "simulation") && (
              <div className="sidebar-right-container">
                <div className="sidebar-right-content-container">
                  <ZoneProperties />
                </div>
              </div>
            )}
          {/* simulation */}
          {!isVersionSaved &&
            !viewVersionHistory &&
            activeModule === "simulation" && (
              <>
                {subModule === "simulations" && (
                  <div className="sidebar-right-container">
                    <div className="sidebar-right-content-container">
                      <Simulations />
                    </div>
                  </div>
                )}
                {subModule === "mechanics" && (
                  <div className="sidebar-right-container">
                    <div className="sidebar-right-content-container">
                      <EventProperties />
                    </div>
                  </div>
                )}
                {subModule === "analysis" && (
                  <div className="sidebar-right-container">
                    <div className="sidebar-right-content-container">
                      <Analysis />
                    </div>
                  </div>
                )}
              </>
            )}
          {/* realtime visualization */}
          {activeModule === "visualization" && <Visualization />}
        </>
      )}
    </div>
  );
};

export default SideBarRight;