const preact = require('preact');
const { Component } = require('preact');
const range = require('lodash/range');

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

const idSort = stringSort('id');

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

class SpawnButton extends Component {
    toggle(e) {
        this.setState({ enabled: e });
    }

    render({ spawn }, { enabled }) {
        let spawnName = null;
        return (
            <div
                className="menu-cryp-ctr spawn-btn">
                <div
                    className="menu-cryp"
                    onClick={() => this.toggle(!this.enabled)} >
                    <h2>+</h2>
                    <input
                        className="login-input"
                        type="text"
                        disabled={!enabled}
                        placeholder="name"
                        onChange={e => spawnName = e.target.value}
                    />
                    <button
                        className="login-btn"
                        disabled={!enabled}
                        onClick={() => spawn(spawnName)}
                        type="submit">
                        spawn
                    </button>
                </div>
            </div>
        );
    }
}

function CrypList(args) {
    const {
        cryps,
        selectedCryps,
        setSelectedCryps,
        sendInstanceJoin,
        sendCrypSpawn
    } = args;

    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 instanceJoinHidden = !selectedCryps.every(c => !!c);
    const instanceJoin = (
        <button
            className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
            onClick={() => sendInstanceJoin()}>
            Join New Instance
        </button>
    );


    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(() => <SpawnButton key={Date.now()} spawn={name => sendCrypSpawn(name)} />);

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

module.exports = CrypList;
