import react from 'react';
import { useSelector } from 'react-redux';
import { MapState } from '../../store/map';
import Tile from './tile';

import '../../theme/map.css';
import _ from 'lodash';

export const tileSize = 256;

const TiledMap: react.FC<{}> = () => {

  const tilesState = useSelector((state: { map: MapState }) => state.map.tiles);
  console.log(`tilesState: ${JSON.stringify(tilesState)}`);

  return (
    <div className='tiles'>
      {_.range(tilesState.nb.y).map((iy) => (
        <div key={'y' + iy} className='tilesRow'>
          {_.range(tilesState.nb.y).map((ix) => (
            <Tile
              key={'x' + ix + 'y' + iy}
              iy={iy}
              ix={ix}
              x={tilesState.first.x + ix}
              y={tilesState.first.y + iy}
              zoom={tilesState.zoom}
            />
          ))}
        </div>
      ))}
    </div>
  );
};

export default TiledMap;