// eslint-disable-next-line
const preact = require('preact');

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

function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
    if (!instances) return <div>...</div>;

    // const instanceJoin = (
    //     <button
    //         className="menu-instance-btn full right"
    //         onClick={() => sendInstanceJoin()}>
    //         Join New Instance
    //     </button>
    // );

    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>
        );
    });

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

module.exports = instanceList;