import React from "react";
import Store from "./interface/Store";

export default class Players extends React.Component {
    constructor() {
        super();
        this.state = { plylst: Store.getPlayers() };
        this.getPlayers = this.getPlayers.bind(this)
        this.color = ['grey', 'red', 'green', 'blue']
    }

    componentDidMount() {
        Store.on("playlist", this.getPlayers)
    }

    componentWillUnmount() {
        Store.removeListener("playlist", this.getPlayers)
    }

    getPlayers() {
        this.setState({ plylst: Store.getPlayers() })
    }

    render() {
        const p = this.props.players
        const t = this.props.turn
        const plyrs = this.state.plylst.map((d, i) => {
            return (
                <div className="flexRow">
                    <div style={{ height: "94px", width: "66px", marginRight: "3px" }}>
                        {t.length ? <img src={t[i].crd + '.svg'} style={{ height: "91px" }} /> : null}
                    </div>
                    <div>
                        <div className="player" style={{ marginBottom: "3px" }}>
                            {p.length && p[i].live === true
                                ? <div className="flexCol flexSpace plyrImg" style={{ backgroundImage: "url(" + d.Img + ")" }}>
                                    <div className="flexEnd">
                                        <div className="plyrCoin" style={{ backgroundColor: this.color[d.coin] }}>
                                        </div>
                                    </div>
                                    <div className="flexCenter" >
                                        {t.length && t[i].req
                                            ? <img src="checkmark.png" style={{ width: "54px", height: "54px" }} />
                                            : <div></div>
                                        }
                                    </div>
                                </div>
                                : <div className="plyrImg plyBlnk">
                                    <div className="flexEnd">
                                        <div className="plyrCoin" style={{ backgroundColor: "#d0d0d0" }}>
                                        </div>
                                    </div>
                                    <div>
                                    </div>
                                </div>
                            }
                            <div className="flexCol flexCenter plyrName"
                                style={{ backgroundColor: t.length && t[i].turn === true ? '#FFFF66' : 'white' }} >
                                {d.Desc}
                            </div>
                        </div>
                    </div>
                </div>
            )
        })
        return (
            <div className="flexCol" style={{ margin: "10px 5px" }}>
                {plyrs}
            </div>
        );
    }
}