const getScript = document.currentScript;
let form = document.querySelector("#form");
let wordCount = document.querySelector(".wordCount");
let main = document.querySelector(".main");
let loader = document.querySelector(".main-loader");
let errorMsg = document.querySelector(".errorMsg");
let script = document.currentScript;
let txtBox = document.querySelector(".txtBox");
const permaLink = getScript.dataset.permalink;
const sortup = document.querySelector(".sortup-icon");
let applyBtn = document.querySelector(".btn-info");

let sortingFilter = document.querySelector("#select_dropDown");

// grabbing advanced filter elements.
let tick;
let startsWith = document.getElementById("startsWith");
let mustInclude = document.getElementById("mustInclude");
let endsWith = document.getElementById("endsWith");
let exculdeWith = document.getElementById("exculdeWith");
let includeWith = document.getElementById("inculdeWith");
let wordLength = document.getElementById("wordLength");
let btn = document.querySelector(".serachBtn");
let tab_container = document.querySelector(".tab_container");
let dictionary = document.querySelector(".select_dropDown2");
var sortValue;
var sortBool = false;
let sortSelect = document.querySelector("#sort-select");
let serachValue = txtBox.value.toLowerCase();
let prefixValue = startsWith.value;
let containsValue = mustInclude.value;
let suffixValue = endsWith.value;
let exculdeValue = exculdeWith.value;
let includeValue = includeWith.value;
let lengthValue = wordLength.value;
let dictonary = document.querySelector(".select_dropDown2").value;
let letterCloseButton = document.querySelector(
  ".letter-close-button-commonPage"
);
let ok = true;
const siteUrl = window.location.href;
let queryParams = [
  {
    name: "search",
    values: txtBox,
  },
  {
    name: "prefix",
    values: startsWith,
  },
  {
    name: "contains",
    values: mustInclude,
  },
  {
    name: "suffix",
    values: endsWith,
  },
  {
    name: "exclude",
    values: exculdeWith,
  },
  {
    name: "include",
    values: includeWith,
  },
  {
    name: "length",
    values: wordLength,
  },
  {
    name: "length",
    values: wordLength,
  },
  {
    name: "dictionary",
    values: dictionary,
  },
];

if (serachValue) {
  letterCloseButton.classList.add("ltr-cls-btn-commonPage");
}
letterCloseButton.addEventListener("click", () => {
  txtBox.value = "";
  letterCloseButton.classList.remove("ltr-cls-btn-commonPage");
});

function mobileScrollTop(x) {
  if (x.matches) {
    console.log(x.matches);
    txtBox.addEventListener("click", () => {
      document.documentElement.scrollTop = 350;
      setTimeout(() => {
        document.documentElement.scrollTop = 350;
      }, 300);
    });
  } else {
    console.log("false");
  }
}
var x = window.matchMedia("(max-width: 768px)");
mobileScrollTop(x);
x.addListener(mobileScrollTop);

let rangeOfBlankTile = script.dataset.range;
let quesMark = "?";
const getDiff = (text1, text2) => {
  var diffRange = [];
  var currentRange = undefined;
  for (var i = 0; i < text1.length; i++) {
    if (text1[i] != text2[i]) {
      if (currentRange == undefined) {
        currentRange = [i];
      }
    }
    if (currentRange != undefined && text1[i] == text2[i]) {
      currentRange.push(i);
      diffRange.push(currentRange);
      currentRange = undefined;
    }
  }
  if (currentRange != undefined) {
    currentRange.push(i);
    diffRange.push(currentRange);
  }
  return diffRange;
};

