import React from 'react';

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

        this.state = {
            currentObj: 'w',
            currentImage: null,
            active: false,
            lastClickedRed: false,
            lastClickedBlue: false,
            icons: {
                root: 'bundles/mineseeker/images/',
                water: {
                    1: 'bg-wave-1-outbg.png',
                    2: 'bg-wave-1-outbg.png',
                    3: 'bg-wave-2-outbg.png'
                },
                flag: {
                    red: 'bg-flag-red-outbg.png',
                    blue: 'bg-flag-blue-outbg.png'
                },
                target: {
                    lastBlue: 'bg-last-blue-outbg.png',
                    lastRed: 'bg-last-red-outbg.png',
                    crosshair: 'bg-target-outbg.png',
                    crosshairBomb: 'bg-target-bomb-outbg.png'
                }
            }
        };
    }

    componentWillMount() {
        var wave = Math.floor(Math.random() * 3) + 1;

        this.setState({
            currentImage: this.state.icons.root + this.state.icons.water[wave]
        });
    }

    classNameWhenActive() {
        return 'field'
            + (this.state.active === true ? ' active' : '')
            + (this.state.active === true && this.state.currentObj === 'm' ? ' mine' : '')
            + ' color-' + this.state.currentObj;
    }

    currentImage() {
        return isNaN(this.state.currentImage)
            ? <div className="flag-mine"><img src={this.state.currentImage}/><div className="flag-mine-base"></div></div>
            : this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
    }

    lastClickedRed() {
        return 'field-red-last' + (this.state.lastClickedRed ? ' last-clicked' : '');
    }

    lastClickedBlue() {
        return 'field-blue-last' + (this.state.lastClickedBlue ? ' last-clicked' : '');
    }

    render() {
        return (
            <div className="field-wrapper">
                <img className="field-target" src="/bundles/mineseeker/images/bg-target-outbg.png" alt="target" onClick={this.props.onClick}/>
                <img className={this.lastClickedRed()} src="/bundles/mineseeker/images/bg-last-red-outbg.png" alt="red last"/>
                <img className={this.lastClickedBlue()} src="/bundles/mineseeker/images/bg-last-blue-outbg.png" alt="blue last"/>
                <div className={this.classNameWhenActive()}>
                    <div className="field-corner">
                        {this.currentImage()}
                    </div>
                </div>
            </div>
        );
    }
}

export default GridField;