Dwinzo_dev/app/src/components/layout/sidebarRight/SideBarRight.tsx

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 { useSelectedFloorItem } from "../../../store/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";

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

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

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

    return (
        <div className="sidebar-right-wrapper">
            <Header />
            {toggleUI && (
                <div className="sidebar-actions-container">
                    <div
                        className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
                            }`}
                        onClick={() => setSubModule("properties")}
                    >
                        <PropertiesIcon isActive={subModule === "properties"} />
                    </div>
                    {activeModule === "simulation" && (
                        <>
                            <div
                                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
                                    }`}
                                onClick={() => setSubModule("mechanics")}
                            >
                                <MechanicsIcon isActive={subModule === "mechanics"} />
                            </div>
                            <div
                                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
                                    }`}
                                onClick={() => setSubModule("simulations")}
                            >
                                <SimulationIcon isActive={subModule === "simulations"} />
                            </div>
                            <div
                                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
                                    }`}
                                onClick={() => setSubModule("analysis")}
                            >
                                <AnalysisIcon isActive={subModule === "analysis"} />
                            </div>
                        </>
                    )}
                </div>
            )}
            {/* process builder */}
            {toggleUI &&
                subModule === "properties" &&
                activeModule !== "visualization" &&
                !selectedFloorItem && (
                    <div className="sidebar-right-container">
                        <div className="sidebar-right-content-container">
                            <GlobalProperties />
                        </div>
                    </div>
                )}
            {toggleUI &&
                subModule === "properties" &&
                activeModule !== "visualization" &&
                selectedFloorItem && (
                    <div className="sidebar-right-container">
                        <div className="sidebar-right-content-container">
                            <AsstePropertiies />
                        </div>
                    </div>
                )}
            {toggleUI &&
                subModule === "zoneProperties" &&
                (activeModule === "builder" || activeModule === "simulation") && (
                    <div className="sidebar-right-container">
                        <div className="sidebar-right-content-container">
                            <ZoneProperties />
                        </div>
                    </div>
                )}
            {/* simulation */}
            {toggleUI && 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 */}
            {toggleUI && activeModule === "visualization" && <Visualization />}
        </div>
    );
};

export default SideBarRight;