import React, { useEffect } from "react";
import CamModelsGroup from "./camera/collabCams";
import { useSelectedUserStore } from "../../store/useCollabStore";
import { useThree } from "@react-three/fiber";
import setCameraView from "./functions/setCameraView";
import { useCamMode } from "../../store/builder/store";

const Collaboration: React.FC = () => {
  const { selectedUser } = useSelectedUserStore();
  const { camMode } = useCamMode();
  const { camera, controls } = useThree(); // Access R3F camera and controls

  useEffect(() => {
    if (camMode !== "FollowPerson") return;
    // If a user is selected, set the camera view to their location
    // and update the camera and controls accordingly
    if (selectedUser?.location) {
      const { position, rotation, target } = selectedUser.location;
      if (rotation && target)
        setCameraView({
          controls,
          camera,
          position,
          rotation,
          target,
          username: selectedUser.name,
        });
    }
  }, [selectedUser, camera, controls, camMode]);

  return <CamModelsGroup />;
};

export default Collaboration;
