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 useVersionHistoryVisibleStore, {
    useSaveVersion,
    useSelectedFloorItem,
    useToolMode,
} from "../../../store/builder/store";
import {
    useSelectedEventData,
    useSelectedEventSphere,
} from "../../../store/simulation/useSimulationStore";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
import GlobalProperties from "./properties/GlobalProperties";
import AssetProperties 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/WallProperties";
import FloorProperties from "./properties/FloorProperties";
import SelectedWallProperties from "./properties/SelectedWallProperties";
import SelectedFloorProperties from "./properties/SelectedFloorProperties";

const SideBarRight: React.FC = () => {
    const { activeModule } = useModuleStore();
    const { toggleUIRight } = useToggleStore();
    const { toolMode } = useToolMode();
    const { subModule, setSubModule } = useSubModuleStore();
    const { selectedFloorItem } = useSelectedFloorItem();
    const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
    const { selectedEventData } = useSelectedEventData();
    const { selectedEventSphere } = useSelectedEventSphere();
    const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
    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");
                                        setVersionHistoryVisible(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");
                                            setVersionHistoryVisible(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");
                                            setVersionHistoryVisible(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");
                                            setVersionHistoryVisible(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 &&
                        !selectedFloor &&
                        !selectedWall && (
                            <div className="sidebar-right-container">
                                <div className="sidebar-right-content-container">
                                    {(() => {
                                        if (toolMode === "Aisle") {
                                            return <AisleProperties />;
                                        } else if (toolMode === "Wall") {
                                            return <WallProperties />;
                                        } else if (toolMode === "Floor") {
                                            return <FloorProperties />;
                                        } else {
                                            return <GlobalProperties />;
                                        }
                                    })()}
                                </div>
                            </div>
                        )}

                    {!viewVersionHistory &&
                        subModule === "properties" &&
                        activeModule !== "visualization" &&
                        selectedFloorItem && (
                            <div className="sidebar-right-container">
                                <div className="sidebar-right-content-container">
                                    <AssetProperties />
                                </div>
                            </div>
                        )}

                    {!viewVersionHistory &&
                        subModule === "properties" &&
                        activeModule !== "visualization" &&
                        !selectedFloorItem &&
                        !selectedFloor &&
                        !selectedAisle &&
                        selectedWall && (
                            <div className="sidebar-right-container">
                                <div className="sidebar-right-content-container">
                                    <SelectedWallProperties />
                                </div>
                            </div>
                        )}

                    {!viewVersionHistory &&
                        subModule === "properties" &&
                        activeModule !== "visualization" &&
                        !selectedFloorItem &&
                        !selectedWall &&
                        !selectedAisle &&
                        selectedFloor && (
                            <div className="sidebar-right-container">
                                <div className="sidebar-right-content-container">
                                    <SelectedFloorProperties />
                                </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;
