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 Troggles from './troggles.component';

import ValuesLogic from '../../logic/values.logic.js';
import TroggleLogic from '../../logic/troggle.logic.js';
import { SETTINGS } from '../../App';

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

let nextLevelFlag = false;

export default class Board extends Component {
    componentDidMount() {
        this.nextLevel();
    };

    nextLevel() {
        this.props.dispatch(BoardActions.nextLevel());
        TroggleLogic.clearAll(this.props.dispatch);
        TroggleLogic.createTroggles(this.props.dispatch);
    };

    messageNext() {
        if (nextLevelFlag === true) {
            this.nextLevel();
            nextLevelFlag = false;
        }
        this.props.dispatch(MessageActions.hide());
        ReactDOM.findDOMNode(this.refs.muncher).focus();
    };

    muncherNext(x, y) {
        const index = y * SETTINGS.GRID_WIDTH + x;

        if (this.props.values[index].valid) {
            this.props.dispatch(BoardActions.hideValue(index));
            this.props.dispatch(ScorebarActions.munchSucceeded());

            // State will not have been updated; temporary state created for checking.
            const tmp = this.props.values.slice(0);
            tmp[index].show = false;
            if (ValuesLogic.checkComplete(tmp, this.props.level)) {
                nextLevelFlag = true;
                this.props.dispatch(MessageActions.exclaim());
                ReactDOM.findDOMNode(this.refs.message).focus();
            }
        }
        else {
            const msg = ValuesLogic.getError(this.props.values[index].value, this.props.level);
            this.props.dispatch(MessageActions.show(msg));
            this.props.dispatch(ScorebarActions.munchFailed());
            ReactDOM.findDOMNode(this.refs.message).focus();
        }
        //
        // if (troggles[i].x === muncher.x && troggles[i].y === muncher.y) {
        //     this.props.dispatch(MessageActions.show("You've been eaten by a troggle!"));
        //     this.props.dispatch(ScorebarActions.munchFailed());
        //     TroggleLogic.frozen = true;
        //     ReactDOM.findDOMNode(this.refs.message).focus();
        // }
    };

    render() {
        return (<div className='board'>
            <Scorebar />
            <Titlebar title={this.props.title} />
            <Message ref='message' next={this.messageNext.bind(this)} />
            <Grid values={this.props.values} />
            <Muncher ref='muncher' onMunch={this.muncherNext.bind(this)} />
            <Troggles ref='troggles' />
        </div>);
    };
};

const select = (state) => {
    return state.board;
}

export default connect(select)(Board);