import React, { memo } from 'react';
import { IMG } from '../../constants';

const bombSrc = area => {
  if (null === area) return null;
  const vert = ['left', 'center', 'right'][area[0]] ?? null;
  const hor = ['top', 'middle', 'bottom'][area[1]] ?? null;
  if (null === vert || null === hor) return IMG + 'bg-bomb-empty-outbg.png';
  return `${IMG}bg-bomb-${hor}-${vert}-outbg.png`;
};

const GridField = memo(function GridField({ cell, onClick, onMouseEnter }) {
  const { currentImage, currentObj, active, lastClickedRed, lastClickedBlue, bombTargetArea } = cell;

  const fieldClass = 'field'
    + (active ? ' active' : '')
    + (active && 'm' === currentObj ? ' mine' : '')
    + ' color-' + currentObj;

  const inner = isNaN(currentImage)
    ? (
      <div className="flag-mine"><img src={currentImage} alt="" />
        <div className="flag-mine-base" />
      </div>
    )
    : currentImage ? <div className="flag-number">{currentImage}</div> : null;

  const bSrc = bombSrc(bombTargetArea);
  const showLast = lastClickedRed || lastClickedBlue;
  const lastClass = 'field-' + (lastClickedRed ? 'red' : 'blue') + '-last last-clicked';
  const lastSrc = lastClickedRed ? IMG + 'bg-last-red-outbg.png' : IMG + 'bg-last-blue-outbg.png';

  return (
    <div className="field-wrapper" onClick={onClick} onMouseEnter={onMouseEnter}>
      <img className="field-target" src={IMG + 'bg-target-outbg.png'} alt="" />
      {bSrc && <img className="field-bomb-target" src={bSrc} alt="" />}
      {showLast && <img className={lastClass} src={lastSrc} alt="" />}
      <div className={fieldClass}>
        <div className="field-corner">{inner}</div>
      </div>
    </div>
  );
});

export default GridField;