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

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

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

let listener = null;

export class Message extends Component {
    keydown(e) {
        if (e.keyCode === 32) {
            this.props.dispatch(MessageActions.hide());
        }
    };

    componentDidMount() {
        listener = this.keydown.bind(this);
        window.addEventListener('keydown', listener);
    };

    componentWillUnmount() {
        window.removeEventListener('keydown', listener);
    };

    // munchFailed(value) {
    //     var self = this;
    //
    //     // var msg = Values.getError(value, State.level);
    //     // this.setState({ hidden: false, message1: msg });
    // };
    //
    // 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);
    // };

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

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

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

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

export default connect(select)(Message);