import React from "react";
import { Group, Line } from "react-konva";
import { GRID_COLOR } from "../../../../util/colors";
import {
  GRID_LINE_WIDTH_IN_PIXELS,
  MAP_SIZE,
  MAP_SIZE_IN_PIXELS,
  TILE_SIZE_IN_PIXELS
} from "../MapConstants";

const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i);
const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
  0,
  index * TILE_SIZE_IN_PIXELS,
  MAP_SIZE_IN_PIXELS,
  index * TILE_SIZE_IN_PIXELS
]);
const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
  index * TILE_SIZE_IN_PIXELS,
  0,
  index * TILE_SIZE_IN_PIXELS,
  MAP_SIZE_IN_PIXELS
]);

const GridGroup = () => (
  <Group>
    {HORIZONTAL_POINT_PAIRS.concat(
      VERTICAL_POINT_PAIRS
    ).map((points, index) => (
      <Line
        key={index}
        points={points}
        stroke={GRID_COLOR}
        strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
        listening={false}
      />
    ))}
  </Group>
);

export default GridGroup;