import react from 'react';
import Tile from './Tile';
import TiledLayer from './TiledLayer';
import { TileFactory } from './types';

export interface MapProperties {}

/**
 *
 * @returns A Map component
 */
export const Map: react.FC<MapProperties> = (props: MapProperties) => {
  const simpleTileFactory: TileFactory = (keyObject) => (
    <Tile
      href={`https://tile.openstreetmap.org/${keyObject.zoomLevel}/${keyObject.x}/${keyObject.y}.png`}
    />
  );

  return (
    <svg width={window.innerWidth} height={window.innerHeight}>
      <g transform='scale(256)'>
        <TiledLayer
          keyObject={{ provider: 'osm', zoomLevel: 16, x: 33488, y: 23939 }}
          viewPort={{ topLeft: { x: 0, y: 0 }, bottomRight: { x: 10, y: 10 } }}
          tileFactory={simpleTileFactory}
        />
      </g>
    </svg>
  );
};

export default Map;