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;
  delta: any;
  zoom: number;
}> = (props: {
  ix: number;
  iy: number;
  x: number;
  y: number;
  delta: any;
  zoom: number;
}) => {
  const style = {
    width: tileSize + 'px',
    height: tileSize + 'px',
    transform:
      'translate3d(' +
      (props.ix * tileSize - props.delta.X) +
      'px, ' +
      (props.iy * tileSize - props.delta.Y) +
      'px, 0px)',
  };
  return (
    <img
      src={tileProvider(props.zoom, props.x, props.y)}
      style={style}
      alt=''
    />
  );
};

export default Tile;