// getWords define...
const getData = async (serachValue) => {
  try {
    errorMsg.innerHTML = "";
    wordCount.innerHTML = "";
    let selectedDictionary = document.querySelector(".select_dropDown2").value;
    main.innerHTML = `<div class="loader">
    <img src='/assets/images/loading.gif'>
    <div style="font-weight:900;font-size:14px" >Finding words - Powered by ${siteUrl.replace(
      /^https?:\/\//,
      ""
    )}</div>
    </div>`;

    const response = await fetch(
      `/.netlify/functions/getRepeatWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
    );
    const data = await response.json();
    main.innerHTML = "";
    getWords(data);
    //getWords calling...
  } catch (error) {
    console.log(error);
  }
};

//getData calling...
// if (lengthValue === "1") {
//   errorMsg.innerHTML = "words length should be more than 1";
// } else {
// getData(serachValue.toLowerCase());
function logSubmit(e) {
  e.preventDefault();
  resultPage2(queryParams);
  const scrollingElement = document.scrollingElement || document.body;
  scrollingElement.scroll({ top: 0, behavior: "smooth" });
  if (rangeOfBlankTile) {
    if (!txtBox.value.includes("?")) {
      txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
    }
  }
  getData(txtBox.value.toLowerCase());
  addFilterCount();
}

dictionary.addEventListener("change", (e) => {
  logSubmit(e);
});
// }

applyBtn.addEventListener("submit", logSubmit);
form.addEventListener("submit", logSubmit);

// getWords function define...
function getWords(data) {
  main.innerHTML = "";
  tab_container.innerHTML = "";

  data = filterRepeatedWords(txtBox.value.toLowerCase(), data);
  // data = sortWords(data);
  if (data.length === 0) {
    hideResultPageComponents();
    errorMsg.innerHTML = "no words found";
    wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
      ""
    )}</strong>`;
  } else {
    showResultPageComponents();
    let newWordsLength = 0;
    let dataArr = [];
    let points = 0;

    for (let i = 15; i >= 0; i--) {
      let newdata = data.filter((item) => item.length === i);
      let prefixValue = startsWith.value;
      let containsValue = mustInclude.value;
      let suffixValue = endsWith.value;
      let exculdeValue = exculdeWith.value;
      let includeValue = includeWith.value;
      let lengthValue = wordLength.value;

      if (startsWith.value) {
        newdata = newdata.filter((item2) =>
          item2.startsWith(prefixValue.toLowerCase())
        );
        startsWith.classList.add("filter_val", "tick");
        // startsWith.value =
      } else {
        startsWith.classList.remove("filter_val", "tick");
      }
      if (mustInclude.value) {
        newdata = newdata.filter((item) =>
          item.includes(containsValue.toLowerCase())
        );
        mustInclude.classList.add("filter_val", "tick");
        // mustInclude.value = containsValue;
      } else {
        mustInclude.classList.remove("filter_val", "tick");
      }
      if (endsWith.value) {
        newdata = newdata.filter((item) =>
          item.endsWith(suffixValue.toLowerCase())
        );
        endsWith.classList.add("filter_val", "tick");
        // endsWith.value = suffixValue;
      } else {
        endsWith.classList.remove("filter_val", "tick");
      }
      if (exculdeWith.value) {
        let excludeData = [];
        newdata.map((item) => {
          let check = false;
          for (let e = 0; e < exculdeValue.length; e++) {
            const element = exculdeValue[e].toLowerCase();
            if (item.includes(element)) {
              check = true;
              break;
            } else {
              check = false;
            }
          }
          if (check === false) {
            excludeData.push(item);
          }
          newdata = excludeData;
        });
        exculdeWith.classList.add("filter_val", "tick");
        // exculdeWith.value = exculdeValue;
      } else {
        exculdeWith.classList.remove("filter_val", "tick");
      }
      if (includeWith.value) {
        let data = [];
        newdata.map((item) => {
          let check = false;
          for (let e = 0; e < includeValue.length; e++) {
            const element = includeValue[e].toLowerCase();
            if (!item.includes(element)) {
              check = true;
              break;
            } else {
              check = false;
            }
          }
          if (check === false) {
            data.push(item);
          }
        });
        includeWith.classList.add("filter_val", "tick");
        includeWith.value = includeValue;
        newdata = data;
      } else {
        includeWith.classList.remove("filter_val", "tick");
      }
      if (wordLength.value) {
        newdata = newdata.filter((item) => item.length == wordLength.value);
        wordLength.classList.add("filter_val", "tick");
        wordLength.value = lengthValue;
      } else {
        wordLength.classList.remove("filter_val", "tick");
      }
      if (newdata.length == 0) {
        main.innerHTML += "";
      } else {
        newWordsLength += newdata.length;
        newdata = sortWords(newdata);
        const result = newdata.map((item) => {
          // var text1 = serachValue.replace("?", "");
          // var text2 = item;
          // var text3 = item;
          // let chars = text1.split("");

          let indexs = [];
          // chars.map((i) => {
          //   let findIndexes = findIndex(text3, i);
          //   if (findIndexes.length > 0) {
          //     text3 = text3.split("");
          //     text3[findIndexes] = "$";
          //     text3 = text3.join("");

          //     indexs = [...indexs, ...findIndexes];
          //   }
          // });
          // let itemHtml = "";
          // text2.split("").map((itemValue, index) => {
          //   let check = indexs.find((i) => i === index);

          //   if (check !== undefined) {
          //     itemHtml += `${itemValue}`;
          //   } else {
          //     itemHtml += `<span class='highlight'>${itemValue}</span>`;
          //   }
          // });

          let ScrabbleLetterScore = ScrabbleScore();
          sum = 0;
          item = item.toLowerCase();
          for (let i = 0; i < item.length; i++) {
            sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
          }
          dataArr.push(item);

          if (item.length === 1) {
            ok = false;
            newWordsLength = newWordsLength - 1;
          } else {
            return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
            <li>${item}
            <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
            </li></a>`;
          }
        });
        if (result[0] !== undefined) {
          tab_container.innerHTML += `
          <input type="button" id="Tab_${i}" onclick="Filtering(${i})" value="${i} Letter"
          class="tab_link  cursorPointer" />
          `;
          let tabs = document.getElementsByClassName("tab_link");
          tabs[0] ? tabs[0].classList.add("active-tab") : "";
          main.innerHTML += `
          <div class="allGroupWords wordlistContainer" id="alpha_${i}">
              <div class="wordListHeading">
                  <h3 class="lead">${i} Letter Words</h3>
              </div>
              <div class="wordList">
                  <ul class="ul list-unstyled">
                   ${result.join("")}
                  </ul>
              </div>
          </div>
          `;
        }
      }
    }
    if (newWordsLength === 0) {
      hideResultPageComponents();
      errorMsg.innerHTML = "no words found";
    }
  }
}

function filterRepeatedWords(includeValue, newdata) {
  let data = [];
  let filteredData = [];
  let check,
    dCheck = false;

  if (includeValue) {
    newdata.map((item) => {
      var matchCounter = 0;
      var tempArr = [];
      for (let e = 0; e < item.length; e++) {
        var element = item[e].toLowerCase();
        if (includeValue.includes(element)) {
          check = true;
          if (!tempArr.includes(element.charCodeAt())) {
            tempArr.push(element.charCodeAt());
            matchCounter++;
          }
        } else {
          check = false;
          break;
        }
      }
      if (check === true && matchCounter >= includeValue.length) {
        var arr1 = getRepeatedChars(item, includeValue);
        if (arr1.length != 0) {
          arr1.map((elem) => {
            if (item.includes(elem)) {
              dCheck = true;
            }
          });
          if (dCheck == true) {
            data.push(item);
          }
        }
      }
    });
  }
  return data;
}

const getRepeatedChars = (str, userInput) => {
  var userInputArr = userInput.split("");
  const chars = {};
  for (const char of str) {
    chars[char] = (chars[char] || 0) + 1;
  }
  return Object.entries(chars)
    .filter((char) => char[1] > 1 && userInputArr.includes(char[0]))
    .map((char) => char[0]);
};

// sorting by points
function sortPointsby(sortValue, data) {
  main.innerHTML = "";
  if (sortValue) {
    let newWordsLength = 0;
    for (let i = serachValue.length; i >= 1; i--) {
      var newdata = data.filter((item) => item.length === i);
      if (newdata.length === 0) {
        main.innerHTML += "";
      } else {
        newWordsLength += newdata.length;
        var newArray = [];
        newdata.map((item) => {
          if (item.length === 1) {
            ok = false;
            newWordsLength = newWordsLength - 1;
          } else {
            let ScrabbleLetterScore = ScrabbleScore();
            let points = 0;
            item = item.toLowerCase();
            for (let i = 0; i < item.length; i++) {
              points += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
            }
            const value = {
              words: item,
              points: points,
            };
            newArray.push(value);
          }
        });

        newArray.sort(function (a, b) {
          return b.points - a.points;
        });
        const result = newArray.map((item) => {
          var text1 = serachValue.replace("?", "");
          var text2 = item.words;
          var text3 = item.words;
          function findIndex(str, char) {
            const strLength = str.length;
            const indexes = [];
            let newStr = str;
            while (newStr && newStr.indexOf(char) > -1) {
              indexes.push(newStr.indexOf(char) + strLength - newStr.length);
              newStr = newStr.substring(newStr.indexOf(char) + 1);
              newStr = newStr.substring(newStr.indexOf(char) + 1);
            }
            return indexes;
          }
          let chars = text1.split("");
          let indexs = [];
          chars.map((i) => {
            let findIndexes = findIndex(text3, i);
            if (findIndexes.length > 0) {
              text3 = text3.split("");
              text3[findIndexes] = "$";
              text3 = text3.join("");
              indexs = [...indexs, ...findIndexes];
            }
          });
          let itemHtml = "";
          text2.split("").map((itemValue, index) => {
            let check = indexs.find((i) => i === index);
            if (check !== undefined) {
              itemHtml += `${itemValue}`;
            } else {
              itemHtml += `<span class='highlight'>${itemValue}</span>`;
            }
          });
          return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
          <li>${itemHtml}
        <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
          </li></a>`;
        });

        main.innerHTML += `
        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
            <div class="wordListHeading">
                <h3 class="lead">${i} Letter Words</h3>
            </div>
            <div class="wordList">
                <ul class="ul list-unstyled">
                 ${result.join("")}
                </ul>
            </div>
        </div>
        `;
      }
    }
  }
}

// Scrabble Point Array
const ScrabbleScore = () => {
  let twl06_sowpods = {
    a: 1,
    e: 1,
    i: 1,
    o: 1,
    u: 1,
    l: 1,
    n: 1,
    r: 1,
    s: 1,
    t: 1,
    d: 2,
    g: 2,
    b: 3,
    c: 3,
    m: 3,
    p: 3,
    f: 4,
    h: 4,
    v: 4,
    w: 4,
    y: 4,
    k: 5,
    j: 8,
    x: 8,
    q: 10,
    z: 10,
  };

  let wwfScore = {
    a: 1,
    b: 4,
    c: 4,
    d: 2,
    e: 1,
    f: 4,
    g: 3,
    h: 3,
    i: 1,
    j: 10,
    k: 5,
    l: 2,
    m: 4,
    n: 2,
    o: 1,
    p: 4,
    q: 10,
    r: 1,
    s: 1,
    t: 1,
    u: 2,
    v: 5,
    w: 4,
    x: 8,
    y: 3,
    z: 10,
  };

  if (dictonary === "wwf") {
    return wwfScore;
  } else {
    return twl06_sowpods;
  }
};
//Handling of filter counter in advanced filter
function addFilterCount() {
  let filter_val = document.getElementsByClassName("filter_val");
  let filter = document.querySelector(".filter_count");
  let filter_count = filter_val.length;
  if (filter_count === 0) {
    filter.style.display = "none";
  } else {
    filter.style.display = "inline-block";
  }

  filter.innerHTML = filter_count;
}

// handling of filter on scroll
window.onscroll = function () {
  var section = document.querySelectorAll(".wordlistContainer");
  let new_sections = {};
  Array.prototype.forEach.call(section, function (e) {
    if (document.body.clientWidth > 991) {
      new_sections[e.id] = e.offsetTop - 10;
    } else {
      new_sections[e.id] = e.offsetTop - 10;
    }
  });
  var scrollPosition =
    document.documentElement.scrollTop || document.body.scrollTop;
  for (i in new_sections) {
    let sort_val = document.querySelector(".sort-select").value;
    if (
      i.split("_")[0] == sort_val &&
      new_sections[i] &&
      new_sections[i] <= scrollPosition
    ) {
      document.querySelector(".active-tab").classList.remove("active-tab");
      var active_now = document.querySelector("#Tab_" + i.split("_")[1]);
      active_now.classList.add("active-tab");
      active_now.scrollIntoView({ block: "nearest" });
    }
  }
};

// Add Filtering
let sections = {};
function Filtering(id) {
  let tabs = document.getElementsByClassName("tab_link");
  tabs[0] ? tabs[0].classList.add("active-tab") : "";

  Array.from(tabs).map((item) => {
    item.classList.remove("active-tab");
  });
  main.innerHTML += ``;
  let activeLetter = event.target;
  activeLetter.classList.add("active-tab");

  var section = document.querySelectorAll(".allGroupWords");
  var sort_val = "alpha";
  Array.prototype.forEach.call(section, function (e) {
    if (document.body.clientWidth > 991) {
      sections[e.id] = e.offsetTop - 10;
    } else {
      sections[e.id] = e.offsetTop - 10;
    }
  });
  document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;

  setTimeout(() => {
    document.documentElement.scrollTop = sections[sort_val + "_" + id] + 5;
  }, 150);
}

// next && previous functionality
let prev = document.getElementById("prev");
let next = document.getElementById("next");

if (prev) {
  prev.onclick = scroll_Right;
}
if (next) {
  next.onclick = scroll_Left;
}
window.addEventListener("resize", function () {
  scroll_visible();
});
window.addEventListener("scroll", function () {
  scroll_visible();
});
function scroll_visible() {
  let tab_container = document.querySelector("#tab-container");
  if (tab_container) {
    if (tab_container.clientWidth === tab_container.scrollWidth) {
      prev.style.display = "none";
      next.style.display = "none";
    } else {
      prev.style.display = "block";
      next.style.display = "block";
    }
  }
}
scroll_visible();

function scroll_Left() {
  tab_container.scrollLeft += 130;
}
function scroll_Right() {
  tab_container.scrollLeft -= 130;
}
function findIndex(str, char) {
  const strLength = str.length;
  const indexes = [];
  let newStr = str;

  while (newStr && newStr.indexOf(char) > -1) {
    indexes.push(newStr.indexOf(char) + strLength - newStr.length);
    newStr = newStr.substring(newStr.indexOf(char) + 5);
    newStr = newStr.substring(newStr.indexOf(char) + 5);
  }

  return indexes;
}
//event listeners

txtBox.addEventListener("input", (e) => {
  if (e.target.value === "") {
    letterCloseButton.classList.remove("ltr-cls-btn-commonPage");
  } else {
    letterCloseButton.classList.add("ltr-cls-btn-commonPage");
  }
  let rangeOfBlankTile = script.dataset.range;
  e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "");
  if (rangeOfBlankTile === "") {
    rangeOfBlankTile = 3;
  }
  e.target.value = e.target.value.replace(/ /g, "?");
  let data = [];
  data = e.target.value.split("").filter((i) => i === "?");
  if (data.length > rangeOfBlankTile) {
    e.target.value = e.target.value.replace(/\?$/, "");
  }
});

//sort up  listeners
sortup.addEventListener("click", () => {
  if (bool) {
    theSelect.size = 0;
    bool = false;
    theSelect.style.display = "none";
  } else {
    bool = true;
    theSelect.size = 3;
    theSelect.style.display = "block";
  }
});

function init() {
  var url = window.location.href;

  if (url.includes("?")) {
    showResultPageComponents();
    setParamValues(queryParams);
    window.onload = function (e) {
      logSubmit(e);
    };
  }
}

function showResultPageComponents() {
  sortSelect.style.display = "block";
  document.querySelector(".tab_link_wrapper").style.display = "flex";
}

function hideResultPageComponents() {
  sortSelect.style.display = "none";
  document.querySelector(".tab_link_wrapper").style.display = "none";
}

function sortWords(data) {
  if (sortingFilter.selectedIndex == 0) {
    return data;
  } else if (sortingFilter.selectedIndex == 1) {
    return data.sort();
  } else if (sortingFilter.selectedIndex == 2) {
    return data.reverse();
  } else if (sortingFilter.selectedIndex == 3) {
    var tempArr = [];
    var newArray = [];
    data.map((item) => {
      let newWordsLength = 0;
      if (item.length === 1) {
        ok = false;
        newWordsLength = newWordsLength - 1;
      } else {
        let ScrabbleLetterScore = ScrabbleScore();
        let points = 0;
        item = item.toLowerCase();
        for (let i = 0; i < item.length; i++) {
          points += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
        }
        const value = {
          words: item,
          points: points,
        };
        newArray.push(value);
      }
    });

    newArray.sort(function (a, b) {
      return b.points - a.points;
    });

    newArray.map((ele) => {
      tempArr.push(ele.words);
    });

    return tempArr;
  }
}

init();