import document from "document";
import * as colors from "colors";
import * as characters from "characters";

var starttime, endtime;

export let currentDigits = [-1,-1,-1,-1,-1,-1,-1,-1];

function getSquares(character) {
  if (typeof character === 'string') {
    return characters.chars[character];
  } else {
    return characters.numbers[character];
  }
}

export function setDigits(digits, forceRedraw) {
  for(let i=0; i<digits.length; i++) {
    let digit = digits[i];
    if (forceRedraw || digit != currentDigits[i]) {
      setDigit(i, digit);
      currentDigits[i] = digit;
    }
  }
}

export function setDigit(digit, character) {
  /*
  starttime = new Date();
  console.log('updating digit '+digit+': '+character);
  */
  /*
  squares.forEach(function(line, lineNum) {
    line.forEach(function(square, squareNum) {
      let squareElem = digitElem.getElementById(lineNum+'-'+squareNum);
      if (square == 0) {
        squareElem.style.display = 'none';
      } else {
        //let localColor = colors.pickColor(square-1);
        squareElem.style.display = 'inline';
        //squareElem.style.fill = localColor;
        squareElem.style.fill = 'red';
      }
    });
  });
  */
  let squares = getSquares(character);
  let digitElemChildren = document.getElementById('digit'+digit).getElementsByClassName('square');
  for (let i = 0; i < digitElemChildren.length; i++) {
    
    let square = squares[Math.floor(i/characters.charwidth)][i%characters.charwidth];
    let squareElem = digitElemChildren[i];
    if (square == 0) {
      if (squareElem.style.display !== 'none') {
        squareElem.style.display = 'none';
      };
    } else {
      let localColor = colors.pickColor(square-1);
      if (squareElem.style.display !== 'inline') {
        squareElem.style.display = 'inline';
      };
      squareElem.style.fill = localColor;
    }
  }
  /*
  endtime = new Date();
  console.log('digit updated at '+(endtime-starttime)+' ms');
  */
}