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

import { Component } from 'react';
import { connect } from 'react-redux';
import { getState } from 'react-redux';
import Scorebar from './scorebar.component';
import Titlebar from './titlebar.component';
import Grid from './grid.component';
// import Message from './Message';
import Muncher from './muncher.component';

import * as GridActions from '../../actions/board/grid.actions';
import * as MuncherActions from '../../actions/board/muncher.actions';
import * as ScorebarActions from '../../actions/board/scorebar.actions';

const countEmptyStrings = (acc, curr) => { return acc + (curr === ''); };

export default class Board extends Component {
    munch(x, y) {
        // Before/after grid validation reveals successful munch.
        const pre = this.props.grid.reduce(countEmptyStrings, 0);
        this.props.dispatch(GridActions.updateValues(x, y, 0));
        const post = this.props.grid.reduce(countEmptyStrings, 0);

        this.props.dispatch(ScorebarActions.munch(pre !== post));
        this.props.dispatch(MuncherActions.munch());
    };

    render() {
            // <Message />
        return (<div className='board'>
            <Scorebar />
            <Titlebar />
            <Grid />
            <Muncher munch={this.munch.bind(this)} />
        </div>);
    };
};

// Connect state for inspection to determine dispatching flow.
export default connect((s) => s)(Board);