import React, {useEffect} from "react";

import {randomInt} from "Utils/randomInt";
import {setInRandomCell} from "Utils/matrixUtils";

let oldHandler : (event) => any = () => null;

export default function GameLogic( {matrix, setter, children} ) {
  /** mount */
  useEffect(() => {
    addSquare(2);
    document.addEventListener("keydown", handleKeyPress, false);
    oldHandler = handleKeyPress;
  }, []);

  /** change matrix */
  useEffect(() => {
    document.removeEventListener("keydown", oldHandler);
    document.addEventListener("keydown", handleKeyPress, false);
    oldHandler = handleKeyPress;
  }, [matrix])

  /** unmount */
  useEffect( () => () => {
    document.removeEventListener("keydown", oldHandler);
  }, [] );

  function handleKeyPress(event){
    let keyActionlist = {
      'ArrowUp' : Up,
      'ArrowDown' : Down,
      'ArrowLeft' : Left,
      'ArrowRight' : Right,
    }

    if(keyActionlist[event.key]){
      keyActionlist[event.key]();
    }
  }

  function Up(){
    console.log('up');
    //addSquare();
  }

  function Down(){
    console.log('down');
    //addSquare();
  }

  function Left(){
    console.log('left');
    //addSquare();
  }

  function Right(){
    console.log('right');
    //addSquare();
  }

  /**
   * @description 75% на 2 25% на 4
   * @param {number} n
   */
  function addSquare(n = 1){
    let newMatrix : number[][]  = Array.from(matrix);
    for(let i = 0; i < n; i++){
      let rand = randomInt(4);
      let val = rand === 3 ? 4 : 2;
      newMatrix = setInRandomCell(newMatrix, val);
    }
    setter(newMatrix);
  }

  return <div className={'game-field'} onKeyDown={handleKeyPress}>
    {children}
  </div>
}