import React, {ReactElement} from "react";
import {getCell, HexMap} from "../../../common/src/state/HexMap";
import {HexTileRenderer} from "./HexTileRenderer";
import {RenderOffsets, storageCoordinatesToKey} from "../../../common/src/state/Coordinates";

function HexMapRenderer({map, offsets}: {map: HexMap, offsets: RenderOffsets}) {
    const tiles: ReactElement[] = [];
    for (let line = 0; line < map.lines; line += 1) {
        for (let cell = 0; cell < map.cellsPerLine; cell += 1) {
            const coords = {line, cell};
            const cellData = getCell(map, coords);
            if (cellData !== null) {
                tiles.push(
                    <HexTileRenderer key={storageCoordinatesToKey(coords)} coords={coords} cell={cellData} offsets={offsets} />
                );
            }
        }
    }
    return <g>{tiles}</g>
}

export default HexMapRenderer