import React, { useEffect, useState } 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";

type DisplayComponent =
    | "versionHistory"
    | "globalProperties"
    | "aisleProperties"
    | "wallProperties"
    | "floorProperties"
    | "assetProperties"
    | "selectedWallProperties"
    | "selectedFloorProperties"
    | "zoneProperties"
    | "simulations"
    | "mechanics"
    | "analysis"
    | "visualization"
    | "none";

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();

    const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");

    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]);

    useEffect(() => {

        if (activeModule === "visualization") {
            setDisplayComponent("visualization");
            return;
        }

        if (!isVersionSaved && activeModule === "simulation") {
            if (subModule === "simulations") {
                setDisplayComponent("simulations");
                return;
            }
            if (subModule === "mechanics") {
                setDisplayComponent("mechanics");
                return;
            }
            if (subModule === "analysis") {
                setDisplayComponent("analysis");
                return;
            }
        }

        if (subModule === "properties" && activeModule !== "visualization") {
            if (selectedFloorItem) {
                setDisplayComponent("assetProperties");
                return;
            }
            if (!selectedFloorItem && !selectedFloor && !selectedAisle && selectedWall) {
                setDisplayComponent("selectedWallProperties");
                return;
            }
            if (!selectedFloorItem && !selectedWall && !selectedAisle && selectedFloor) {
                setDisplayComponent("selectedFloorProperties");
                return;
            }
            if (viewVersionHistory) {
                setDisplayComponent("versionHistory");
                return;
            }
            if (!selectedFloorItem && !selectedFloor && !selectedWall) {
                if (toolMode === "Aisle") {
                    setDisplayComponent("aisleProperties");
                    return;
                }
                if (toolMode === "Wall") {
                    setDisplayComponent("wallProperties");
                    return;
                }
                if (toolMode === "Floor") {
                    setDisplayComponent("floorProperties");
                    return;
                }
                setDisplayComponent("globalProperties");
                return;
            }
        }

        if (subModule === "zoneProperties" && (activeModule === "builder" || activeModule === "simulation")) {
            setDisplayComponent("zoneProperties");
            return;
        }

        setDisplayComponent("none");
    }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode,]);

    const renderComponent = () => {
        switch (displayComponent) {
            case "versionHistory":
                return <VersionHistory />;
            case "globalProperties":
                return <GlobalProperties />;
            case "aisleProperties":
                return <AisleProperties />;
            case "wallProperties":
                return <WallProperties />;
            case "floorProperties":
                return <FloorProperties />;
            case "assetProperties":
                return <AssetProperties />;
            case "selectedWallProperties":
                return <SelectedWallProperties />;
            case "selectedFloorProperties":
                return <SelectedFloorProperties />;
            case "zoneProperties":
                return <ZoneProperties />;
            case "simulations":
                return <Simulations />;
            case "mechanics":
                return <EventProperties />;
            case "analysis":
                return <Analysis />;
            case "visualization":
                return <Visualization />;
            default:
                return null;
        }
    };

    return (
        <div
            className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
                }`}
        >
            <Header />
            {toggleUIRight && (
                <>
                    {(!isVersionSaved || activeModule !== "simulation") && (
                        <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>
                    )}

                    {displayComponent !== "none" && (
                        <div className="sidebar-right-container">
                            <div className="sidebar-right-content-container">
                                {renderComponent()}
                            </div>
                        </div>
                    )}
                </>
            )}
        </div>
    );
};

export default SideBarRight;