import React from 'react';

function isMarked(x, y, marked) {
    return !!marked.find(e => e.x === x && e.y === y);
}

export default function Cell({x, y, state, dispatch}) {
    const cell = state.maze.grid[y][x];
    let classes = "cell r" + y + " c" + x;
    if (cell.top) classes += " top";
    if (cell.right) classes += " right";
    if (cell.bottom) classes += " bottom";
    if (cell.left) classes += " left";
    if (cell.solution && state.showSolution) classes += " solution";
    const marked = isMarked(x, y, state.userPath);
    if (marked) classes += " user";
    return (
        <div className={classes}
             onMouseEnter={(e) => {
                 const leftPressed = e.buttons & 0x1;
                 if (leftPressed) {
                     dispatch({
                         type: 'clicked_cell',
                         x,
                         y
                     });
                 }
             }}
             onClick={(e) => {
                 dispatch({
                     type: 'clicked_cell',
                     x,
                     y
                 });
             }}>
        </div>
    );
}