// Copyright 2020 Thomas Hintz
//
// This file is part of the Alpha Centauri Farming project.
//
// The Alpha Centauri Farming project is free software: you can
// redistribute it and/or modify it under the terms of the GNU General
// Public License as published by the Free Software Foundation, either
// version 3 of the License, or (at your option) any later version.
//
// The Alpha Centauri Farming project is distributed in the hope that
// it will be useful, but WITHOUT ANY WARRANTY; without even the
// implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR
// PURPOSE.  See the GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with the Alpha Centauri Farming project.  If not, see
// <https://www.gnu.org/licenses/>.

import React, { Fragment } from 'react'
import { connect } from 'react-redux'

import Board from '../farm/Board.jsx'
import MessagePanel from '../farm/MessagePanel.jsx'
import CreateOrJoin from '../create-or-join/CreateOrJoin.jsx'
import NewGame from '../new-game/NewGame.jsx'
import JoinGame from '../join-game/JoinGame.jsx'
import Welcome from '../welcome/Welcome.jsx'
import Tractor from '../tractor/Tractor.jsx'

import { SCREENS, messagePanelId } from '../../constants.js'
import { play } from './actions.js'

class Chrome extends React.Component {
    render() {
        return (
            <div className='flex-fullcenter'>
                <div className='background-heading'><h1>Alpha Centauri Farming</h1></div>
                {this.props.children}
                <Tractor spikes={this.props.spikes} className={this.props.tractorClass} />
            </div>
        );
    }
}

class App extends React.Component {
    render() {
        let view;
        switch (this.props.screen) {
        case SCREENS.intro:
            view = (<Chrome spikes={true} tractorClass='intro'><Welcome /></Chrome>);
            break;
            case SCREENS.start:
                view = (<Chrome><CreateOrJoin signOut={this.props.logout} /></Chrome>);
                break;
            case SCREENS.newGame:
                view = (<Chrome>
                    <div className='view-container'>
                        <NewGame colors={['green', 'red', 'blue', 'yellow', 'black']}
                                 button={'Start'}
                                 title={'New Game'}
                                 type={'new-game'}
                                 showGameName={true}
                                 createAccount={this.props.createAccount}
                                 login={this.props.login}
                                 errors={this.props.errors}
                        />
                    </div>
                </Chrome>);
                break;
            case SCREENS.joinGame:
                view = (
                    <Chrome>
                        <div className='view-container'>
                            <JoinGame createAccount={this.props.createAccount}
                                      login={this.props.login}
                                      errors={this.props.errors}
                            />
                        </div>
                    </Chrome>);
            break;
        case SCREENS.play:
            view = (<Board />);
            break;
        }
        return (
            <Fragment>
                {view}
                <div id={messagePanelId}><MessagePanel /></div>
            </Fragment>
        );
    }
}

export default connect(
    state => state.app,
    null
)(App);

