import React from "react";
import {
  useLoadingProgress,
  useSaveVersion,
  useSocketStore,
  useViewSceneStore,
  useWidgetSubOption,
} from "../../../store/builder/store";
import useModuleStore, { useThreeDStore } from "../../../store/useModuleStore";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
import { useFloatingWidget } from "../../../store/visualization/useDroppedObjectsStore";
import { useSelectedUserStore } from "../../../store/collaboration/useCollabStore";
import KeyPressListener from "../../../utils/shortcutkeys/handleShortcutKeys";
import LoadingPage from "../../templates/LoadingPage";
import ModuleToggle from "../../ui/ModuleToggle";
import SideBarLeft from "../sidebarLeft/SideBarLeft";
import SideBarRight from "../sidebarRight/SideBarRight";
import RealTimeVisulization from "../../../modules/visualization/RealTimeVisulization";
import MarketPlace from "../../../modules/market/MarketPlace";
import Tools from "../../ui/Tools";
import SimulationPlayer from "../../ui/simulation/simulationPlayer";
import ControlsPlayer from "../controls/ControlsPlayer";
import SelectFloorPlan from "../../temporary/SelectFloorPlan";
import { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop";
import Scene from "../../../modules/scene/scene";
import {
  useComparisonProduct,
  useMainProduct,
} from "../../../store/simulation/useSimulationStore";
import { useProductContext } from "../../../modules/simulation/products/productContext";
import { useProductStore } from "../../../store/simulation/useProductStore";
import RegularDropDown from "../../ui/inputs/RegularDropDown";
import InputToggle from "../../ui/inputs/InputToggle";

function MainScene() {
  const { products } = useProductStore();
  const { setMainProduct } = useMainProduct();
  const { selectedProductStore } = useProductContext();
  const { selectedProduct } = selectedProductStore();
  const { isVersionSaved } = useSaveVersion();
  const { activeModule } = useModuleStore();
  const { selectedUser } = useSelectedUserStore();
  const { loadingProgress } = useLoadingProgress();
  const { toggleThreeD } = useThreeDStore();
  const { isPlaying } = usePlayButtonStore();
  const { widgetSubOption } = useWidgetSubOption();
  const { visualizationSocket } = useSocketStore();
  const { selectedZone } = useSelectedZoneStore();
  const { setFloatingWidget } = useFloatingWidget();
  const { viewSceneLabels, setViewSceneLabels } = useViewSceneStore();
  const { comparisonProduct } = useComparisonProduct();

  const handleSelectLayout = (option: string) => {
    const product = products.find((product) => product.productName === option);
    if (product) {
      setMainProduct(product.productId, product.productName);
    }
  };

  return (
    <>
      {!selectedUser && (
        <>
          <KeyPressListener />
          {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
          {!isPlaying && (
            <>
              {toggleThreeD && <ModuleToggle />}
              <SideBarLeft />
              <SideBarRight />
            </>
          )}
          <RealTimeVisulization />
          {activeModule === "market" && <MarketPlace />}
          {activeModule !== "market" && !isPlaying && !isVersionSaved && (
            <Tools />
          )}
          {isPlaying && activeModule === "simulation" && (
            <div className="label-toogler">
              <InputToggle
                value={viewSceneLabels}
                inputKey="1"
                label="Enable View Labels"
                onClick={() => setViewSceneLabels(!viewSceneLabels)}
              />
            </div>
          )}
          {(isPlaying || comparisonProduct !== null) &&
            activeModule === "simulation" &&
            loadingProgress == 0 && <SimulationPlayer />}
          {isPlaying && activeModule !== "simulation" && <ControlsPlayer />}

          {/* remove this later */}
          {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
        </>
      )}
      <div
        className="scene-container"
        id="work-space-three-d-canvas"
        style={{
          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
          borderRadius:
            isPlaying || activeModule !== "visualization" ? "" : "6px",
        }}
        role="application"
        onDrop={(event) =>
          createHandleDrop({
            widgetSubOption,
            visualizationSocket,
            selectedZone,
            setFloatingWidget,
            event,
          })
        }
        onDragOver={(event) => event.preventDefault()}
      >
        <Scene layout="Main Layout" />
      </div>

      {selectedProduct && isVersionSaved && !isPlaying && (
        <div className="selectLayout-wrapper">
          <RegularDropDown
            header={selectedProduct.productName}
            options={products.map((l) => l.productName)} // Pass layout names as options
            onSelect={handleSelectLayout}
            search={false}
          />
        </div>
      )}
    </>
  );
}

export default MainScene;