(function() {
   
   
   /** 
    * Sample App to demonstrate using react portal  
    */
   class App extends React.Component {
      state = {
         time: new Date()
      }
      position = new google.maps.LatLng(37.814, -122.478)

      componentDidMount() {
         /** Update time every time every second */
         setInterval(() => {
            this.setState({
               time: new Date()
            })
         }, 1000)
      }

      render() {
         return (
            <Map zoom={13} center={this.position}>
               <OverlayViewContainer 
                  position={this.position}>
                  <CustomPopupComponent>
                     <div>
                        <h2>Timer Popup</h2>
                        <p>A custom react popup that shows the current time. <br/>Updates every second.</p>
                        <pre><u>{this.state.time.toLocaleString()}</u></pre>
                     </div>
                  </CustomPopupComponent>
               </OverlayViewContainer>
            </Map>
         );
      }
   }
 
   class OverlayViewContainer extends React.Component {
     /** Overlay instance. */
     overlay = null;

     /** Dom element reference to the content rendered in the overlay. */
     el = null;

     componentWillUnmount() {
      /** remove overlay from the map. */
       this.overlay.setMap(null);
       delete this.overlay;
     }

     render() {
       return (
         <MapContext.Consumer>
           {map => {
             if (map) {
               this.el = this.el || createOverlayElement();
                
               this.overlay = this.overlay ||
                 new OverlayView({ position: this.props.position, content: this.el });
               this.overlay.setMap(map);

               return ReactDOM.createPortal(this.props.children, this.el);
             } else {
               return null;
             }
           }}
         </MapContext.Consumer>
       );
     }
   }

   function createOverlayElement() {
     const el = document.createElement('div');
     el.style.position = 'absolute';
     el.style.display = 'inline-block';
     el.style.width = '9999px';
     return el;
   }

   class OverlayView extends window.google.maps.OverlayView {
      position = null;
      content = null;

      constructor(props) {
        super(props);
        props.position && (this.position = props.position);
        props.content && (this.content = props.content);
      }

      /** Called when the popup is added to the map. */
      onAdd = () => {
        this.getPanes().floatPane.appendChild(this.content);
      };

      /** Called when the popup is removed from the map. */
      onRemove = () => {
        if (this.content.parentElement) {
          this.content.parentElement.removeChild(this.content);
        }
      };

      /** Called each frame when the popup needs to draw itself. */
      draw = () => {
        const divPosition = this.getProjection().fromLatLngToDivPixel(
          this.position
        );
        this.content.style.left = divPosition.x + 'px';
        this.content.style.top = divPosition.y + 'px';
      };
    }

   /** Context to pass down the map instance to the OverlayViewContainer component */
   const MapContext = React.createContext(null);

   /**
    * Map componen renders the map 
    * and passes down the instance of the created map down to the children via `MapContext`.
    */
   class Map extends React.Component {
     map = null;
     /** DOM container where the map canvas gets rendered. */
     mapContainer = React.createRef();

     componentDidMount() {
       /** Create new google map. */
       if (window.google) {
         /** Draw a popup in the container */
         this.map = new google.maps.Map(this.mapContainer.current, {
           zoom: this.props.zoom,
           center: this.props.center
         });
         this.setState({map: this.map})
       }
     }
     render() {
       // reference to the DOM element where the map will be rendered
       return (
         <div
           ref={this.mapContainer}
           style={{ height: "100vh", width: "100vw" }}
         >
           <MapContext.Provider value={this.map}>{this.props.children}</MapContext.Provider>
         </div>
       );
     }
   }
   
   /** Custom popup component */
   CustomPopupComponent = styled.div`
     padding: 8px 16px;
     background-color: aliceblue;
     position: absolute;
     border: 1px solid #ccc;
     border-radius: 4px;

     p, pre {
       font-size: 16px;
     }

     pre {
       font-weight: 700;
     }
   `

   ReactDOM.render( <App />, document.getElementById("root"));


})();