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

import { Component } from 'react';
import { connect } from 'react-redux';
import { MUNCHER } from '../app/Constants';
import * as creators from '../app/Creators';

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:
                console.warn('munch (leave this here until sure event listener has been removed');
                this.props.dispatch(creators.updateValues(0, 0));
                // var i = y * this.props.width + x;
                //
                //     this.setState({ values: this.state.values }, this.checkComplete);
                //     State.publish('munch/successful');
                // }
                // else {
                //     State.publish('munch/failed', this.state.values[i]);
                // }
                break;

            case 37:
                this.props.dispatch(creators.moveMuncher(MUNCHER.LEFT));
                break;
            case 38:
                this.props.dispatch(creators.moveMuncher(MUNCHER.UP));
                break;
            case 39:
                this.props.dispatch(creators.moveMuncher(MUNCHER.RIGHT));
                break;
            case 40:
                this.props.dispatch(creators.moveMuncher(MUNCHER.DOWN));
                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 {
        x: state.muncher.x,
        y: state.muncher.y
    }
};

export default connect(select)(Muncher);