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.component';
import Muncher from './muncher.component';
import Values from '../../reducers/Values';
import { SETTINGS } from '../../App';

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

var exclamations = [
    'Congratulations!',
    'Yippee!',
    'Woohoo!',
    'Nice work!',
    'Great job!',
    'Boom!',
    'All finished!',
    'Shazam!'
];

export default class Board extends Component {
    munch(x, y) {
        this.props.dispatch(MuncherActions.munch());

        const index = y * SETTINGS.GRID_HEIGHT + x
        const valid = Values.validate(this.props.grid[index], 0);

        if (valid) {
            const msg = exclamations[Math.floor(Math.random() * exclamations.length)];

            this.props.dispatch(GridActions.updateValues(index, ''));
            this.props.dispatch(ScorebarActions.munchSucceeded());
            this.props.dispatch(MessageActions.display(msg, 'Press Spacebar to Continue'));
        }
        else {
            this.props.dispatch(ScorebarActions.munchFailed());
        }
    };

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

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