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

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

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);
        State.subscribe('munch/failed', this.munchFailed);
    },

    munchFailed(value) {
        var self = this;
        
        function keydown(e) {
            if (e.keyCode === 32) {
                window.removeEventListener('keydown', keydown);
                self.setState({ hidden: true });
            }
        };

        var msg = Values.getError(value, State.level);
        this.setState({ hidden: false, message1: msg });
        window.addEventListener('keydown', keydown);
    },

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

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

    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>
        );
    }
});