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

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

const addState = connect(
    function receiveState(state) {
        const {
            ws,
            chatShow,
            chatWheel,
            instance,
            game,
        } = state;

        function sendInstanceChat(instance, i) {
            return ws.sendInstanceChat(instance, i);
        }

        return {
            instance,
            game,
            chatShow,
            chatWheel,

            sendInstanceChat,
        };
    },

    function receiveDispatch(dispatch) {
        function setChatShow(v) {
            dispatch(actions.setChatShow(v));
        }

        return {
            setChatShow,
        };
    }
);

function Chat(args) {
    const {
        instance,
        game,
        chatShow,
        chatWheel,

        sendInstanceChat,
        setChatShow,
    } = args;

    function onClick(i) {
        sendInstanceChat(instance ? instance.id : game && game.id, i);
        setChatShow(false);
        return true;
    }

    return (
        <div class={`instance-ctrl-btns chat`}>
            {chatWheel.map((c, i) => <button key={i} onClick={() => onClick(i)} >{c}</button>)}
        </div>
    );
}

module.exports = addState(Chat);