import { Component } from 'react';
import { connect } from 'react-redux';

import * as ModeActions from './actions/mode.actions';

import Welcome from './components/welcome/welcome.component';
import HighScore from './components/high-score/high-score.component';
import Options from './components/options/options.component';
import Board from './components/board/board.component';

export class App extends Component {
    render() {
        const { mode } = this.props;

        switch (this.props.mode) {
            case ModeActions.WELCOME:
                return <Welcome />;
            case ModeActions.HIGHSCORE:
                return <HighScore />;
            case ModeActions.OPTIONS:
                return <Options />
            case ModeActions.BOARD:
                return <Board />;
        }
    };
};

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

export default connect(select)(App);