/**
 * This file is part of the SplendidBear Websites' projects.
 *
 * Copyright (c) 2026 @ www.splendidbear.org
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

import React, { memo, useMemo } from 'react';
import { IMAGES } from '@mine-utils';
import { func, shape, bool, number, string } from 'prop-types';

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 IMAGES.bombEmpty;
  return IMAGES.bombPos(hor, vert);
};

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 bombSourceString = useMemo(() => bombSrc(bombTargetArea), [bombTargetArea]);

  return (
    <div
      className="field-wrapper"
      onClick={onClick}
      onMouseEnter={onMouseEnter}
    >
      <img
        className="field-target"
        src={IMAGES.target}
        alt="Field of target"
      />
      {bombSourceString && (
        <img
          className="field-bomb-target"
          src={bombSourceString}
          alt="Field of bomb target"
        />
      )}
      {(lastClickedRed || lastClickedBlue) && (
        <img
          className={`field-${lastClickedRed ? 'red' : 'blue'}-last last-clicked`}
          src={IMAGES.last(lastClickedRed ? 'red' : 'blue')}
          alt="Last clicked area"
        />
      )}
      <div className={fieldClass}>
        <div
          style={{ background: "url('/images/bg-corner-outbg.png') no-repeat top left / 100% 100%" }}
          className="field-corner"
        >
          {isNaN(currentImage) && (
            <div className="flag-mine">
              <img src={currentImage} alt="" />
              <div className="flag-mine-base" />
            </div>
          )}
          {!isNaN(currentImage) && 0 !== currentImage && (
            <div className="flag-number">
              {currentImage}
            </div>
          )}
        </div>
      </div>
    </div>
  );
});

export default GridField;

GridField.propTypes = {
  cell: shape({
    currentImage:    string,
    currentObj:      string,
    active:          bool,
    lastClickedRed:  bool,
    lastClickedBlue: bool,
    bombTargetArea:  number,
  }).isRequired,
  onClick:      func.isRequired,
  onMouseEnter: func.isRequired,
};