const preact = require('preact');
// const key = require('keymaster');

function convertVar(v) {
    return v || '';
}

function Vbox(args) {
    const {
        instance,
        combiner,
        setCombiner,
        sendVboxAccept,
        sendVboxDiscard,
        sendVboxReclaim,
        sendVboxCombine,
    } = args;

    const { vbox } = instance;
    if (!instance.vbox) return false;

    // lots of rubbish to make it flow nice
    function combinerAdd(i) {
        if (combiner.indexOf(i) === -1) {
            const insert = combiner.findIndex(j => j === null);
            combiner[insert] = i;
            return setCombiner(combiner);
        }
        return setCombiner([i, null, null]);
    }

    function combinerRmv(i) {
        combiner[i] = null;
        return setCombiner(combiner);
    }

    const free = [];
    for (let i = 0 ; i < 6; i++) {
        free.push([vbox.free[0][i], vbox.free[1][i], vbox.free[2][i]]);
    }

    const freeRows = free.map((row, i) => {
        const cells = row.map((c, j) => (
            <td
                key={j}
                onClick={() => c && sendVboxAccept(j, i)} >
                {convertVar(c)}
            </td>
        ));

        return (
            <tr key={i}>
                {cells}
            </tr>
        );
    });

    const boundRows = [
        <tr key={0} >
            <td onClick={() => combinerAdd(0) }>{convertVar(vbox.bound[0])}</td>
            <td onClick={() => combinerAdd(1) }>{convertVar(vbox.bound[1])}</td>
            <td onClick={() => combinerAdd(2) }>{convertVar(vbox.bound[2])}</td>
        </tr>,
        <tr key={1}>
            <td onClick={() => combinerAdd(3) }>{convertVar(vbox.bound[3])}</td>
            <td onClick={() => combinerAdd(4) }>{convertVar(vbox.bound[4])}</td>
            <td onClick={() => combinerAdd(5) }>{convertVar(vbox.bound[5])}</td>
        </tr>,
        <tr key={2}>
            <td onClick={() => combinerAdd(6) }>{convertVar(vbox.bound[6])}</td>
            <td onClick={() => combinerAdd(7) }>{convertVar(vbox.bound[7])}</td>
            <td onClick={() => combinerAdd(8) }>{convertVar(vbox.bound[8])}</td>
        </tr>,
    ];

    const combinerElement = (
        <table className="vbox-table">
            <tbody>
                <tr>
                    <td onClick={() => combinerRmv(0)}>{convertVar(vbox.bound[combiner[0]])}</td>
                    <td onClick={() => combinerRmv(1)}>{convertVar(vbox.bound[combiner[1]])}</td>
                    <td onClick={() => combinerRmv(2)}>{convertVar(vbox.bound[combiner[2]])}</td>
                </tr>
            </tbody>
        </table>
    );

    return (
        <div className="three columns">
            <div className="vbox-hdr">
                <div>VBOX</div>
                <h3>{vbox.bits}b</h3>
            </div>
            <button
                className="instance-btn instance-ui-btn vbox-btn"
                onClick={() => sendVboxDiscard()}>
                Reroll
            </button>
            <table className="vbox-table">
                <tbody>
                    {freeRows}
                </tbody>
            </table>
            <span>INVENTORY</span>
            <button
                className="instance-btn instance-ui-btn vbox-btn"
                onClick={() => sendVboxReclaim()}>
                reclaim
            </button>
            <table className="vbox-table">
                <tbody>
                    {boundRows}
                </tbody>
            </table>
            <span>I-COMBINATOR</span>
            <button
                className="instance-btn instance-ui-btn vbox-btn"
                onClick={() => sendVboxCombine()}>
                combine
            </button>
            {combinerElement}
        </div>
    );
}

module.exports = Vbox;