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

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

  // romove late
  const dummyData = {
    assetType: "machine",
    selectedPoint: {
      name: "Point A",
      uuid: "123e4567-e89b-12d3-a456-426614174000",
      actions: [
        {
          uuid: "action-1",
          name: "Action One",
          isUsed: true,
        },
        {
          uuid: "action-2",
          name: "Action Two",
          isUsed: true,
        },
        {
          uuid: "action-3",
          name: "Action Three",
          isUsed: true,
        },
      ],
    },
    selectedItem: {
      item: {
        uuid: "item-1",
        name: "Item One",
        isUsed: false,
      },
    },
    setSelectedPoint: (value: string) => {
      console.log(`Selected point updated to: ${value}`);
    },
    selectedActionSphere: "Sphere A",
  };

  return (
    <div className="sidebar-right-wrapper">
      <Header />
      {toggleUI && (
        <div className="sidebar-actions-container">
          {/* {activeModule === "builder" && ( */}
          <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 === "mechanics" && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <EventProperties {...dummyData} />
              </div>
            </div>
          )}
          {subModule === "analysis" && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <Analysis />
              </div>
            </div>
          )}
          {subModule === "simulations" && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <Simulations />
              </div>
            </div>
          )}
        </>
      )}

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

export default SideBarRight;