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

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

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

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

    getStats() {
        this.setState({ stats: Store.getSeriesStats() })
    }

    render() {
        return (
            <div className="flexRow">
                <div style={{ marginRight: "2px" }}>played</div>
                <div className="flexRow flexAlign" style={{ borderTop: "1px solid grey", borderRight: "1px solid grey", borderBottom: "1px solid grey" }}>
                    <div style={{ minWidth: "25px", marginRight: "2px", height: "17px", backgroundColor: this.color[0] }}>
                        {this.state.stats.plyd}
                    </div>
                    <div style={{ color: "white", minWidth: "22px", height: "16px", backgroundColor: this.color[1] }}>{this.state.stats.c1}</div>
                    <div style={{ color: "white", minWidth: "22px", height: "16px", backgroundColor: this.color[2] }}>{this.state.stats.c2}</div>
                    <div style={{ color: "white", minWidth: "22px", height: "16px", backgroundColor: this.color[3], marginRight: "2px" }}>{this.state.stats.c3}</div>
                </div>
            </div>
        );
    }
}