import React from "react";
import Store from "./interface/Store";
import * as Act from "./interface/Actions";
import delImg from "./Images/delete.png";
import addE from "./Images/addE.png"
import addD from "./Images/addD.png"

export default class NewMatch extends React.Component {
    constructor() {
        super()
        this.state = {
            grplst: Store.getGroups(), grp: -1,
            fndlst: Store.getFriends(), sernme:''
        }
        this.getGroups = this.getGroups.bind(this);
        this.getFriends = this.getFriends.bind(this);
        this.color = ['grey', 'red', 'green', 'blue']
    }

    componentDidMount() {
        Store.on("groups", this.getGroups)
        Store.on("friends", this.getFriends)
    }

    componentWillUnmount() {
        Store.removeListener("groups", this.getGroups)
        Store.removeListener("friends", this.getFriends)
    }

    getGroups() {
        this.setState({ grplst: Store.getGroups() })
    }

    getFriends() {
        this.setState({ fndlst: Store.getFriends() })
    }

    groupChange(e) {
        if (e.target.value > -1) {
            let tag = this.state.grplst[e.target.value].Tag
            Act.apiCall('service', 'GRFRND', { grp: tag });
            this.setState({ grp: e.target.value })
        } else {
            this.setState({ grp: e.target.value, fndlst: [] })
        }
    }

    delGroup() {
        let tag = this.state.grplst[this.state.grp].Tag
        Act.apiCall('service', 'GRPDLT', { grp: tag });
        this.setState({ grp: -1, sernme: '', fndlst: [] })
    }

    newSeries() {
        if (this.state.grp > -1 && this.state.sernme.length > 3) {
            let tag = this.state.grplst[this.state.grp].Tag
            Act.apiCall('service', 'NEWSER', { grp: tag, ser: this.state.sernme });
            this.setState({ grp: -1, sernme: '', fndlst: [] })
        }
    }

    render() {
        let groups = this.state.grplst.map((g,i) => {
            return <option value={i}>{g.Desc}</option>
        })
        let friends = this.state.fndlst.map((f) => {
            return <div className="flexRow flexSpace" style={{ fontFamily: "Roboto", fontSize: "12px" }}>
                <div style={{ maringLeft: "5px" }}>{f.Desc}</div>
                <div style={{
                    marginRight: "5px", width: "14px", height: "14px",
                    borderRadius: "7px", backgroundColor: this.color[f.Coin]
                }}></div>
            </div>
        })
        let flag = this.state.grp > -1 && this.state.sernme.length > 3 ? true : false;
        return (
            <div className="flexRow flexPad">
                <div className="flexCol flexPad" style={{ height: "162px" }}>
                    <div className="box" style={{ marginTop: "5px" }} >
                        <div className="boxHdr">match title</div>
                        <input type="text" value={this.state.sernme} style={{ width: "174px" }}
                            placeholder="...enter something here"
                            onChange={(e) => this.setState({ sernme: e.target.value })} />
                    </div>
                    <div className="box">
                        <div className="flexRow flexSpace" style={{ borderBottom: '1px solid grey' }}>
                            <div style={{ width: "18px", height: "18px" }}>
                                {
                                    this.state.grp > -1
                                        ? <img src={delImg} onClick={this.delGroup.bind(this)} />
                                        : null
                                }
                            </div>
                            <select value={this.state.grp} style={{ width: "160px" }}
                                onChange={this.groupChange.bind(this)}>
                                <option value='-1'>[please select group]</option>
                                {groups}
                            </select>
                        </div>
                        <div className="flexCol" style={{ overflowY: "scroll", height: "80px" }}>
                            {friends}
                        </div>
                    </div>
                </div>

                <div className="flexCol">
                    <img src="match.png" />
                    <div className="flexCenter" style={{marginTop: "15px"}}>
                        <img onClick={this.newSeries.bind(this)} src={ flag ? addE : addD} />
                    </div>
                </div>
            </div>
        )
    }
}