import { useEffect } from "react";
import { useLoadingProgress, useRenameModeStore, useSaveVersion, useSelectedComment, useSocketStore, useWidgetSubOption } from "../../../store/builder/store";
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 RegularDropDown from "../../ui/inputs/RegularDropDown";
import RenameTooltip from "../../ui/features/RenameTooltip";
import VersionSaved from "../sidebarRight/versionHisory/VersionSaved";
import Footer from "../../footer/Footer";
import ThreadChat from "../../ui/collaboration/ThreadChat";
import Scene from "../../../modules/scene/scene";
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 { createHandleDrop } from "../../../modules/visualization/functions/handleUiDrop";
import { useComparisonProduct, useMainProduct } from "../../../store/simulation/useSimulationStore";
import { useProductContext } from "../../../modules/simulation/products/productContext";
import { setAssetsApi } from "../../../services/factoryBuilder/asset/floorAsset/setAssetsApi";
import { useParams } from "react-router-dom";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
import { useVersionContext } from "../../../modules/builder/version/versionContext";
import { useBuilderStore } from "../../../store/builder/useBuilderStore";
import { recentlyViewed } from "../../../services/dashboard/recentlyViewed";
import { getUserData } from "../../../functions/getUserData";

function MainScene() {
    const { setMainProduct } = useMainProduct();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
    const { isVersionSaved, setIsVersionSaved } = 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 { clearComparisonProduct } = useComparisonProduct();
    const { selectedFloorAsset, setSelectedFloorAsset } = useBuilderStore();
    const { assetStore, productStore } = useSceneContext();
    const { products } = productStore();
    const { setName, selectedAssets, setSelectedAssets } = assetStore();
    const { projectId } = useParams()
    const { organization, userId } = getUserData();
    const { isRenameMode, setIsRenameMode } = useRenameModeStore();
    const { versionHistory } = useVersionHistoryStore();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion, setSelectedVersion } = selectedVersionStore();
    const { selectedComment, commentPositionState } = useSelectedComment();

    useEffect(() => {
        if (activeModule !== 'simulation') {
            clearComparisonProduct();
            setIsVersionSaved(false);
        }
    }, [activeModule, clearComparisonProduct, setIsVersionSaved])

    useEffect(() => {
        if (versionHistory.length > 0 && organization && userId) {
            recentlyViewed(organization, userId).then((projects) => {
                const recent_opened_verisionID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?.Present_version._id;
                if (recent_opened_verisionID) {
                    const version = versionHistory.find((ver) => ver.versionId === recent_opened_verisionID);
                    if (version) {
                        setSelectedVersion(version);
                    }
                }
            })
        }
    }, [setSelectedVersion, versionHistory, projectId])

    const handleSelectVersion = (option: string) => {
        const version = versionHistory.find((version) => version.versionName === option);
        if (version) {
            setSelectedVersion(version);
        }
    };

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

    const handleObjectRename = async (newName: string) => {
        if (!projectId) return
        if (selectedFloorAsset) {
            setAssetsApi({
                modelUuid: selectedFloorAsset.userData.modelUuid,
                modelName: newName,
                projectId,
                versionId: selectedVersion?.versionId || ''
            }).then(() => {
                selectedFloorAsset.userData = { ...selectedFloorAsset.userData, modelName: newName };
                setSelectedFloorAsset(selectedFloorAsset);
                setIsRenameMode(false);
                setName(selectedFloorAsset.userData.modelUuid, newName);
            })
        } else if (selectedAssets.length === 1) {
            setAssetsApi({
                modelUuid: selectedAssets[0].userData.modelUuid,
                modelName: newName,
                projectId,
                versionId: selectedVersion?.versionId || ''
            }).then(() => {
                selectedAssets[0].userData = { ...selectedAssets[0].userData, modelName: newName };
                setSelectedAssets(selectedAssets);
                setIsRenameMode(false);
                setName(selectedAssets[0].userData.modelUuid, newName);
            })
        }
    }

    return (
        <>
            {!selectedUser && (
                <>
                    <KeyPressListener />
                    {loadingProgress > 0 && <LoadingPage progress={loadingProgress} />}
                    {!isPlaying && (
                        <>
                            {toggleThreeD && !isVersionSaved && <ModuleToggle />}
                            <SideBarLeft />
                            <SideBarRight />
                        </>
                    )}
                    <RealTimeVisulization />
                    {activeModule === "market" && <MarketPlace />}
                    {activeModule !== "market" && !isPlaying && !isVersionSaved && (
                        <Tools />
                    )}
                    {(isPlaying) && activeModule === "simulation" && loadingProgress === 0 && <SimulationPlayer />}
                    {(isPlaying) && activeModule !== "simulation" && <ControlsPlayer />}

                    {isRenameMode && (selectedFloorAsset?.userData.modelName || selectedAssets.length === 1) && <RenameTooltip name={selectedFloorAsset?.userData.modelName || selectedAssets[0].userData.modelName} onSubmit={handleObjectRename} />}
                    {/* 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,
                        projectId,
                        versionId: selectedVersion?.versionId || '',
                    })
                }
                onDragOver={(event) => event.preventDefault()}
            >
                <Scene layout="Main Layout" />
            </div>

            {selectedProduct && selectedVersion && isVersionSaved && !isPlaying && activeModule === "simulation" && (
                <div className="selectLayout-wrapper">
                    <RegularDropDown
                        header={selectedVersion.versionName}
                        options={versionHistory.map((v) => v.versionName)} // Pass layout names as options
                        onSelect={handleSelectVersion}
                        search={false}
                    />
                    <br />
                    <RegularDropDown
                        header={selectedProduct.productName}
                        options={products.map((l) => l.productName)} // Pass layout names as options
                        onSelect={handleSelectProduct}
                        search={false}
                    />
                </div>
            )}

            {activeModule !== "market" && !selectedUser && <Footer />}

            <VersionSaved />

            {
                (commentPositionState !== null || selectedComment !== null) &&
                <ThreadChat />
            }

        </>
    );
}

export default MainScene;