require('../styles/modules/boardCanvas.scss');
import React, { Component, PropTypes } from 'react'

class BoardCanvas extends Component {

  componentDidMount() {
    this.paint()
  }

  componentDidUpdate(prevProp, prevState) {
    //need to make this more leniant in the future in case if it wants a board refresh
    if(prevProp && (!prevProp.boardProps.length || (this.props.isMobile !== prevProp.isMobile) || (prevProp.boardProps !== this.props.boardProps))){
      this.paint()
    }
  }

  paint(){
    console.log('painting')
    const { isMobile } = this.props,
          size = isMobile ? '320' : '640'
    let context = this.refs.canvas.getContext("2d");
    context.clearRect(0, 0, size, size);
    context.fillStyle = this.props.colorHex.background;
    context.rect(0,0, size, size);
    context.fill();
    this.drawBorder(context, size, size/16)
    this.drawAllbackground(context, size/16)
  }

  drawBorder(context, boardWidth, boxSize){
    var p = 0;
    for (var x = 0; x < boardWidth; x += boxSize) {
        context.moveTo(x + p, p);
        context.lineTo(x + p, boardWidth + p-5);
    }
    for (var x = 0; x < boardWidth; x += boxSize) {
        context.moveTo(p, x + p);
        context.lineTo(boardWidth + p-5, x + p);
    }
    context.lineWidth = 1;
    context.strokeStyle = "grey";
    context.stroke();
  }

  drawAllbackground(context, size){
    const { isMobile, boardProps } = this.props
          self = this
    boardProps.forEach(function(row, rowIndex){
      row.forEach(function(tile, colIndex){
        self.drawBackgroundX(context, size, colIndex*size, rowIndex*size)
        self.drawWalls(context, size, colIndex*size, rowIndex*size, tile)
      })
    })
  }

  drawBackgroundX(context, boxSize, x, y){
    var colorHex = this.props.colorHex
    /**
     * 8 grey dots
     * grey border square
     * darkgrey minisquare
     * yellow stripes moving diag..REALLY close to offwhite color, lil'yellow
     *
     * offwhite center sq...as huge border to block off missmatch from lines
     */
    context.beginPath();
    context.moveTo(x+boxSize*.2, y+boxSize*.2);
    context.lineTo(x+boxSize*.2, y+boxSize*.8);
    context.lineTo(x+boxSize*.8, y+boxSize*.8);
    context.lineTo(x+boxSize*.8, y+boxSize*.2);
    context.closePath();
    context.lineWidth = .25;
    context.strokeStyle = '#ABADA0';
    context.stroke();
    //moveTo

    //dark grey border
    //4 thick  diagonal dark grey strokes
    //thick yellow-orange stroke:
    context.beginPath();
    context.strokeStyle = colorHex['xSquareY'];
    context.lineWidth = boxSize*.23;
    context.moveTo(x+boxSize*.33, y+boxSize*.33);
    context.lineTo(x+boxSize*.75, y+boxSize*.75);
    context.stroke();

    //thick diag dark grey strokes
    context.beginPath();
    context.strokeStyle = colorHex['xSquareG'];
    context.lineWidth = boxSize*.09;
    context.moveTo(x+boxSize*.33, y+boxSize*.33);
    context.lineTo(x+boxSize*.75, y+boxSize*.75);
    context.stroke();

    context.beginPath();
    context.strokeStyle = colorHex['xSquareG'];
    context.lineWidth = boxSize*.08;

    context.moveTo(x+boxSize*.25, y+boxSize*.47);
    context.lineTo(x+boxSize*.50, y+boxSize*.73);
    context.stroke();

    context.moveTo(x+boxSize*(1-.25), y+boxSize*(1-.47));
    context.lineTo(x+boxSize*(1-.50), y+boxSize*(1-.73));
    context.stroke();

    context.beginPath();
    context.strokeStyle = colorHex['xSquareOverlay']
    context.lineWidth = boxSize*.13;
    context.moveTo(x+boxSize*.28, y+boxSize*.28);
    context.lineTo(x+boxSize*.28, y+boxSize*.72);
    context.lineTo(x+boxSize*.72, y+boxSize*.72);
    context.lineTo(x+boxSize*.72, y+boxSize*.28);
    context.closePath();
    context.stroke();
  }

  drawWalls(context, boxSize, x, y, tile){
    if (tile.upWall){
        this.drawOneWall(context, boxSize, x, y, "N");
    }
    if (tile.leftWall){
        this.drawOneWall(context, boxSize, x, y, "W");
    }
    if (tile.downWall){
        this.drawOneWall(context, boxSize, x, y, "S");
    }
    if (tile.rightWall){
        this.drawOneWall(context, boxSize, x, y, "E");
    }
  }
  drawOneWall(context, boxSize, x, y, dir){
    context.moveTo(x,y);
    context.beginPath();
    //ld, lineDetail hash to draw lines relative to passed-in x and y
    var ld = {
        N:{
            start:{x: 0, y:0},
            end:{x: boxSize, y: 0}
        },
        S:{
            start:{x:boxSize, y:boxSize},
            end:{x:0, y:boxSize}
        },
        W:{
            start:{x: 0, y:0},
            end:{x:0, y:boxSize}
        },
        E:{
            start:{x: boxSize, y: 0},
            end:{x: boxSize, y: boxSize}
        }
    };
    context.moveTo(x+ld[dir].start.x,y+ld[dir].start.y)
    context.lineWidth = this.props.isMobile ? 5 : 7;

    context.lineTo(x+ld[dir].end.x,y+ld[dir].end.y);
    context.strokeStyle = "black";
    context.stroke();
  }

  render() {
    const { isMobile } = this.props,
          size = isMobile ? '320' : '640'
    return (
      <div className = "canvas-container">
        <canvas width = { size } height = { size } ref = "canvas" className = "board-canvas">
        </canvas>
      </div>
    )
  }
}

BoardCanvas.defaultProps = {
  colorHex: {
      brown: '#6C4E2F',
      R:'#F21018',
      G: '#39CC36',
      B: '#0C11CA',
      Y: '#EFEB1D',
      silverBorder    : '#72736D',
      silverLight     : '#ABADA0', //tiny xSquare dots
      lightYellow     : '#E8E549', //background
      lightGrey       : '#66665D', //center walls
      darkGrey        : '#51514B', //center square
      background      : '#E7D4B0', //grey, orange tint
      xSquareBorder   : '#ABADA0', //tiny xSquare dots
      xSquareBg       : '#D4D7C7',//offwhite
      xSquareOverlay  : '#ECEDE6', //light, offwhite
      xSquareG        : '#DBDBDB',
      xSquareY        : '#EBE0A6'
  }
};

export default BoardCanvas


// WEBPACK FOOTER //
// ./components/BoardCanvas.js