import * as THREE from "three";
import { useEffect, useRef } from "react";
import { useToggleView } from "../../../store/builder/store";
import { useThree } from "@react-three/fiber";
import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
import * as CONSTANTS from '../../../types/world/worldConstants';
import { useParams } from "react-router-dom";

export default function SwitchView() {
  const { toggleView } = useToggleView();
  const state: any = useThree();
  const { set } = useThree();
  const perspectiveCamera = useRef<THREE.PerspectiveCamera | null>(null);
  const orthoCamera = useRef<THREE.OrthographicCamera | null>(null);
  orthoCamera.current = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.01, 1000);
  perspectiveCamera.current = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
  const { projectId } = useParams();

  useEffect(() => {
    if (!perspectiveCamera.current || !orthoCamera.current) return;
    if (toggleView) {
      orthoCamera.current.zoom = 10;
      orthoCamera.current.position.set(...CONSTANTS.twoDimension.defaultPosition);
      orthoCamera.current.lookAt(new THREE.Vector3(...CONSTANTS.twoDimension.defaultTarget));
      orthoCamera.current.updateProjectionMatrix();
      set({ camera: orthoCamera.current });
      orthoCamera.current.updateProjectionMatrix();
    } else if (!toggleView) {
      perspectiveCamera.current.position.set(...CONSTANTS.threeDimension.defaultPosition);
      perspectiveCamera.current.lookAt(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget));
      set({ camera: perspectiveCamera.current });
    }
  }, [toggleView, set]);

  useEffect(() => {
    if (toggleView && state.controls) {
      state.controls.mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
      state.controls.mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
    } else {
      try {
        const email = localStorage.getItem('email');
        const organization = (email!.split("@")[1]).split(".")[0];
        getCamera(organization, localStorage.getItem('userId')!,projectId).then((data) => {
          if (data && data.position && data.target) {
            state.controls?.setPosition(data.position.x, data.position.y, data.position.z);
            state.controls?.setTarget(data.target.x, data.target.y, data.target.z);
            localStorage.setItem("cameraPosition", JSON.stringify(data.position));
            localStorage.setItem("controlTarget", JSON.stringify(data.target));
          } else {
            state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
            state.controls?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
            localStorage.setItem("cameraPosition", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultPosition)));
            localStorage.setItem("controlTarget", JSON.stringify(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget)));
          }
        });
      } catch (error) {
        echo.error("Failed to retrieve camera position or target");
        console.error("Failed to retrieve camera position or target:", error);
        state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
        state.controls?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
      }

      if (state.controls) {
        state.controls.mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
        state.controls.mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
      }
    }
  }, [toggleView, state.controls]);

  return (
    <></>
  );
}