const svgns = "http://www.w3.org/2000/svg";
const dataset = document.currentScript.dataset;
const svg = document.querySelector('svg');
const gb = svg.querySelector('.gameboard');
const bg = svg.querySelector('#background');
const imageMaps = svg.querySelector('#image-maps');
const grid = gb.querySelector('.grid');
const dots = gb.querySelector('#dots');

if ('cols' in dataset && 'rows' in dataset) {
  const cellTemplate = svg.querySelector('#hex');

  createCells(grid, dataset, cellTemplate.id);
}

const sequence = getComputedStyle(gb).transform.match(/-?\d+\.?\d*/g);
const mtx = new DOMMatrix(sequence || '');
bg.style.transform = mtx;

const bbox = grid.getBBox();

bbox.height += 5;

setElAttrs(bg, bbox);
setElAttrs(dots, bbox)
svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));

function setElAttrs(el, attrs) {
  for (key in attrs) {
    el.setAttributeNS(null, key, attrs[key]);
  }
}

function formatForViewBox({ x, y, width, height }) {
  return `${x} ${y} ${width} ${height}`;
}

function calcComputedBboxFor(el) {
  const { x, y, width, height } = el.getBBox();
  const originPt = new DOMPoint(x, y);
  const maxPt = new DOMPoint(width + x, height + y);

  const sequence = getComputedStyle(el).transform.match(/-?\d+\.?\d*/g);
  const mtx = new DOMMatrix(sequence || '');

  const { x: originPtX, y: originPtY } = originPt.matrixTransform(mtx);
  const { x: maxPtX, y: maxPtY } = maxPt.matrixTransform(mtx);

  return { x: originPtX, y: originPtY, width: maxPtX - originPtX, height: maxPtY - originPtY };
}

function createCells(container, { cols, rows }, templateId) {
  for (let rowNum = 0; rowNum < +rows; rowNum++) {
    const row = document.createElementNS(svgns, 'g');
    row.dataset.y = rowNum;

    for (let colNum = 0; colNum < +cols; colNum++) {
      const cell = document.createElementNS(svgns, 'g');
      cell.dataset.x = colNum;

      const cellShape = document.createElementNS(svgns, 'use');
      cellShape.setAttribute('href', `#${templateId}`);

      cell.appendChild(cellShape);
      row.appendChild(cell);
    }

    container.appendChild(row);
  }
}
