import { useEffect, useMemo, useRef, useState } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import * as THREE from "three";
import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
import {
  useEditPosition,
  usezonePosition,
  usezoneTarget,
} from "../../../store/builder/store";

export default function ZoneCentreTarget() {
  const { selectedZone } = useSelectedZoneStore();
  // 
  const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(
    null
  );
  const sphereRef = useRef<THREE.Mesh>(null);
  const { controls }: any = useThree();
  const { setZonePosition } = usezonePosition();
  const { setZoneTarget } = usezoneTarget();
  const { Edit } = useEditPosition();

  const TRANSITION_SPEED = 2000;

  useEffect(() => {
    if (
      selectedZone.zoneViewPortTarget &&
      JSON.stringify(previousZoneCentre) !==
        JSON.stringify(selectedZone.zoneViewPortTarget)
    ) {
      setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
    }
  }, [selectedZone.zoneViewPortTarget, previousZoneCentre]);

  const centrePoint = useMemo(() => {
    if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
    return previousZoneCentre.map(
      (value, index) => (value + selectedZone.zoneViewPortTarget[index]) / 2
    );
  }, [previousZoneCentre, selectedZone.zoneViewPortTarget]);

  useEffect(() => {
    if (selectedZone.zoneName !== "") {
      if (sphereRef.current) {
        sphereRef.current.position.set(
          selectedZone.zoneViewPortTarget[0],
          selectedZone.zoneViewPortTarget[1],
          selectedZone.zoneViewPortTarget[2]
        );
      }
      if (centrePoint) {
        if (centrePoint.length > 0) {
          const setCam = async () => {
            controls.setLookAt(
              centrePoint[0],
              26,
              centrePoint[2],
              ...centrePoint,
              true,
              TRANSITION_SPEED
            );
            setTimeout(() => {
              controls?.setLookAt(
                ...selectedZone.zoneViewPortPosition,
                ...selectedZone.zoneViewPortTarget,
                true,
                TRANSITION_SPEED
              );
            }, 100);
          };
          setCam();
        } else {
          const setCam = async () => {
            controls?.setLookAt(
              ...selectedZone.zoneViewPortPosition,
              ...selectedZone.zoneViewPortTarget,
              true,
              TRANSITION_SPEED
            );
          };
          setCam();
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedZone.zoneViewPortTarget]);

  useFrame(() => {
    if (Edit) {
      setZonePosition([
        controls.getPosition().x,
        controls.getPosition().y,
        controls.getPosition().z,
      ]);
      setZoneTarget([
        controls.getTarget().x,
        controls.getTarget().y,
        controls.getTarget().z,
      ]);
    }
  });
  return <></>;
}
