import React from 'react'
import { useLoadingProgress, useSaveVersion, useSocketStore, 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 { useMainProduct } from '../../../store/simulation/useSimulationStore';
import { useProductContext } from '../../../modules/simulation/products/productContext';
import { useProductStore } from '../../../store/simulation/useProductStore';
import RegularDropDown from '../../ui/inputs/RegularDropDown';

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 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" && <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