// 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 { GroupBox, Row, Col, Button } from '../widgets.jsx'

import { startOrJoinGame } from '../start/actions.js'
import { start } from '../app/actions.js'
import LoginOrCreateAccount from '../login-or-create-account/LoginOrCreateAccount.jsx';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowCircleLeft, faCaretDown } from '@fortawesome/free-solid-svg-icons'

import NewGame from '../new-game/NewGame.jsx'

const JoinGameScreens = { list: 'list', details: 'details' };

const defaultMaxGames = 5;

class JoinGame extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            screen: JoinGameScreens.list,
            game: null,
            showSignIn: false,
            maxGames: defaultMaxGames,
            maxOpenGames: defaultMaxGames
        };
    }

    handleClickGame = game => {
        this.setState({ screen: JoinGameScreens.details,
                        game: game
        });
    }

    handleBack = e => {
        if (this.state.screen === JoinGameScreens.details) {
            this.setState({ screen: JoinGameScreens.list });
        } else {
            this.props.start();
        }
    }

    handleJoinAsExisting = (e, id) => {
        e.preventDefault();
        this.props.startOrJoinGame({ type: 'join-as-existing',
                                     gameId: id });
    }

    showSignIn = (e) => {
        e.preventDefault();
        this.setState(state => { return { showSignIn: !state.showSignIn }; });
    }

    showAllGames = (e) => {
        e.preventDefault();
        this.setState({ maxGames: Number.MAX_SAFE_INTEGER });
    }

    showAllOpenGames = (e) => {
        e.preventDefault();
        this.setState({ maxOpenGames: Number.MAX_SAFE_INTEGER });
    }

    render() {
        const { games, openGames } = this.props;
        return (
            <GroupBox title={(
                    <Fragment>
                        <a onClick={this.handleBack}>
                            <FontAwesomeIcon icon={faArrowCircleLeft} />
                        </a>
                        Join Game
                    </Fragment>
            )}>
                <Row>
                    <Col width='12'>
                        {this.state.screen === JoinGameScreens.list ?
                         (<>
                             <h3>My Games</h3>
                             {(!this.props.user && !this.state.showSignIn) ? (
                                  <a onClick={this.showSignIn}>Sign In to see your games</a>
                             ) : (<></>)}
                             {(!this.props.user && this.state.showSignIn) ? (
                                  <>
                                      <hr />
                                      <LoginOrCreateAccount login={this.props.login}
                                                            createAccount={this.props.createAccount}
                                                            errors={this.props.errors}
                                                            showLogin={true}
                                      />
                                      <hr />
                                  </>
                             ) : (<></>)}
                             <ul>
                                 {games.slice(0, this.state.maxGames)
                                       .map((g, i) =>
                                           (
                                               <li key={i}>
                                                   <a onClick={(e) => this.handleJoinAsExisting(e, g.id)}>{g.name}</a>
                                               </li>
                                           ))}
                                 {games.length > this.state.maxGames ? (
                                      <li>
                                          <center>
                                              <a onClick={this.showAllGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
                                          </center>
                                      </li>
                                 ) : (<></>)}
                             </ul>
                             <h3>Open Games</h3>
                             <ul>
                                 {openGames.slice(0, this.state.maxOpenGames)
                                           .map((g, i) =>
                                               (
                                                   <li key={i}>
                                                       <a onClick={e => {
                                                               e.preventDefault();
                                                               this.handleClickGame(g); }}>{g.name}</a>
                                                   </li>
                                               ))}
                                 {openGames.length > this.state.maxOpenGames ? (
                                      <li>
                                          <center>
                                              <a onClick={this.showAllOpenGames}><FontAwesomeIcon icon={faCaretDown} /> Show all</a>
                                          </center>
                                      </li>
                                 ) : (<></>)}
                             </ul>
                         </>
                         )
                         : (
                             <Fragment>
                                 <h3><b>Game:</b> {this.state.game.name}</h3>
                                 <NewGame colors={this.state.game.colors}
                                          button={'Join'}
                                          showGameName={false}
                                          gameName={this.state.game.name}
                                          gameId={this.state.game.id}
                                          type={'join-game'}
                                          hideBack={true}
                                          createAccount={this.props.createAccount}
                                          login={this.props.login}
                                          errors={this.props.errors}
                                          title={'Join as New Player'} />
                             </Fragment>)}
                    </Col>
                </Row>
            </GroupBox>
        );
    }
}

export default connect(
    state => state.start.start,
    { startOrJoinGame, start }
)(JoinGame)
