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 BoardActions from '../../actions/board/board.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';

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

let muncherListener = null;
let messageListener = null;

export default class Board extends Component {
    componentDidMount(n) {
        muncherListener = this.muncherKeydown.bind(this);
        messageListener = this.messageKeydown.bind(this);

        window.addEventListener('keydown', muncherListener);
        // window.addEventListener('keydown', messageListener);

        this.props.dispatch(BoardActions.nextLevel());
    };

    muncherKeydown(e) {
        switch (e.keyCode) {
            case 32:
                this.munch();
                break;

            case 37:
                this.props.dispatch(MuncherActions.moveLeft());
                break;

            case 38:
                this.props.dispatch(MuncherActions.moveUp());
                break;

            case 39:
                this.props.dispatch(MuncherActions.moveRight());
                break;

            case 40:
                this.props.dispatch(MuncherActions.moveDown());
                break;
        }
    };

    messageKeydown(e) {
        if (e.keyCode === 32) {
            window.removeEventListener('keydown', messageListener);
            window.addEventListener('keydown', muncherListener);

            this.props.dispatch(MessageActions.hide());
        }
    };

    componentWillUnmount() {
        window.removeEventListener('keydown', muncherListener);
        window.removeEventListener('keydown', messageListener);
    };

    munch() {
        const { board, muncher, dispatch } = this.props;
        const index = muncher.y * SETTINGS.GRID_HEIGHT + muncher.x;

        dispatch(MuncherActions.munch());

        if (board.values[index].valid) {
            dispatch(BoardActions.hideValue(index));
            dispatch(ScorebarActions.munchSucceeded());
        }
        else {
            window.removeEventListener('keydown', muncherListener);
            window.addEventListener('keydown', messageListener);

            const msg = Values.getError(board.values[index].value, board.level);
            dispatch(MessageActions.display(msg, 'Press Spacebar to Continue'));
            dispatch(ScorebarActions.munchFailed());
        }

        if (Values.checkComplete(this.props.board.values, board.level)) {
            window.removeEventListener('keydown', muncherListener);
            window.addEventListener('keydown', messageListener);

            const msg = exclamations[Math.floor(Math.random() * exclamations.length)];
            dispatch(MessageActions.display(msg, 'Press Spacebar to Continue'));
            dispatch(BoardActions.nextLevel());
        }
    };

    render() {
        const { board, muncher, message } = this.props;

        return (<div className='board'>
            <Scorebar />
            <Titlebar title={board.title} />
            <Message hidden={message.hidden} line1={message.line1} line2={message.line2} />
            <Muncher x={muncher.x} y={muncher.y} />
            <Grid values={board.values} />
        </div>);
    };
};

const select = (state) => {
    return {
        board: state.board,
        muncher: state.muncher,
        message: state.message
    };
}

export default connect(select)(Board);