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

export default React.memo(({ position }) => {
  const panoDivRef = useRef(null);
  const buttonRef = useRef(null);
  useEffect(() => {
    const pano = new google.maps.StreetViewPanorama(panoDivRef.current, {
      position,
      addressControl: false,
      showRoadLabels: false,
      clickToGo: true,
      visible: true,
    });

    buttonRef.current.onclick = () => pano.setPosition(position);
  });

  return (
    <div className="streetview-pane">
      <div className="streetview-pane__pano-div" ref={panoDivRef}/>
      <div className="streetview-pane__reset-button" ref={buttonRef}>
        Reset
      </div>
    </div>
  );
});
