import { useEffect, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import { KeyboardControls } from "@react-three/drei";
import { useSceneContext } from "./sceneContext";

import Builder from "../builder/builder";
import Visualization from "../visualization/visualization";
import Setup from "./setup/setup";
import Simulation from "../simulation/simulation";
import Collaboration from "../collaboration/collaboration";
import useModuleStore from "../../store/ui/useModuleStore";
import { useParams } from "react-router-dom";
import { getAllProjects } from "../../services/dashboard/getAllProjects";
import { getUserData } from "../../functions/getUserData";
import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
import { Color, SRGBColorSpace } from "three";
import { compressImage } from "../../utils/compressImage";

export default function Scene({ layout }: { readonly layout: "Main Layout" | "Comparison Layout" }) {
    const map = useMemo(
        () => [
            { name: "forward", keys: ["ArrowUp", "w", "W"] },
            { name: "backward", keys: ["ArrowDown", "s", "S"] },
            { name: "left", keys: ["ArrowLeft", "a", "A"] },
            { name: "right", keys: ["ArrowRight", "d", "D"] },
        ],
        []
    );
    const { assetStore } = useSceneContext();
    const { assets } = assetStore();
    const { userId, organization } = getUserData();
    const { projectId } = useParams();
    const { projectSocket } = useSocketStore();
    const { activeModule } = useModuleStore();
    const { loadingProgress } = useLoadingProgress();

    useEffect(() => {
        if (!projectId || loadingProgress !== 0) return;
        getAllProjects(userId, organization)
            .then((projects) => {
                if (!projects.Projects) return;
                let project = projects.Projects.find((val: any) => val.projectUuid === projectId || val._id === projectId);
                const canvas = document.getElementById("sceneCanvas")?.getElementsByTagName("canvas")[0];
                if (!canvas) return;
                compressImage(canvas.toDataURL("image/png")).then((screenshotDataUrl) => {
                    const updateProjects = {
                        projectId: project?._id,
                        organization,
                        userId,
                        projectName: project?.projectName,
                        thumbnail: screenshotDataUrl,
                    };
                    if (projectSocket) {
                        projectSocket.emit("v1:project:update", updateProjects);
                    }
                });
            })
            .catch((err) => {
                console.error(err);
            });
        // eslint-disable-next-line
    }, [activeModule, assets, loadingProgress]);

    return (
        <KeyboardControls map={map}>
            <Canvas
                id="sceneCanvas"
                shadows
                color="#aaaa"
                eventPrefix="client"
                onContextMenu={(e) => {
                    e.preventDefault();
                }}
                performance={{ min: 0.9, max: 1.0 }}
                onCreated={(e) => {
                    e.scene.background = layout === "Main Layout" ? null : new Color(0x19191d);
                }}
                gl={{ outputColorSpace: SRGBColorSpace, powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
            >
                <Setup />
                <Collaboration />
                <Builder />
                <Simulation />
                <Visualization />
            </Canvas>
        </KeyboardControls>
    );
}
