import { useRef, useEffect } from "react";
/* global google */

const usePano = (panoDivRef, { lat, lng }, { heading, pitch }) => {
  const panoRef = useRef(null);
  useEffect(() => {
    const position = { lat, lng };
    const pov = { heading, pitch };
    if (panoRef.current) {
      panoRef.current.setPosition(position);
      panoRef.current.setPov(pov);
      return;
    }

    panoRef.current = new google.maps.StreetViewPanorama(panoDivRef.current, {
      position,
      pov,
      fullscreenControl: false,
      addressControl: false,
      showRoadLabels: false,
      clickToGo: true,
      visible: true,
      motionTracking: false,
      motionTrackingControl: false,
    });
  }, [panoDivRef, lat, lng, heading, pitch]);

  return panoRef;
};

export default usePano;