import react, { useMemo, useEffect, Fragment } from 'react';
import { useDispatch } from 'react-redux';
import { mapActions } from '../../store/map';
import _ from 'lodash';

import Layer from '../slippy/layer';
import Slippy from '../slippy/slippy';
import TiledMap from './tiled-map';
import GetLocation from './get-location';
import Whiteboard from './whiteboard';

const Map: react.FC<{}> = (props: {}) => {
  const dispatch = useDispatch();

  const resizeHandler = () => {
    dispatch(mapActions.resize());
  };
  const debouncedResizeHandler = useMemo(
    () => _.debounce(resizeHandler, 500),
    []
  );

  useEffect(() => {
    window.addEventListener('resize', debouncedResizeHandler);
    //    dispatch(mapActions.shift({ x: -50, y: 0 }));
  }, []);

  return (
    <Fragment>
      <Slippy>
        <GetLocation />
        <Whiteboard />
      </Slippy>
      <Layer>
        <TiledMap />
      </Layer>
    </Fragment>
  );
};

export default Map;