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 Troggle from './troggle.component';

import Values from '../../reducers/Values';
import TroggleAI from '../../reducers/TroggleAI';
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';
import * as TroggleActions from '../../actions/board/troggle.actions';

const troggleMoveTimers = [];
const troggleCreateTimers = [];

let listener = null;

export default class Board extends Component {
    refocus() {
        this.props.dispatch(MessageActions.hide());
        ReactDOM.findDOMNode(this.refs.muncher).focus();
    };

    componentDidMount() {
        ReactDOM.findDOMNode(this.refs.muncher).focus();
        listener = this.refocus.bind(this);
        window.addEventListener('click', listener);
        this.nextLevel();
    };

    componentWillUnmount() {
        // this.clearTroggleTimers();
        window.removeEventListener('keydown', listener);
    };

    nextLevel() {
        this.props.dispatch(BoardActions.nextLevel());
        // this.props.dispatch(TroggleActions.clearAll());
        // this.clearTroggleTimers();
        // this.createTroggles();
    };

    // clearTroggleTimers() {
    //     troggleMoveTimers.forEach((timer) => {
    //         clearTimeout(timer);
    //     });
    //
    //     troggleCreateTimers.forEach((timer) => {
    //         clearTimeout(timer);
    //     });
    // };
    //
    // createTroggle(index) {
    //     const newCoords = TroggleAI.create();
    //     this.props.dispatch(TroggleActions.create(newCoords.x, newCoords.y));
    //     troggleMoveTimers.push(setTimeout(this.moveTroggle.bind(this, index), 1000));
    // };
    //
    // createTroggles() {
    //     const troggleCount = 3; //Math.min(Math.ceil(this.props.board.level / 2), 5);
    //     for (let i = 0; i < troggleCount; i++) {
    //         setTimeout(this.createTroggle.bind(this, i), (i + 1) * 5000);
    //     }
    // };
    //
    // moveTroggle(index) {
    //     const newCoords = TroggleAI.move(
    //         this.props.troggles[index].x,
    //         this.props.troggles[index].y,
    //         this.props.muncher.x,
    //         this.props.muncher.y
    //     );
    //
    //     if (newCoords.x === this.props.muncher.x && newCoords.y === this.props.muncher.y) {
    //         this.props.dispatch(MessageActions.show("You've been eaten by a troggle!"));
    //         this.props.dispatch(TroggleActions.clearAll());
    //     }
    //     else {
    //         this.props.dispatch(TroggleActions.move(index, newCoords.x, newCoords.y));
    //         clearTimeout(troggleMoveTimers[index]);
    //         troggleMoveTimers[index] = setTimeout(this.moveTroggle.bind(this, index), 1000);
    //     }
    // };

    messageNext() {
        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());
        }
        else {
            const msg = Values.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 (Values.checkComplete(this.props.values, this.props.level)) {
        //     this.props.dispatch(MessageActions.exclaim());
        // }
    };

    render() {
        // const troggleElements = [];
        // for (let i = 0; i < troggles.length; i++) {
        //     troggleElements[i] = <Troggle x={troggles[i].x} y={troggles[i].y} key={i} />;
        // }
            // {troggleElements}

        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' next={this.muncherNext.bind(this)} />
        </div>);
    };
};

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

export default connect(select)(Board);