document.addEventListener("DOMContentLoaded", function (event) {
  $(".dropdown-desktop").hover(
    function () {
      $(".dropdown-desktop-menu:not(:animated)")
        .stop(true, true)
        .slideDown(150);
    },

    function () {
      $(".dropdown-desktop-menu").stop(true, true).slideUp(150);
    }
  );

  $(".dropdown-menu-category").hover(
    function () {
      let hasChildren = $(".sidenav-menu", this).children();
      if (hasChildren.length > 0) {
        $(".sidenav-menu", this).show();
      }
    },

    function () {
      $(".sidenav-menu", this).hide();
    }
  );
  // const allBrands = [...document.querySelectorAll(".order-brands")];
  // let counts = {};
  // const arrLetter = ['0-9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
  // let linksCounts = {};

  // allBrands.map((item, index) => {
  //   if (counts[item.dataset.letter]) {
  //     let dataInfo = {
  //       name : item.dataset.name,
  //       link : item.dataset.link,
  //     }
  //     counts[item.dataset.letter].push(item.dataset.name);
  //   } else {
  //     let dataInfo = {
  //       name : item.dataset.name,
  //       link : item.dataset.link,
  //     }
  //     counts[item.dataset.letter] = (dataInfo);
  //   }
  // })

  // arrLetter.map((item, index) => {
  //   counts[item?.dataInfo]?.sort();
  //   console.log(counts[item])
  //   if (counts[item.dataInfo]) {
  //     let html = `<div class="order-brands-letter">${item.dataInfo.name}</div>`;
  //     counts[item].map((item, index) => {
  //       html += `<div class="order-brands-item" data-name="${item.dataInfo.name}">${item.dataInfo.name}</div>`;
  //     })
  //     let div = `<div id="${item}" class="order-brands-container">${html}</div>`;
  //     document.querySelector(".brands-list").innerHTML += div;
  //   }
  // })

  const allBrands = [...document.querySelectorAll(".order-brands")];
  let counts = {};
  let linksCounts = {};
  const arrLetter = [
    "0-9",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
  ];

  allBrands.map((item, index) => {
    if (counts[item.dataset.letter]) {
      counts[item.dataset.letter].push(item.dataset.name);
    } else {
      counts[item.dataset.letter] = [item.dataset.name];
    }
  });

  allBrands.map((links, index) => {
    let dataInfo = {
      name: links.dataset.name,
      href: links.dataset.link,
    };
    if (linksCounts[links.dataset.letter]) {
      linksCounts[links.dataset.letter].push(dataInfo);
    } else {
      linksCounts[links.dataset.letter] = [dataInfo];
    }
  });

  arrLetter.map((item, index) => {
    // if (counts[item]) {
    //   let html = `<div class="order-brands-letter">${item}</div>`;
    //   counts[item].map((item, index) => {
    //     html += `<div class="order-brands-item" data-name="${item}">${item}</div>`;
    //   })
    //   let div = `<div id="${item}" class="order-brands-container">${html}</div>`;
    //   document.querySelector(".brands-list").innerHTML += div;
    // }
    linksCounts[item]?.sort(function (a, b) {
      if (a.name > b.name) {
        return 1;
      }
      if (a.name < b.name) {
        return -1;
      }
      return 0;
    });

    if (linksCounts[item]) {
      let html = `<div class="order-brands-letter">${item}</div>`;
      linksCounts[item].map((item, index) => {
        html += `<div class="order-brands-item" data-name="${item.name}"><a href="${item.href}">${item.name}</a></div>`;
      });
      let div = `<div id="desk-${item}" class="order-brands-container">${html}</div>`;
      let divMob = `<div id="${item}" class="order-brands-container">${html}</div>`;
      document.querySelector(".brands-list.brands-desktop").innerHTML += div;
      document.querySelector(".brands-list.brands-mobile").innerHTML += divMob;
    }
  });
});
const observer = new MutationObserver(() => {
  let brandsMenu = document.querySelector("li.dropdown.yamm-fw.brands-unique");
  if (brandsMenu.classList.contains("open")) {
    document.querySelector("#header").style.position = "fixed";
  } else {
    document.querySelector("#header").style.position = "absolute";
  }
});

var billing = document.querySelector("li.dropdown.yamm-fw.brands-unique");
observer.observe(billing, {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true,
});