const preact = require('preact');

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

function CrypList({ cryps, activeItem, sendGamePve, sendItemUse }) {
    if (!cryps) return <div>not ready</div>;
    const crypPanels = cryps.sort(nameSort).map(cryp => (

        <div key={cryp.id}
            className="tile is-vertical box"
            style={activeItem ? { cursor: 'pointer' } : {}}
            onClick={() => sendItemUse(cryp.id)} >
            <div className="tile is-child">
                <div className="columns" >
                    <div className="column is-10">
                        <p className="title">{cryp.name}</p>
                        <p className="subtitle">Level {cryp.lvl}</p>
                    </div>
                    <div className="column">
                        <figure className="image">
                            <svg width="40" height="40" data-jdenticon-value={cryp.name} />
                        </figure>
                    </div>

                </div>
                <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
                <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>

                <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>

            </div>
            <button
                className="button is-dark"
                type="submit"
                disabled={cryp.hp.value === 0}
                onClick={() => sendGamePve(cryp.id)}>
                Start PVE
            </button>
        </div>
    ));
    return (
        <div className="tile is-parent is-vertical" >
            {crypPanels}
        </div>
    );
}

module.exports = CrypList;