import { Component } from 'react';
import { connect } from 'react-redux';

import * as ModeActions from '../../actions/mode.actions';
import * as NewGameActions from '../../actions/welcome/new-game.actions';

let blinkTimer = null;
let newgameListener = null;

const toggleTimeout = function() {
    var hidden = this.props.blink;
    this.props.dispatch(NewGameActions.blink());
    blinkTimer = setTimeout(toggleTimeout.bind(this), 600);
};

export default class NewGame extends Component {
    componentDidMount() {
        newgameListener = this.handleKeydown.bind(this);
        window.addEventListener('keydown', newgameListener);
        toggleTimeout.call(this);
    };

    componentWillUnmount() {
        window.removeEventListener('keydown', newgameListener);
        clearTimeout(blinkTimer);
    };

    handleKeydown(e) {
        if (e.keyCode === 32) {
            this.props.dispatch(ModeActions.board());
        }
    };

    render() {
        const classname = ['newgame'];

        if (this.props.hidden === true) {
            classname.push('hidden');
        }

        return (
            <div className={classname.join(' ')}>Press Space Bar To Play</div>
        );
    };
};

const select = (state) => {
    return state.newgame;
};

export default connect(select)(NewGame);