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,
      bombTargetArea: null,
      icons: {
        root: '/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',
        },
        left: 'bg-left-mine-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'
      + (true === this.state.active ? ' active' : '')
      + (true === this.state.active && 'm' === this.state.currentObj ? ' mine' : '')
      + ' color-' + this.state.currentObj;
  }

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

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

  lastClickedSrc() {
    return this.state.lastClickedRed
      ? '/images/bg-last-red-outbg.png'
      : '/images/bg-last-blue-outbg.png';
  }

  currentLastClicked() {
    return this.state.lastClickedRed || this.state.lastClickedBlue
      ? (
        <img
          className={this.lastClickedClass()}
          src={this.lastClickedSrc()}
          alt="blue last"
        />
      ) : '';
  }

  createBombTarget() {
    if (null !== this.state.bombTargetArea) {
      let vert, hor = '';

      switch (this.state.bombTargetArea[0]) {
        case 0:
          vert = 'left';
          break;
        case 1:
          vert = 'center';
          break;
        case 2:
          vert = 'right';
          break;
        default:
          vert = null;
          break;
      }

      switch (this.state.bombTargetArea[1]) {
        case 0:
          hor = 'top';
          break;
        case 1:
          hor = 'middle';
          break;
        case 2:
          hor = 'bottom';
          break;
        default:
          vert = null;
          break;
      }

      var src = null === vert
        ? '/images/bg-bomb-empty-outbg.png'
        : '/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';

      return (
        <img
          className="field-bomb-target"
          src={src}
          alt="bomb target"
        />
      );
    }
  }

  render() {
    return (
      <div
        className="field-wrapper"
        onClick={this.props.onClick}
        onMouseEnter={this.props.handleHoverOn}
      >
        <img
          className="field-target"
          src="/images/bg-target-outbg.png"
          alt="target"
        />
        {this.createBombTarget()}
        {this.currentLastClicked()}
        <div className={this.classNameWhenActive()}>
          <div className="field-corner">
            {this.currentImage()}
          </div>
        </div>
      </div>
    );
  }
}

export default GridField;