import React from 'react';
import { tileSize } from './map';

const tileProvider = (zoom: number, x: number, y: number) =>
  'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';

const Tile: React.FC<{
  ix: number;
  iy: number;
  x: number;
  y: number;
  deltaX: number;
  deltaY: number;
  zoom: number;
}> = (props: {
  ix: number;
  iy: number;
  x: number;
  y: number;
  deltaX: number;
  deltaY: number;
  zoom: number;
}) => {
  const style = {
    width: tileSize + 'px',
    height: tileSize + 'px',
    transform:
      'translate3d(' +
      (props.ix - props.deltaX -1) * tileSize +
      'px, ' +
      (props.iy - props.deltaY -1) * tileSize +
      'px, 0px)',
  };
  return <img src={tileProvider(props.zoom, props.x, props.y)} style={style} />;
};

export default Tile;