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

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

var Cell = React.createClass({
    render() {
        var classname = ['cell', 'x' + this.props.x, 'y' + this.props.y];

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

module.exports = React.createClass({
    generateValues() {
        return Values.generate(this.props.width * this.props.height, State.level);
    },

    getInitialState() {
        return { values: this.generateValues() };
    },

    componentDidMount() {
        State.subscribe('game/levelup', this.levelUp);
    },

    levelUp() {
        if (Values.checkWin(this.state.values, State.level) === true) {
            State.level++;
            this.setState({ values: this.generateValues() });
        }
    },

    munch(x, y) {
        var i = y * this.props.width + x;

        if (this.state.values[i] === "") {
            return;
        }

        if (Values.validate(this.state.values[i], State.level)) {
            this.state.values[i] = "";
            this.setState({ values: this.state.values }, this.levelUp);
            State.publish('munch/successful');
        }
        else {
            State.publish('munch/failed');
        }
    },

    render() {
        var cells = [];
        var i;

        for (var x = 0; x < this.props.width; x++) {
            for (var y = 0; y < this.props.height; y++) {
                i = y * this.props.width + x;
                cells.push(<Cell value={this.state.values[i]} x={x} y={y} key={i} />);
            }
        }

        return (<div className='grid'>{cells}</div>);
    }
});