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

const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
const { ConstructAvatar } = require('./construct');
const actions = require('./../actions');
const InstanceCreateForm = require('./instance.create.buttons');

const idSort = stringSort('id');

const addState = connect(
    function receiveState(state) {
        const { ws, constructs, team, instanceList, account } = state;

        function sendInstanceJoin(instance) {
            if (team.length) {
                return ws.sendInstanceJoin(instance.id, team);
            }
            return false;
        }

        function sendInstanceState(instance) {
            return ws.sendInstanceState(instance.id);
        }

        function sendInstanceList() {
            return ws.sendInstanceList();
        }

        return {
            account,
            constructs,
            team,
            sendInstanceJoin,
            sendInstanceState,
            sendInstanceList,
            instanceList,
        };
    },
);

function List(args) {
    const {
        account,
        team,
        constructs,
        sendInstanceState,
        sendInstanceJoin,
        sendInstanceList,
        instanceList,
    } = args;

    function listElements() {
        if (!instanceList) return <div>...</div>;

        const instancePanels = instanceList.map(instance => {
            const player = instance.players.find(p => p.id === account.id);
            const scoreText = player
                ? `${player.wins} : ${player.losses}`
                : '';

            function instanceClick() {
                if (!player) return sendInstanceJoin(instance);
                return sendInstanceState(instance);
            }

            return (
                <tr key={instance.id}
                    class="right"
                    onClick={instanceClick} >
                    <td>{instance.name}</td>
                    <td>{instance.players.length} / {instance.max_players}</td>
                    <td>{scoreText}</td>
                </tr>
            );
        });

        return (
            <div class="menu-instance-list" >
                <hr />
                <table>
                    <thead>
                        <tr>
                            <th>instance name</th>
                            <th>players</th>
                            <th>status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {instancePanels}
                        <tr class="right" onClick={() => sendInstanceList()}>
                            <td colSpan={3} >↺</td>
                        </tr>
                    </tbody>
                </table>
                <InstanceCreateForm />
            </div>
        );
    }

    const constructPanels = constructs
        .filter(c => team.includes(c.id))
        .sort(idSort)
        .map(construct =>
            <div
                key={construct.id}
                class="menu-construct" >
                <ConstructAvatar name={construct.name} id={construct.id} />
                <h2>{construct.name}</h2>
            </div>
        );

    return (
        <main class="menu-instances">
            <div class="construct-list">
                {constructPanels}
            </div>
            {listElements()}
        </main>
    );
}

module.exports = addState(List);