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

export default class WinStats extends React.Component {
    constructor() {
        super()
        this.state = { stats: Store.getGameStats(), hand: Store.getHand() }
        this.getStats = this.getStats.bind(this)
        this.color = ['charcoal', '#ff3333', '#32cd32', '#4F94CD']
    }

    componentDidMount() {
        Store.on("gmestats", this.getStats)
    }

    componentWillUnmount() {
        Store.removeListener("gmestats", this.getStats)
    }

    getStats() {
        console.log('gmestats')
        this.setState({ stats: Store.getGameStats(), hand: Store.getHand() })
    }

    newGame() {
        //  Act.apiCall('service', 'NEWGME', {match: this.props.game});
        this.props.newgame()
    }

    render() {
        const msg = this.state.stats.length > 0
            ? this.state.stats.map((m) => {
                return <div className="flexRow flexSpace" style={{ color: this.color[m.clr] }}>
                    <div>{m.tag}</div>
                    <div>{m.msg}</div>
                </div>
            })
            : <div></div>

        const crds = this.state.hand.length > 0
            ? this.state.hand.map((c) => {
                return <img src={c.crd + '.svg'} className="card" />
            })
            : <div></div>

        return (
            <div className="stats">

                <div className="btn" onClick={this.newGame.bind(this)}>
                    play another game
                  </div>

                <div className="flexCol" style={{ margin: "0 0 5px 5px" }}>
                    <div className="boxHdr" >
                        Game statistics
                  </div>

                    <div style={{ border: "solid 1px gray", fontFamily: "OpenSans", fontSize: "15px" }}>
                        {msg}
                    </div>
                </div>

                <div className="flexRow flexCenter" style={{ margin: "1px" }}>
                    <div className="flexCol">
                        {crds}
                    </div>
                </div>
            </div>
        );
    }
}