import * as React from 'react';
import { Map, Overlay, Marker, useMap } from 'rgm';
import { css } from '@emotion/core';
import { useGoogleApiLoader } from '../dev-src/hooks';
import { Ratio } from '../dev-src/controls';
// https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
const MAP_OPTIONS: google.maps.MapOptions = {
  zoom: 9,
  center: {
    lat: 59.936,
    lng: 30.314,
  },
  gestureHandling: 'greedy',
  clickableIcons: false,
};
const Child = () => {
  const { api, map } = useMap();
  React.useEffect(() => {
    console.log(map.getCenter().toJSON(), api.version);
  }, [map]);
  return null;
};
export default function TsRgm() {
  const api = useGoogleApiLoader();
  const [map, setMap] = React.useState<null | google.maps.Map<HTMLDivElement>>(
    null,
  );
  return (
    <div>
      <button
        css={css`
          margin: 16px;
        `}
        onClick={() => {
          if (map != null) {
            map.panBy(Math.random() * 300 - 150, Math.random() * 300 - 150);
          }
        }}
      >
        Click
      </button>
      <Ratio value={3 / 4}>
        {api && (
          <Map ref={setMap} api={api} options={MAP_OPTIONS}>
            <Overlay>
              <Marker lat={59.936} lng={30.314}>
                <CircleMarker />
              </Marker>
            </Overlay>
            <Child />
          </Map>
        )}
      </Ratio>
    </div>
  );
}
const CircleMarker = () => (
  <div
    css={css`
      place-self: center center;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      background-color: white;
      border: 3px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    `}
  >
    TS
  </div>
);