import React from 'react';

class User extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "...",
            desc: "",
            active: props.active,
            color: props.color === 'blue' ? 1 : 0,
            mines: 0,
            srcRoot: '/images/',
            haveBomb: true,
            enabledBomb: true
        };
    }

    setColor(color) {
        return 'user-container user-' + color;
    }

    getSrc(color) {
        return this.state.srcRoot + 'bg-flag-' + color + '-outbg.png';
    }

    getBombBuzzClass(webPlayer) {
        let activePlayer = this.state.color === 1 ? 'blue' : 'red';

        return "bomb-container" +
            (
                this.state.active && (activePlayer === webPlayer) && this.state.haveBomb && this.state.enabledBomb
                    ? ' buzz'
                    : ''
            );
    }

    getBomb() {
        let src = this.state.srcRoot;

        if (this.state.haveBomb) {
            src += this.state.enabledBomb && this.state.active
                ? 'bg-bomb-outbg.png'
                : 'bg-bomb-disabled-outbg.png';
        } else {
            src += 'bg-bomb-exploded-outbg.png';
        }

        return src;
    }

    getFigure(color) {
        return this.state.srcRoot + 'bg-figure-' + color + '-outbg.png';
    }

    getCursor(state, color) {
        return state
            ? <img src={this.state.srcRoot + 'bg-cursor-' + color + '-outbg.png'} alt="cursor" className="user-cursor"/>
            : '';
    }

    render() {
        return (
            <div className={this.setColor(this.props.color)}>
                <div className="user-header">
                    <div className="user-color">{this.props.color}</div>
                    {this.getCursor(this.props.active, this.props.color)}
                    <img src={this.getFigure(this.props.color)} alt="figure"/>
                </div>
                <div className="user-name"> {this.state.name} </div>
                <div className="user-caret"><i className="fa fa-caret-down"></i></div>
                <div className="user-desc"> {this.state.desc} </div>
                <div className="user-control">
                    <img src={this.getSrc(this.props.color)} alt="flag"/>
                    <div className="user-control-mines">
                        {this.state.mines}
                    </div>
                    <div className={this.getBombBuzzClass(this.props.webPlayer)} onClick={this.props.onClickBombSelector}>
                        <div className="bomb">
                            <img src={this.getBomb()} alt="bomb"/>
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>
            </div>
        );
    }
}

export default User;