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

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

let listener = null;

export class Muncher extends Component {
    componentDidMount() {
        listener = this.keydown.bind(this);
        window.addEventListener('keydown', listener);
    };

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

    keydown(e) {
        if (this.props.frozen === true) {
            return;
        }

        const x = this.props.x;
        const y = this.props.y;

        switch (e.keyCode) {
            case 37:
                if (x !== 0) {
                    this.props.dispatch(MuncherActions.moveLeft());
                }
                break;

            case 38:
                if (y !== 0) {
                    this.props.dispatch(MuncherActions.moveUp());
                }
                break;

            case 39:
                if (x !== SETTINGS.GRID_WIDTH - 1) {
                    this.props.dispatch(MuncherActions.moveRight());
                }
                break;

            case 40:
                if (y !== SETTINGS.GRID_HEIGHT - 1) {
                    this.props.dispatch(MuncherActions.moveDown());
                }
                break;
        }
    };

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