require('../../sass/board/message.scss');

import { Component } from 'react';
import { connect } from 'react-redux';
import * as MessageActions from '../../actions/board/message.actions';

let refocusListener = null;

export class Message extends Component {
    componentDidMount() {
        // refocusListener = this.refocus.bind(this);
        // window.addEventListener('click', refocusListener);
    };

    componentWillUnmount() {
        // window.removeEventListener('click', refocusListener);
    };

    refocus() {
        this.props.dispatch(MessageActions.hide());
    };

    keydown(e) {
        if (e.keyCode === 32) {
            this.props.next();
        }
    };

    render() {
        var classname = ['message'];

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

        //<div className={classname.join(' ')} tabIndex='1' onKeyDown={this.keydown.bind(this)}>

        return (
            <div className={classname.join(' ')}>
                {this.props.message}
                <br />
                Press Spacebar to continue.
            </div>
        );
    };
};

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

export default connect(select)(Message);