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, {
  useSelectedFloorItem,
} 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";

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

  // 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 ? "open" : "closed"}`}
    >
      <Header />
      {toggleUIRight && (
        <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-properties"
                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-properties"
                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-properties"
                className={`sidebar-action-list ${
                  subModule === "analysis" ? "active" : ""
                }`}
                onClick={() => {
                  setSubModule("analysis");
                  setVersionHistory(false);
                }}
              >
                <div className="tooltip">analysis</div>
                <AnalysisIcon isActive={subModule === "analysis"} />
              </button>
            </>
          )}
        </div>
      )}

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

      {/* process builder */}
      {toggleUIRight &&
        !viewVersionHistory &&
        subModule === "properties" &&
        activeModule !== "visualization" &&
        !selectedFloorItem && (
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
              <GlobalProperties />
            </div>
          </div>
        )}
      {toggleUIRight &&
        !viewVersionHistory &&
        subModule === "properties" &&
        activeModule !== "visualization" &&
        selectedFloorItem && (
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
              <AsstePropertiies />
            </div>
          </div>
        )}

      {toggleUIRight &&
        !viewVersionHistory &&
        subModule === "zoneProperties" &&
        (activeModule === "builder" || activeModule === "simulation") && (
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
              <ZoneProperties />
            </div>
          </div>
        )}
      {/* simulation */}
      {toggleUIRight &&
        !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 */}
      {toggleUIRight && activeModule === "visualization" && <Visualization />}
    </div>
  );
};

export default SideBarRight;
