const RIGHT_ORDER = ["hi!", "i'm", "danielle,", "nice", "to", "meet", "you!"];
const INPUT = document.querySelector("#answer");
const ERROR = document.querySelector("#error");
const FORM = document.querySelector("#form");
const ANSWER_LIST = document.querySelector("#answer-list");

let RIGHT_RANGES = [];
let WRONG_RANGES = [];

const rightHighlight = new Highlight();

const wrongHighlight = new Highlight();
wrongHighlight.type = "grammar-error";

// Checks the value of the input, removes extra spaces and turns it into an array
const getInputValue = () => {
  var regexPattern = /\s+/g;
  const stringWithoutSpaces = INPUT.value
    .toLowerCase()
    .replace(regexPattern, " ");
  const answer = stringWithoutSpaces.split(" ");

  return answer;
};

// Checks if the array with the input includes every single word that it's include in the answer array.
const verifyCorrectWords = () =>
  RIGHT_ORDER.every((word) => getInputValue().includes(word));

// Validates the input's answer and highlights what's in the right or wrong order
const checkAnswer = () => {
  // Resets global variables, error messages and previous answers
    RIGHT_RANGES = [];
    WRONG_RANGES = [];
    ERROR.innerHTML = "";
    ANSWER_LIST.innerHTML = "";
  
  // Checks if there are extra words
  if (getInputValue().length > RIGHT_ORDER.length) {
    ERROR.innerHTML =
      "<p>You added more words than this exercise requires. Please check it out and try again.</p>";
  }
  
  // Checks if there are missing words
  
  else if (getInputValue().length < RIGHT_ORDER.length) {
    ERROR.innerHTML =
      "<p>You are missing one or more words to order the phrase. Please check it out and try again.</p>";
  } else if(verifyCorrectWords()) {    
    // Adds each word of the answer
    const answer = getInputValue();
    answer.forEach((word) => {
      ANSWER_LIST.innerHTML += `<li>${word}</li>`;
    });
    
    const answerListNodes = ANSWER_LIST.children;
    
    // Selects the range of each <li> to start highligting process
    answer.forEach((word, index) => {
      const wordRange = new Range();
      wordRange.setStart(answerListNodes[index], 0);
      wordRange.setEnd(answerListNodes[index], 1);
      
      if (word === RIGHT_ORDER[index]) {
        // If the answer is right
        RIGHT_RANGES.push(wordRange);
      } else {
        // If the answer is wrong
        WRONG_RANGES.push(wordRange);
      }
    });
    
    // Highlights the answers in the right position
    RIGHT_RANGES.forEach((element) => {
      rightHighlight.add(element);
    });

    CSS.highlights.set("right-highlight", rightHighlight);
    
    // Highlights the answers in the right position
    WRONG_RANGES.forEach((element) => {
      wrongHighlight.add(element);
    });

    CSS.highlights.set("wrong-highlight", wrongHighlight);
  } else {
    ERROR.innerHTML =
      "<p>You wrote one of more words that are not related to this exercise. Please check it out and try again.</p>";
  }
};

FORM.addEventListener("submit", (e) => {
  e.preventDefault();
  checkAnswer();
});