import React, { useEffect, useState } from "react";
import Header from "./Header";
import useModuleStore from "../../../store/useModuleStore";
import {
  AnalysisIcon,
  MechanicsIcon,
  PropertiesIcon,
} from "../../icons/SimulationIcons";
import useToggleStore from "../../../store/useUIToggleStore";
import MachineMechanics from "./mechanics/MachineMechanics";

const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
  const [activeList, setActiveList] = useState("properties");
  const { toggleUI } = useToggleStore();

  // Reset activeList whenever activeModule changes
  useEffect(() => {
    setActiveList("properties");
  }, [activeModule]);

  return (
    <div className="sidebar-right-wrapper">
      <Header />
      {toggleUI && (
        <div className="sidebar-actions-container">
          <div
            className={`sidebar-action-list ${
              activeList === "properties" ? "active" : ""
            }`}
            onClick={() => setActiveList("properties")}
          >
            <PropertiesIcon isActive={activeList === "properties"} />
          </div>
          {activeModule === "simulation" && (
            <>
              <div
                className={`sidebar-action-list ${
                  activeList === "mechanics" ? "active" : ""
                }`}
                onClick={() => setActiveList("mechanics")}
              >
                <MechanicsIcon isActive={activeList === "mechanics"} />
              </div>
              <div
                className={`sidebar-action-list ${
                  activeList === "analysis" ? "active" : ""
                }`}
                onClick={() => setActiveList("analysis")}
              >
                <AnalysisIcon isActive={activeList === "analysis"} />
              </div>
            </>
          )}
        </div>
      )}
<<<<<<< Updated upstream
      {toggleUI && (
        <div className="sidebar-right-container">
          <div className="sidebar-right-content-container">
            <MachineMechanics />
          </div>
        </div>
=======
      {/* mechanics */}
      {toggleUI && (
        <>
          {/* {activeModule === "simulation" && activeList === "mechanics" && ( */}
          {activeModule === "simulation" && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <MachineMechanics />
              </div>
            </div>
          )}

          {/* realtime visualization */}
          {activeModule === "visualization" && <Visualization />}
        </>
>>>>>>> Stashed changes
      )}
    </div>
  );
};

export default SideBarRight;