// @flow
import * as React from 'react';
import { Map, Overlay, Marker } from 'rgm';
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 = {
  zoom: 9,
  center: {
    lat: 59.936,
    lng: 30.314,
  },
  gestureHandling: 'greedy',
  clickableIcons: false,
};
const genRandomMarkers = n =>
  Array.from(Array(n), () => ({
    lat: MAP_OPTIONS.center.lat + (Math.random() - 0.5) * 2 * 0.6,
    lng: MAP_OPTIONS.center.lng + (Math.random() - 0.5) * 2 * 0.6,
  }));
export default function TestIndex() {
  const api = useGoogleApiLoader();
  const INITIAL_MARKERS_COUNT = 200;
  const [markers, setMarkers] = React.useState(
    genRandomMarkers(INITIAL_MARKERS_COUNT),
  );
  React.useEffect(() => {
    const startTime = new Date();
    const MARKERS_TO_DELETE = 10;
    const INTERVAL_TIMEOUT = 100;
    let newCount = MARKERS_TO_DELETE;
    const handle = setInterval(() => {
      setMarkers(markers => {
        const dt = (new Date() - startTime) / 1000;
        if (dt > 30) {
          newCount = 9;
        }
        if (dt > 60) {
          newCount = 0;
        }
        const oldMarkers = [...markers];
        // Drop random interval
        oldMarkers.splice(
          Math.max(
            0,
            Math.floor(Math.random() * oldMarkers.length) - MARKERS_TO_DELETE,
          ),
          MARKERS_TO_DELETE,
        );
        const newMarkers = genRandomMarkers(newCount);
        const r = [...oldMarkers, ...newMarkers];
        return r;
      });
    }, INTERVAL_TIMEOUT);
    return () => {
      clearInterval(handle);
    };
  }, []);
  return (
    <Ratio value={3 / 4}>
      {api && (
        <Map api={api} options={MAP_OPTIONS}>
          <Overlay>
            {markers.map((m, index) => (
              <Marker key={index} lat={m.lat} lng={m.lng}>
                <SvgMarker
                  style={{
                    alignSelf: 'end',
                    justifySelf: 'center',
                    // easier to use placeSelf
                  }}
                  size={18}
                  color={'red'}
                />
              </Marker>
            ))}
          </Overlay>
        </Map>
      )}
    </Ratio>
  );
}
const SvgMarker = ({ size, color, style }) => (
  <svg
    style={style}
    xmlns="http://www.w3.org/2000/svg"
    height={size}
    width={size}
    viewBox="2 2 20 20"
    fill={color}
  >
    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
    <path d="M0 0h24v24H0z" fill="none" />
  </svg>
);