class GameListContainer extends BaseComponent {
    constructor(props, context) {
        super(props, context);

        this.engine.action({'action': 'game_list'}).then((response) => {
            console.log('Game list init: ', response.data);
            this.store.dispatch(getGamesSuccess(response.data));
        });


        this.update = this.update.bind(this);
        document.addEventListener('update-gamelist', this.update);

        this.join_game_click = this.join_game_click.bind(this);
        this.join_game = this.join_game.bind(this);
        this.join_game_confirm = this.join_game_confirm.bind(this);

        this.state = {
            game_join_to: {},
            game_leave_from: {}
        };
    }

    join_game(game) {
        this.engine.action({'action': 'join_game', 'data': {'uid': game.uid}}).then((response) => {
            switch (response.status) {
                case 'success':
                    console.log('Joined to game: ', response.data.game.name);
                    this.store.dispatch(setCurrentGamesSuccess(response.data.game));
                    this.store.dispatch(setGameSuccess(response.data.game));
                    this.router.push('/game/'+game.uid);
                    break;
                case 'error':
                    console.log('Join game fail: ', response.msg);
                    break;
            }

        });
    }

    join_game_click(game) {
        console.log('Joining to... :', game.name);

        this.setState({ game_join_to: game });
        this.setState({ game_leave_from: {} });

        (async function(that){
            let current_game = await that.engine.get_current_game();

            if (current_game) {

                that.setState({ game_leave_from: current_game });

                if (current_game.uid != game.uid) {
                    that.store.dispatch(showJoinModal(true, game, current_game));
                }
                else {
                    console.log('You already in this game.');
                    that.store.dispatch(setGameSuccess(game));
                    that.router.push('/game/'+game.uid);
                }
            }

            else {
                that.join_game(game);
            }
        })(this);
    }

    join_game_confirm() {
        console.log('Leave game:', this.state.game_leave_from.name);
        this.join_game(this.state.game_join_to);
    }

    update(event) {
        console.log('Game list update: ', event.detail.data);
        this.store.dispatch(getGamesSuccess(event.detail.data));
    }

    render() {
        return (
            <div>
                <GameList games={this.props.games} current_game={this.props.current_game} layout={this.props.layout} join_game_click={this.join_game_click} />
                <ModalWarningJoinContainer join_confirm={this.join_game_confirm}/>
            </div>
        );
    }
}