import React from "react";
import * as Act from "./interface/Actions";
import Store from "./interface/Store";
import Game from "./Game";
import NewMatch from "./NewMatch";
import NewGroup from "./NewGroup";
import delImg from "./Images/delete.png";
import plyImg from "./Images/play.png";
import rfhImg from "./Images/refresh.png";

export default class GameSetup extends React.Component {
    constructor() {
        super();
        this.state = {
            serlst: Store.getSeries(), grp: '', rsfh: true,
            gamtag: '', deal: 0, flag: false, tab: 0
        };
        this.getSeries = this.getSeries.bind(this);
        this.color = ['grey', 'red', 'green', 'blue']
    }

    componentDidMount() {
        Store.on("series", this.getSeries)
    }

    componentWillUnmount() {
        Store.removeListener("series", this.getSeries)
    }

    dltSeries(inx, e) {
        let tag = this.state.serlst[inx].Tag
        Act.apiCall('service', 'SERDLT', { ser: tag });
    }

    getSeries() {
        this.setState({ serlst: Store.getSeries(), rfsh: true })
    }

    joinGame(inx, e) {
        let cond = true
        let tag = this.state.serlst[inx].Tag
        let hnd = this.state.serlst[inx].Deal
        Act.apiCall('service', 'JOINGM', { match: tag });
        this.setState({ gamtag: tag, deal: hnd, flag: cond })
    }

    refreshSeries() {
        Act.apiCall('service', 'SERRFH', {});
        this.setState({rfsh: false})
    }

    backButton() {
        this.setState({ flag: false })
    }

    render() {
        let series = this.state.serlst.map((g, i) => {
            return <div className="flexRow" style={{ fontFamily: "Roboto", fontSize: "12px", borderBottom: "1px solid #f0f0f0" }}>
                <img src={delImg}
                    onClick={this.dltSeries.bind(this, i)}
                    style={{ width: "16px", height: "16px", marginRight: "2px" }} />
                <div className={g.live > 0 ? "flexRow hilit" : "flexRow"} onClick={this.joinGame.bind(this, i)} >
                    <div style={{ width: "165px" }}>{g.Desc}</div>
                    <div style={{ width: "125px" }}>{g.Group}</div>
                    <div style={{ width: "15px" }} >{g.played}</div>
                    <div style={{ width: "15px", textAlign: "center" }} >{g.live}</div>
                    <div style={{ alignContent: "flex-end" }} >
                        <img src={plyImg} />
                    </div>
                </div>
            </div>
        })

        return (
            <div style={{ display: "flex", justifyContent: "center" }}>
                {this.state.flag
                    ? <Game game={this.state.gamtag} deal={this.state.deal} xout={this.backButton.bind(this)} />
                    : <div className="flexCol" style={{ display: "flex", justifyContent: "center", width: "375px" }}>
                        <div className="flexRow boxHdr">
                            <div className="flexCol" >
                                <div className="flexRow">
                                    <div style={{ marginLeft: "135px" }}>Games In Motion</div>
                                    <div style={{ marginLeft: "60px" }}>gme ply</div>
                                </div>
                                <div className="flexRow">
                                    <div style={{ width: "18px" }}></div>
                                    <div style={{ width: "165px" }}>Match</div>
                                    <div style={{ width: "113px" }}>Group</div>
                                    <div style={{ width: "18px" }}>#</div>
                                    <div style={{ width: "15px" }}>#</div>
                                </div>
                            </div>
                            <div style={{ display: "flex", alignItems: "center", marginLeft: "5px" , width: "20px"}}
                                onClick={this.refreshSeries.bind(this)} >
                                {this.state.rfsh
                                    ? <img src={rfhImg} />
                                    : null
                                }
                            </div>
                        </div>
                        <div className="flexCol" style={{
                            overflowY: "scroll", height: "150px",
                            border: "solid 1px grey",
                            marginBottom: "15px"
                        }}>
                            {series}
                        </div>

                        <div style={{ display: "flex", justifyContent: "center" }}>
                            <ul className="tabrow">
                                <li className={this.state.tab === 0 ? "tabsel" : ""}
                                    onClick={(e) => this.setState({ tab: 0 })}>
                                    New Match
                                </li>
                                <li className={this.state.tab === 1 ? "tabsel" : ""}
                                    onClick={(e) => this.setState({ tab: 1 })}>
                                    New Group
                                </li>
                            </ul>
                        </div>
                        <div className="gameBox" style={{ height: "165px" }}>
                            {this.state.tab === 0
                                ? <NewMatch />
                                : <NewGroup />
                            }
                        </div>
                        <div className="boxTrl" style={{ color: "grey" }}>Code Creation by Grae Jones</div>
                    </div>
                }
            </div>
        );
    }
}