import React, {Component} from 'react';
import {connect} from 'react-redux';
import Controls from './Controls';
import Board from './Board';
import {cellClicked, newGame, pauseGame, replayGame, updateTimer} from '../actions/board';
import {setColumns, setRows, setTotalMines} from '../actions/controls';

class Game extends Component {

	constructor(props) {
		super(props);
		this.state = {
			timer: null
		};
	}

	render() {
		return (
			<div className={this.getClassNames()}>
				<Controls
					{...this.props.controls}
					isStarted={this.props.board.isStarted}
					isPaused={this.props.board.isPaused}
					isFinished={this.props.board.isFinished}
					onNewGame={this.props.newGame}
					onReplayGame={this.props.replayGame}
					onPauseGame={this.props.pauseGame}
					onRowsChange={this.props.setRows}
					onColumnsChange={this.props.setColumns}
					onMinesChange={this.props.setTotalMines}
				/>
				<Board
					{...this.props.board}
					onCellClick={this.onCellClick.bind(this)}
				/>
			</div>
		);
	}

	getClassNames() {
		const classNames = ['game'];
		if (this.props.board.isPaused) {
			classNames.push('game-paused');
		}
		if (this.props.board.isFinished) {
			classNames.push('game-finished');
		}
		return classNames.join(' ');
	}

	onCellClick(cellId, isLeftClick) {
		if (this.props.board.isFinished || this.props.board.isPaused) {
			return;
		}
		this.props.cellClicked(cellId, isLeftClick);
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.board.gameId !== this.props.board.gameId) {
			this.cancelTimer();
		}
		else if (nextProps.board.isStarted && !this.props.board.isStarted) {
			this.resumeTimer();
		}
		else if (nextProps.board.isFinished && !this.props.board.isFinished) {
			this.cancelTimer();
		}
		else if (nextProps.board.isPaused !== this.props.board.isPaused) {
			if (nextProps.board.isPaused) {
				this.cancelTimer();
			} else {
				this.resumeTimer();
			}
		}
	}

	componentWillMount() {
		this.props.newGame();
	}

	resumeTimer() {
		this.setState({
			timer: setInterval(() => {
				this.props.updateTimer();
			}, 1000)
		});
	}

	cancelTimer() {
		if (this.state.timer !== null) {
			clearInterval(this.state.timer);
			this.setState({
				timer: null
			});
		}
	}

}


const mapStateToProps = state => {
	return {
		board: {...state.board},
		controls: {...state.controls}
	};
};


export default connect(
	mapStateToProps,
	{
		updateTimer,
		cellClicked,
		newGame,
		replayGame,
		pauseGame,
		setRows,
		setColumns,
		setTotalMines
	}
)(Game);
@@ -1577,21 +1577,22 @@
 board.is
-Start
+Finish
 ed && !t
@@ -1609,21 +1609,22 @@
 board.is
-Start
+Finish
 ed) %7B%0A%09%09
@@ -1621,38 +1621,38 @@
 shed) %7B%0A%09%09%09this.
-resume
+cancel
 Timer();%0A%09%09%7D%0A%09%09e
@@ -1669,38 +1669,37 @@
 xtProps.board.is
-Finish
+Start
 ed && !this.prop
@@ -1700,38 +1700,37 @@
 s.props.board.is
-Finish
+Start
 ed) %7B%0A%09%09%09this.ca
@@ -1719,38 +1719,38 @@
 rted) %7B%0A%09%09%09this.
-cancel
+resume
 Timer();%0A%09%09%7D%0A%09%09e

fix bug when losing game on first click