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

export default class NewGroup extends React.Component {
    constructor() {
        super()
        this.state = { usrs: Store.getUsers(), grpnme: '', team: [], coin: 1, usrinx: -1, msg: '' }
        this.getUsers = this.getUsers.bind(this)
        this.color = ['grey', 'red', 'green', 'blue']
    }

    componentDidMount() {
        Store.on("users", this.getUsers)
        Act.apiCall('service', 'USRLST', {});
    }

    componentWillUnmount() {
        Store.removeListener("users", this.getUsers)
    }

    getUsers() {
        this.setState({ usrs: Store.getUsers(), usrinx: 0 })
    }

    addUser() {
        let pers = this.state.usrs[this.state.usrinx]
        let team = this.state.team
        team.push({ tag: pers.tag, nme: pers.desc, coin: this.state.coin })
        this.setState({ team: team })
    }

    newGroup() {
        Act.apiCall('service', 'GRPNEW', {
            desc: this.state.grpnme,
            group: this.state.team
        });
        this.setState({ grpnme: '', team: [], usrinx: 0 })
    }

    teamOff(inx, e) {
        let tm = this.state.team
        tm.splice(inx, 1)
        this.setState({ team: tm })
    }

    check(me) {
        let msg = []
        let i = this.state.team.length
        if (i === 0) return ['create group']
        let cn = [...new Set(this.state.team.map((ent) => ent.coin))];
        let nm = [...new Set(this.state.team.map((ent) => ent.tag))];

        if (this.state.grpnme.length < 4)
            msg.push('group name required')

        if (nm.indexOf(me) === -1)
            msg.push('must be in list')

        if ([1, 5, 7, 9, 11].indexOf(i) > -1)
            msg.push('uneven players')

        if (i !== nm.length)
            msg.push('duplicate player')

        if (i === 2 && cn.length !== 2)
            msg.push('different tokens')

        if (i > 2 && i % cn.length !== 0)
            msg.push('token  mismatch')

        return msg
    }

    render() {
        let me = ''
        let usrlst = this.state.usrs.map((u, i) => {
            if (u.me === 1) me = u.tag
            return <option value={i}>{u.desc}</option>
        })

        let team = this.state.team
            ? this.state.team.map((d, i) => {
                return <div className="flexRow flexSpace">
                    <div style={{
                        fontFamily: "Roboto", fontSize: "12px",
                        fontWeight: (d.me === 1 ? "bold" : "normal")
                    }}>{d.nme}</div>
                    <div className="flexRow">
                        <div className="cirsml" style={{ backgroundColor: this.color[d.coin], marginRight: "2px" }}></div>
                        <img src={del} onClick={this.teamOff.bind(this, i)} style={{ width: "12px" }} />
                    </div>
                </div>
            })
            : <div>no memebers</div>

        let msg = this.check(me);

        return (
            <div className="flexRow flexPad">
                <div className="flexCol flexPad" style={{ height: "162px" }}>
                    <div className="box" style={{ marginTop: "5px" }} >
                        <div className="boxHdr">group name</div>
                        <input type="text" value={this.state.grpnme} style={{ width: "174px" }}
                            placeholder="...enter something here"
                            onChange={(e) => this.setState({ grpnme: e.target.value })} />
                    </div>
                    <div className="box">
                        <div className="flexRow flexSpace" style={{ borderBottom: '1px solid grey' }}>
                            <div className="flexCol">
                                <select value={this.state.usrinx} style={{ width: "156px" }}
                                    onChange={(e) => this.setState({ usrinx: e.target.value })}>
                                    {usrlst}
                                </select>
                                <div className="flexRow flexSpace flexAlign" style={{ height: "20px" }}>
                                    <div style={{ fontFamily: "Roboto", fontSize: "12px" }}>select token</div>
                                    <div className={this.state.coin === 1 ? "circle" : "cirsml"}
                                        style={{ backgroundColor: "red" }}
                                        onClick={() => this.setState({ coin: 1 })}></div>
                                    <div className={this.state.coin === 2 ? "circle" : "cirsml"}
                                        style={{ backgroundColor: "green" }}
                                        onClick={() => this.setState({ coin: 2 })} ></div>
                                    <div className={this.state.coin === 3 ? "circle" : "cirsml"}
                                        style={{ backgroundColor: "blue", marginRight: "15px" }}
                                        onClick={() => this.setState({ coin: 3 })} ></div>
                                </div>
                            </div>
                            <div style={{ display: "flex", alignItems: "center" }}>
                                <img src="addsml.png" onClick={this.addUser.bind(this)} style={{ width: "24px", height: "24px" }} />
                            </div>
                        </div>
                        <div className="flexCol" style={{ overflowY: "scroll", height: "60px" }}>
                            {team}
                        </div>
                    </div>
                </div>
                <div className="flexCol">
                    <img src="team.png" style={{ width: "100px" }} />
                    <div className="flexCenter" style={{ marginTop: "7px" }}>
                        {msg.length === 0
                            ? <img onClick={this.newGroup.bind(this)} src={addE} />
                            : <img src={addD} />
                        }
                    </div>
                    <div className="flexCol" style={{ fontFamily: "OpenSans", fontSize: "12px" }} >
                        {msg.map((m) => { return <div>{m}</div> })}
                    </div>
                </div>
            </div>
        )
    }
}