const preact = require('preact');
const { connect } = require('preact-redux');

const actions = require('../actions');

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            game,
            animating,
            account,
        } = state;

        function sendAbandon() {
            return ws.sendInstanceAbandon(game.instance);
        }

        function sendDraw() {
            return ws.sendGameOfferDraw(game.id);
        }

        function sendConcede() {
            return ws.sendGameConcede(game.id);
        }

        return {
            game,
            account,

            sendAbandon,
            sendDraw,
            sendConcede,
            animating,
        };
    },

    function receiveDispatch(dispatch) {
        function leave() {
            dispatch(actions.setNav('play'));
            dispatch(actions.setGame(null));
        }

        return { leave };
    }

);

function GameCtrlTopBtns(args) {
    const {
        game,
        account,

        leave,
        sendAbandon,
        sendDraw,
        sendConcede,
        animating,
    } = args;

    const finished = game && game.phase === 'Finished';
    const { abandonState, drawState, concedeState } = this.state;

    const player = game.players.find(p => p.id === account.id);
    const drawOffered = player && player.draw_offered;

    const abandonStateTrue = e => {
        e.stopPropagation();
        this.setState({ abandonState: true });
        setTimeout(() => this.setState({ abandonState: false }), 2000);
    };

    const drawStateTrue = e => {
        e.stopPropagation();
        this.setState({ drawState: true });
        setTimeout(() => this.setState({ drawState: false }), 2000);
    };

    const concedeStateTrue = e => {
        e.stopPropagation();
        this.setState({ concedeState: true });
        setTimeout(() => this.setState({ concedeState: false }), 2000);
    };

    const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
    const abandonText = abandonState ? 'Confirm' : 'Abandon';
    const abandonAction = abandonState ? sendAbandon : abandonStateTrue;

    const abandonBtn = <button class={abandonClasses} disabled={finished || animating} onClick={abandonAction}>{abandonText}</button>;

    const drawClasses = `draw ${drawState || drawOffered ? 'confirming' : ''}`;
    const drawText = drawOffered
        ? 'Offered'
        : drawState ? 'Draw' : 'Offer';
    const drawAction = drawState ? sendDraw : drawStateTrue;
    const drawBtn = <button class={drawClasses} disabled={finished || animating || drawOffered} onClick={drawAction}>{drawText}</button>;

    const concedeClasses = `draw ${concedeState ? 'confirming' : ''}`;
    const concedeText = concedeState ? 'Round' : 'Concede';
    const concedeAction = concedeState ? sendConcede : concedeStateTrue;
    const concedeBtn = <button class={concedeClasses} disabled={finished || animating } onClick={concedeAction}>{concedeText}</button>;

    return (
        <div class="instance-ctrl-btns">
            {abandonBtn}
            {concedeBtn}
            {drawBtn}
        </div>
    );
}

module.exports = addState(GameCtrlTopBtns);