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,
    });
    console.log("Created Street View Pano");
    console.log("Setting up reset button");
    buttonRef.current.onclick = () => pano.setPosition(position);
  });

  return (
    <div style={{ height: "100%", position: "relative" }}>
      <div
        style={{ height: "100%" }}
        ref={panoDivRef}
      />
      <div 
        // TODO this styling is very brittle
        style={{ 
          display: "block",
          position: "absolute",
          zIndex: 1,
          bottom: "200px",
          right: "9px",
          background: "#2a2a2a",
          color: "#9a9a9a",
          padding: "5px",
          borderRadius: "2px",
          fontWeight: "bold",
          cursor: "pointer",
        }}
        ref={buttonRef}
      >
        Reset
      </div>
    </div>
  );
});