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

var React = require('react');
var State = require('../State');

var exclamations = [
    'Congratulations!',
    'Yippee!',
    'Woohoo!',
    'Nice work!',
    'Great job!',
    'Boom!',
    'All finished!',
    'Shazam!'
];

module.exports = React.createClass({
    getInitialState() {
        return {
            message1: 'Congratulations!',
            message2: 'Press spacebar to continue.',
            hidden: true
        };
    },

    componentDidMount() {
        State.subscribe('level/complete', this.levelComplete);
        State.subscribe('level/next', this.levelNext);
    },

    handleKeydown(e) {
        if (e.keyCode === 32) {
            window.removeEventListener('keydown', this.handleKeydown);
            State.publish('level/next');
        }
    },

    levelComplete() {
        var msg = exclamations[Math.floor(Math.random() * exclamations.length)];
        this.setState({ hidden: false, message1: msg });
        window.addEventListener('keydown', this.handleKeydown);
    },

    levelNext() {
        this.setState({ hidden: true });
    },

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

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

        return (
            <div className={classname.join(' ')}>
                {this.state.message1}
                <br />
                {this.state.message2}
            </div>
        );
    }
});