const preact = require('preact');
const range = require('lodash/range');

const { NULL_UUID } = require('./../utils');

const { stringSort } = require('./../utils');
const molecule = require('./molecule');
const SpawnButton = require('./spawn.button');

const idSort = stringSort('id');

const COLOURS = [
    '#a52a2a',
    '#1FF01F',
    '#3498db',
];

function Menu(args) {
    const {
        cryps,
        selectedCryps,
        setSelectedCryps,
        setActiveInstance,
        sendPlayerMmCrypsSet,
        sendInstanceJoin,
        sendCrypSpawn,
        instances,
    } = args;

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

        const instancePanels = instances.map(instance => {
            const globalInstance = instance.instance === NULL_UUID;
            const name = globalInstance
                ? 'Global Matchmaking'
                : `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;

            return (
                <button
                    className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
                    key={instance.id}
                    onClick={() => setActiveInstance(instance)}>
                    {name}
                </button>
            );
        });

        const instanceJoinHidden = !selectedCryps.every(c => !!c);

        const mmSet = (
            <button
                className={`menu-instance-btn left ${instanceJoinHidden ? 'hidden' : ''}`}
                disabled={instanceJoinHidden}
                onClick={() => sendPlayerMmCrypsSet()}>
                Set Matchmaking Team
            </button>
        );
        const instanceJoin = (
            <button
                className={`menu-instance-btn right ${instanceJoinHidden ? 'hidden' : ''}`}
                disabled={instanceJoinHidden}
                onClick={() => sendInstanceJoin()}>
                Join New Instance
            </button>
        );

        return (
            <section className="menu-instance-list" >
                {instancePanels}
                {mmSet}
                {instanceJoin}
            </section>
        );
    }

    function crypList() {
        if (!cryps) return <div></div>;

        // redux limitation + suggested workaround
        // so much for dumb components
        function selectCryp(id) {
            // remove
            const i = selectedCryps.findIndex(sid => sid === id);
            if (i > -1) {
                selectedCryps[i] = null;
                return setSelectedCryps(selectedCryps);
            }

            // window insert
            const insert = selectedCryps.findIndex(j => j === null);
            if (insert === -1) return setSelectedCryps([id, null, null]);
            selectedCryps[insert] = id;
            return setSelectedCryps(selectedCryps);
        }

        const crypPanels = cryps.sort(idSort).map(cryp => {
            const colour = selectedCryps.indexOf(cryp.id);
            const selected = colour > -1;

            const borderColour = selected ? COLOURS[colour] : '#000000';

            return (
                <div
                    key={cryp.id}
                    className="menu-cryp-ctr">
                    <div
                        className="menu-cryp"
                        style={ { 'border-color': borderColour || 'whitesmoke' } }
                        onClick={() => selectCryp(cryp.id)} >
                        <figure className="img">
                            {molecule}
                        </figure>
                        <h2>{cryp.name}</h2>
                    </div>
                </div>
            );
        });

        const spawnButtonsNum = cryps.length < 3
            ? (3 - cryps.length)
            : 1;

        const spawnButtons = range(spawnButtonsNum)
            .map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);

        return (
            <div className="menu-cryps">
                {crypPanels}
                {spawnButtons}
            </div>
        );
    }

    return (
        <main className="menu">
            {instanceList()}
            {crypList()}
        </main>
    );
}

module.exports = Menu;