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

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

let listener = null;

export class Muncher extends Component {
    keydown(e) {
        const x = this.props.x;
        const y = this.props.y;

        switch (e.keyCode) {
            case 32:
                this.props.munch(x, y);
                break;

            case 37:
                this.props.dispatch(Actions.moveLeft());
                break;

            case 38:
                this.props.dispatch(Actions.moveUp());
                break;

            case 39:
                this.props.dispatch(Actions.moveRight());
                break;

            case 40:
                this.props.dispatch(Actions.moveDown());
                break;
        }
    };

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

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

    render() {
        const classname = ['muncher', 'x' + this.props.x, 'y' + this.props.y];

        return (
            <div className={classname.join(' ')}></div>
        );
    };
};

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

export default connect(select)(Muncher);