document.addEventListener("DOMContentLoaded", function (event) {
  const body = document.querySelector("body");
  const sideAnchorMenuElement = document.querySelector("#anchorMenu_js");

  const popupElement = document.querySelector("#breadcrumbPopup");
  const openPopupElement = document.querySelector("#open-breadcrumb-popup");
  const openPopupButtonElement = document.querySelector(".open-breadcrumb-popup");
  const closePopupElement = document.querySelector("#breadcrumbPopupClose");
  const closePopupAnchorElement = document.querySelectorAll(".breadcrumbs-anchors-list a");

  const allTemplatesGroups = document.querySelectorAll("._sidebarGroup_js");

  if (openPopupButtonElement) {
    window.addEventListener("scroll", function () {
      const position = window.pageYOffset;
      let topDocumentPosition = document.documentElement.scrollTop;
      let scrollTop = position || topDocumentPosition;

      if (scrollTop >= 550) {
        openPopupButtonElement.classList.add("stick");
      } else {
        openPopupButtonElement.classList.remove("stick");
      }
    });
  }

  if (sideAnchorMenuElement) {

    window.addEventListener("scroll", function () {
      const position = window.pageYOffset;
      let topDocumentPosition = document.documentElement.scrollTop;
      let scrollTop = position || topDocumentPosition;
      const sideAnchorMenuLinkElement = document.querySelectorAll("#anchorMenu_js a");



      if (scrollTop >= 550) {
        sideAnchorMenuElement.classList.add("show-search");
      } else {
        sideAnchorMenuElement.classList.remove("show-search");
      }

      allTemplatesGroups.forEach(function (currentElement) {
        const top = currentElement.offsetTop;

        if (topDocumentPosition >= top - 150) {
          sideAnchorMenuLinkElement.forEach(function (el) {
            el.classList.remove("selected");
            let hrefValue = el.getAttribute("href");

            if (hrefValue.includes(currentElement.id)) {
              el.classList.add("selected");
            }
          });
        }
      });
    });
  }

  const searchForm_element = document.querySelector("#searchForm");

  if (searchForm_element) {
    const allTemplatesWrapper_element = document.querySelector(".all-templates-wrapper");
    const originalLayout = document.querySelector(".all-templates-wrapper").innerHTML;
    const searchInput_element = document.querySelector(".search-field");
    const clearFormButton_element = document.querySelector(".search-form-button_clear");
    const templatesData = document.querySelectorAll("._templatesSearchItem .template-item_global");
    const allTemplatesArray = [...templatesData];
    const cleanData = resultsFilter(allTemplatesArray);

    function resultsFilter(array) {
      array = array.filter(
        (item, index, self) => index === self.findIndex((t) => t.innerText === item.innerText)
      );
      return array;
    }

    function clearPageData(element) {
      if (searchForm_element.classList.contains("showClear")) {
        searchForm_element.classList.remove("showClear");
      }
      element.classList.remove(" three-columns-flex-grid_global");
      element.innerHTML = "";
      element.innerHTML = originalLayout;
    }

    function searchTemplate(array) {
      let searchQuery = searchInput_element.value.toLowerCase();
      let searchResult = array.filter(function (cardItem) {
        return cardItem.innerText.toLowerCase().includes(searchQuery);
      });

      if (searchResult.length > 0) {
        searchResult.forEach(function (el) {
          let resultElementWrap = document.createElement("div");
          resultElementWrap.classList.add("grid-item");
          resultElementWrap.append(el);
          allTemplatesWrapper_element.append(resultElementWrap);
        });
      } else {
        noResults();
      }
    }

    function noResults() {
      let noResultElementWrap = document.createElement("div");
      noResultElementWrap.classList.add("no-search-results");
      noResultElementWrap.innerHTML =
        "<h3>No results found 😿</h3><p>Try different keywords or remove search query to see all page data</p>";
      allTemplatesWrapper_element.append(noResultElementWrap);
    }

    //
    // searchForm_element.addEventListener('submit', function (e){
    //     e.preventDefault();
    //
    //     if(searchInput_element.value.length > 0) {
    //         allTemplatesWrapper_element.innerHTML = "";
    //         allTemplatesWrapper_element.classList.add(' three-columns-flex-grid_global')
    //         searchTemplate(cleanData)
    //     } else {
    //         clearPageData(allTemplatesWrapper_element)
    //     }
    //
    // });
    //
    // clearFormButton_element.addEventListener('click', function (e) {
    //     e.preventDefault();
    //     searchForm_element.reset();
    //     clearPageData(allTemplatesWrapper_element)
    // })
    //
    // searchInput_element.addEventListener('keyup', function (e){
    //     let searchQuery = searchInput_element.value;
    //     console.log(searchQuery)
    //     if (searchQuery.length > 0) {
    //         searchForm_element.classList.add('showClear')
    //     }
    //     else {
    //         clearPageData(allTemplatesWrapper_element)
    //     }
    // });
  }

  if (openPopupElement && closePopupElement) {
    openPopupElement.addEventListener("click", (e) => {
      e.preventDefault();
      body.classList.toggle("_open-breadcrumbs");

      if (
        openPopupButtonElement.classList.contains("stick") &&
        body.classList.contains("_open-breadcrumbs")
      ) {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    });

    closePopupElement.addEventListener("click", (e) => {
      e.preventDefault();
      body.classList.remove("_open-breadcrumbs");
    });
    closePopupAnchorElement.forEach(function (item, i) {
      item.addEventListener("click", (e) => {
        body.classList.remove("_open-breadcrumbs");
      });
    });
  }
});