import React from 'react';
import { useGame } from '../../contexts/GameContext';
import GridField from './GridField';
import UserControl from '../user/UserControl';
import { BOMB_SYMBOLS, bombRadius } from '../../utils/constants';

const GridControl = ({ onClick, resign }) => {
  const {
    overlay, overlayTitle, overlaySubTitle,
    webPlayer, activePlayer, bombSelected,
    cells, setCells,
  } = useGame();

  const handleHover = (row, col) => {
    if (!bombSelected) return;
    const activeColor = activePlayer ? 'blue' : 'red';
    if (activeColor !== webPlayer) return;

    setCells(prev => {
      const next = prev.map(r => r.map(c =>
        null !== c.bombTargetArea ? { ...c, bombTargetArea: null } : c,
      ));
      bombRadius(row, col, prev.length, prev[0]?.length ?? 0).forEach(([r, c], i) => {
        if (!next[r]?.[c]) return;

        next[r] = [...next[r]];
        next[r][c] = { ...next[r][c], bombTargetArea: BOMB_SYMBOLS[i] };
      });
      return next;
    });
  };

  return (
    <div className="game-wrapper">
      <div className={`game-overlay${overlay ? '' : ' hide'}`}>
        <div className="game-overlay-window">
          <h1>{overlayTitle}</h1>
          <h2>{overlaySubTitle}</h2>
        </div>
      </div>
      <UserControl
        resign={resign}
      />
      <div className="grid-container">
        <div className="grid">
          {cells.flatMap((row, r) =>
            row.map((cell, c) => (
              <GridField
                key={`${r}_${c}`}
                cell={cell}
                onClick={() => onClick([r, c])}
                onMouseEnter={() => handleHover(r, c)}
              />
            )),
          )}
        </div>
      </div>
    </div>
  );
};

export default GridControl;