const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const container = document.getElementById("container_wrapper");
const animals = Array.from(document.querySelectorAll(".animals-container img"));
const foods = Array.from(document.querySelectorAll("#food li"));
const message = document.getElementById("message");
const outerContainer = document.getElementById("outer_container");
const countFoods = animals.map(() => ({ foodsMatched: [] }));
let initialX, initialY, finalX, finalY, selectedAnimal, animalsIndex;
let isMobile = false;

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height);

animals.forEach((animal, index) => {
  animal.addEventListener("click", () => animalSelected(animal, index));
});

/* This event listener will be "activated" once all foods get the class 'selectable' in the animalSelected()*/
foods.forEach((food, index) => {
  food.addEventListener("click", () => foodSelected(food, index));
});

function animalSelected(animal, index) {
  animals.forEach((other_animal, other_index) => {
    other_animal.style.boxShadow = "0px 0px 4px 0px rgba(0,0,0,0.75)";
    other_animal.style.transform = "scale(1)";
    other_animal.style.border = "0px solid #0000FF";
  });

  message.innerText = `Επέλεξες ${animal.getAttribute("alt")}. Αντιστοιχίστε το με τροφές.`;
  animal.style.boxShadow = "0px 0px 4px 0px rgba(0,0,0,0.75)";
  animal.style.transform = "scale(1.1)";
  animal.style.border = "1px solid #0000FF";
  selectedAnimal = animal;
  animalsIndex = index;

  foods.forEach((food) => {
    food.classList.add("selectable", "flash");
    food.style.padding = "1px";
    food.style.border = "1px solid #ffffff";
    food.style.boxSizing = "border-box";
  });

  /*     animals.forEach((otherAnimal, otherIndex) => {
        if (otherIndex !== index ) {
            otherAnimal.style.pointerEvents = 'none';
        }
    }); */

  let animalRect = animal.getBoundingClientRect();

  isLeftDiv()
    ? (initialX = animalRect.left + animal.offsetWidth)
    : (initialX = animalRect.left);
  initialY = animalRect.top + animal.offsetHeight / 2;
}

function foodSelected(food) {
  styleFoodSelected();
  check(food);
}

function styleFoodSelected() {
  message.innerText = "";
  animals[animalsIndex].style.boxShadow = "0px 0px 10px 2px rgba(0, 0, 0, 0.2)";
  animals[animalsIndex].style.transform = "scale(1)";
  animals[animalsIndex].style.border = "none";

  foods.forEach((food) => {
    food.classList.remove("selectable");
    food.style.border = "none";
  });

  animals.forEach((animal) => {
    animal.style.pointerEvents = "auto";
  });
}

function check(food) {
  let animalsDietString = selectedAnimal.getAttribute("data-array");
  let animalsDiet = JSON.parse(animalsDietString);

  if (
    animalsDiet.includes(food.innerText) &&
    !countFoods[animalsIndex].foodsMatched.includes(food.innerText)
  ) {
    draw(food, animalsDiet);
    message.innerText = `Σωστά. Το ${selectedAnimal.getAttribute("alt")} τρώει ${food.innerText}.`;
  } else {
    selectedAnimal.classList.add("shake");
    setTimeout(() => {
      selectedAnimal.classList.remove("shake");
    }, 500);
    message.innerText = `Λάθος. Το ${selectedAnimal.getAttribute("alt")} δεν τρώει ${food.innerText}.`;
  }
}

function draw(food, animalsDiet) {
  countFoods[animalsIndex].foodsMatched.push(food.innerText);
  let foodRect = food.getBoundingClientRect();

  isLeftDiv()
    ? (finalX = foodRect.left)
    : (finalX = foodRect.left + food.offsetWidth);
  finalY = foodRect.top + food.offsetHeight / 4;

  ctx.beginPath();
  ctx.moveTo(initialX, initialY);
  ctx.lineTo(finalX, finalY);
  ctx.stroke();

  if (countFoods[animalsIndex].foodsMatched.length == animalsDiet.length) {
    selectedAnimal.classList.add("disabled");
  }
}

function isLeftDiv() {
  return (
    animals[animalsIndex].getBoundingClientRect().left < window.innerWidth / 2
  );
}
