// 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="instance-btn right"
            onClick={() => sendInstanceJoin()}>
            Join New Instance
        </button>
    );

    const instancePanels = instances.map(instance => {
        const name = instance.instance === NULL_UUID
            ? 'Normal Mode'
            : `${instance.instance.substring(0, 5)}`;

        return (
            <button
                className="instance-btn right"
                key={instance.id}
                onClick={() => setActiveInstance(instance)}>
                {name}
            </button>
        );
    });

    return (
        <section>
            <h2>Instances</h2>
            {instanceJoin}
            {instancePanels}
        </section>
    );
}

module.exports = instanceList;