const preact = require('preact');
const { Component } = require('preact');
const { connect } = require('preact-redux');
const linkState = require('linkstate').default;

const actions = require('./actions');
const { postData, errorToast } = require('./../../client/src/utils');

const AcpGameList = require('./acp.game.list');
const AcpUser = require('./acp.user');

const addState = connect(
    function receiveState(state) {
        const {
            account,
            user,
            msg,
        } = state;

        return {
            account,
            user,
            msg,
        };
    },

    function receiveDispatch(dispatch) {
        function setUser(user) {
            dispatch(actions.setUser(user));
        }

        function setGames(list) {
            dispatch(actions.setGames(list));
        }

        function setMsg(msg) {
            dispatch(actions.setMsg(msg));
        }

        return {
            setUser,
            setMsg,
            setGames,
        };
    }
);


class AcpMain extends Component {
    constructor(props) {
        super(props);

        this.state = {
            id: null,
            name: null,
        };
    }

    render(args, state) {
        const {
            setGames,
            setUser,
            setMsg,

            msg,
        } = args;

        const {
            name,
            id,
        } = state;

        const reset = () => {
            setMsg(null);
            this.setState({ id: null, name: null });
        };

        const getUser = () => {
            reset();
            postData('/acp/user', { id, name })
                .then(res => res.json())
                .then(data => {
                    if (data.error) return setMsg(data.error);
                    setUser(data);
                })
                .catch(error => errorToast(error));
        };

        const gameList = () => {
            reset();
            postData('/acp/game/list', { number: 20 })
                .then(res => res.json())
                .then(data => {
                    if (data.error) return setMsg(data.error);
                    console.log(data);
                    setGames(data.data);
                })
                .catch(error => errorToast(error));
        };

        const gameOpen = () => {
            reset();
            postData('/acp/game/open')
                .then(res => res.json())
                .then(data => {
                    if (data.error) return setMsg(data.error);
                    console.log(data);
                    setGames(data);
                })
                .catch(error => errorToast(error));
        };

        return (
            <main class='menu'>
                <div class="top">
                    <div class="msg">{msg}</div>
                    <AcpUser />
                    <AcpGameList />
                </div>
                <div class="bottom acp list">
                    <div>
                        <label for="current">Username:</label>
                        <input
                            class="login-input"
                            type="text"
                            name="name"
                            value={this.state.name}
                            onInput={linkState(this, 'name')}
                            placeholder="name"
                        />
                        <input
                            class="login-input"
                            type="text"
                            name="userid"
                            value={this.state.id}
                            onInput={linkState(this, 'id')}
                            placeholder="id"
                        />
                        <button
                            onClick={getUser}>
                            Search
                        </button>
                    </div>
                    <div>
                        <label for="current">Game:</label>
                        <input
                            class="login-input"
                            type="text"
                            name="userid"
                            value={this.state.id}
                            onInput={linkState(this, 'id')}
                            placeholder="id"
                        />
                        <button
                            onClick={getUser}>
                            Search
                        </button>
                        <button
                            onClick={gameList}>
                            Last 20
                        </button>
                        <button
                            onClick={gameOpen}>
                            Open
                        </button>
                    </div>
                </div>
            </main>
        );
    }
}

module.exports = addState(AcpMain);