// ## Canvas Component
//
// A React Component abstraction for doing raw HTML5 canvas
// rendering in React

// Codepen doesn't do es6 imports...
// import React, { PureComponent } from 'react';
// import ReactDOM from 'react-dom';
// import PropTypes from 'prop-types';

const { PureComponent } = React;
const { render } = ReactDOM;

// Component

class CanvasComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();

    // https://www.html5rocks.com/en/tutorials/canvas/hidpi/
    this.canvasRatio = window.devicePixelRatio || 1;
  }

  // Life-cycle
  componentDidMount() {
    this._initCanvas();
    this._drawCanvas();
  }

  componentDidUpdate() {
    this._drawCanvas();
  }

  // Helpers
  _initCanvas() {
    const canvasElt = this.canvasRef.current;
    if (canvasElt) {
      const ctx = canvasElt.getContext("2d");
      ctx.scale(this.canvasRatio, this.canvasRatio);
      if (this.props.init) {
        this._frame(() => {
          this.props.init(canvasElt, ctx, this.props);
        });
      }
    }
  }

  _drawCanvas() {
    const canvasElt = this.canvasRef.current;
    if (canvasElt) {
      const ctx = canvasElt.getContext("2d");

      if (this.props.draw) {
        this._frame(() => {
          this.props.draw(canvasElt, ctx, this.props);
        });
      }
    }
  }

  _frame = (fn) => window.requestAnimationFrame(fn);

  // Render
  render() {
    const { width, height } = this.props;
    const style = {
      width: `${width}px`,
      height: `${width}px`
    };

    return (
      <canvas
        ref={this.canvasRef}
        width={width * this.canvasRatio}
        height={height * this.canvasRatio}
        style={style}
      />
    );
  }
}

CanvasComponent.propTypes = {
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  init: PropTypes.func,
  draw: PropTypes.func
};

//
// ## Demo
//

// ### Life Model
//
// Abstraction for the state of Conway's Game of Life
//
const LifeModel = (function () {
  const ALIVE = true;
  const DEAD = false;

  const self = {
    create: (width, height) => {
      const positions = [];
      for (let y = 0; y < height; y++) {
        let row = [];
        for (let x = 0; x < width; x++) {
          row.push(parseInt(Math.random() * 2) === 0 ? ALIVE : DEAD);
        }
        positions.push(row);
      }
      return positions;
    },
    step: (positions, width, height) => {
      let newPositions = [];

      for (let y = 0; y < height; y++) {
        let newRow = [];
        newPositions.push(newRow);

        for (let x = 0; x < width; x++) {
          let isAlive = self.isAlive(positions, x, y);
          let count = self._countNeighbors(positions, x, y);
          if (isAlive) {
            newRow.push(count === 2 || count === 3 ? ALIVE : DEAD);
          } else {
            newRow.push(count === 3 ? ALIVE : DEAD);
          }
        }
      }
      return newPositions;
    },
    isAlive: (positions, x, y) => positions[y] && positions[y][x] === ALIVE,
    _countNeighbors: (positions, x, y) => {
      let count = 0;
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          if (!(i === 0 && j === 0) && self.isAlive(positions, x + j, y + i)) {
            count += 1;
          }
        }
      }
      return count;
    }
  };
  return self;
})();

// ### Life Component
//
// A simple component to render Conway's Game of Life
// using LifeModel and CanvasComponent.
//
class LifeComponent extends React.Component {
  constructor(props) {
    super(props);

    const width = 100;
    const height = 100;
    const positions = LifeModel.create(width, height);

    this.state = { width, height, positions, paused: true };
  }

  // Life-cycle

  componentDidMount() {
    if (!this.state.paused) {
      this._start();
    }
  }

  componentWillUnmount() {
    this._pause();
  }

  // Helpers
  _start() {
    this.setState({ paused: false });
    const loop = () => {
      window.clearTimeout(this._timeout);
      this._timeout = window.setTimeout(() => {
        let { positions, width, height } = this.state;
        let nextPositions = LifeModel.step(positions, width, height);
        this.setState({ positions: nextPositions });
        loop();
      }, 150);
    };

    loop();
  }

  _pause() {
    this.setState({ paused: true });
    window.clearTimeout(this._timeout);
  }

  // Render

  render() {
    const { width, height, positions, paused } = this.state;
    const zoom = 4;

    const clickToggle = () => (paused ? this._start() : this._pause());
    const style = { cursor: "pointer", display: "inline-block" };

    return (
      <div style={style} onClick={clickToggle}>
        <CanvasComponent
          width={width * zoom}
          height={height * zoom}
          init={init}
          draw={draw}
          positions={positions}
          zoom={zoom}
          paused={paused}
        />
      </div>
    );
  }
}

// ### Canvas Component Functions

const init = (canvas, ctx, props) => {};

const draw = (canvas, ctx, props) => {
  const { width, height, zoom, positions, paused } = props;

  const gameWidth = width / zoom;
  const gameHeight = height / zoom;

  ctx.save();
  ctx.scale(zoom, zoom);
  ctx.clearRect(0, 0, gameWidth, gameHeight);
  ctx.fillStyle = "#000";

  for (let y = 0; y < gameHeight; y++) {
    for (let x = 0; x < gameWidth; x++) {
      if (LifeModel.isAlive(positions, x, y)) {
        ctx.fillRect(x, y, 1, 1);
      }
    }
  }
  ctx.restore();

  if (paused) {
    const fontSize = Math.min(width, height) / 9;
    ctx.fillStyle = "#fff";
    ctx.strokeStyle = "#000";
    ctx.lineWidth = Math.max(1, fontSize / 10);
    ctx.font = `${fontSize}px impact`;
    const text = "Click to Start";
    const x = (width - ctx.measureText(text).width) / 2;
    const y = (height + fontSize) / 2;
    ctx.strokeText(text, x, y);
    ctx.fillText(text, x, y);
  }
};

//

render(<LifeComponent />, document.getElementById("root"));