import { CameraControls } from "@react-three/drei";
import { useRef, useEffect } from "react";
import { useThree } from "@react-three/fiber";
import * as CONSTANTS from '../../../types/world/worldConstants';

import { useToggleView } from "../../../store/builder/store";
import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";

export default function ControlsDuplicate({ projectId }: { projectId: string }) {
    const controlsRef = useRef<CameraControls>(null);

    const { toggleView } = useToggleView();
    const state = useThree();

    useEffect(() => {
        if (controlsRef.current) {
            (controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
            (controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
        }
        const email = localStorage.getItem("email");
        const organization = email!.split("@")[1].split(".")[0];
        const userId = localStorage.getItem("userId")!;

        getCamera(organization, userId, projectId).then((data) => {
            if (data && data.position && data.target) {
                controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
                controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
            } else {
                controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
                controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
            }
        })
            .catch((error) => console.error("Failed to fetch camera data:", error));
    }, []);

    return (
        <>
            <CameraControls
                makeDefault
                ref={controlsRef}
                minDistance={toggleView ? CONSTANTS.twoDimension.minDistance : CONSTANTS.threeDimension.minDistance}
                maxDistance={CONSTANTS.thirdPersonControls.maxDistance}
                minZoom={CONSTANTS.thirdPersonControls.minZoom}
                maxZoom={CONSTANTS.thirdPersonControls.maxZoom}
                maxPolarAngle={CONSTANTS.thirdPersonControls.maxPolarAngle}
                camera={state.camera}
                verticalDragToForward={true}
                boundaryEnclosesCamera={true}
                dollyToCursor={toggleView}
            >
            </CameraControls>
        </>
    );
}