const obj = {
  "/pl/menu/fotografia-205": {
    id: "3827",
    val: "3828",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/filmowanie-212": {
    id: "3829",
    val: "3830",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/statywy-201": {
    id: "3831",
    val: "3832",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/torby-i-plecaki-202": {
    id: "3833",
    val: "3834",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/studio-204": {
    id: "3835",
    val: "3836",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/audio-203": {
    id: "3837",
    val: "3838",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/outdoor-252": {
    id: "3839",
    val: "3840",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/mobile-334": {
    id: "3841",
    val: "3842",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
  "/pl/menu/inne-1019": {
    id: "3843",
    val: "3844",
    isFetched: false,
    tmp_fetch: false,
    isMouseOver: false,
  },
};

const initSlider = (slickContainer, navEl, objLinkHref) => {
  $(slickContainer).slick({
    slidesToShow: 3,
    prevArrow:
      '<a class="slick-prev" href=""><i class="icon-angle-left"></i></a>',
    nextArrow:
      '<a class="slick-next" href=""><i class="icon-angle-right"></i></a>',
  });
  $(slickContainer).on("afterInit", function (event, slick, direction) {
    console.log("dasdasdXDD");
  });

  setTimeout(() => {
    objLinkHref.isFetched = true;
    objLinkHref.isMouseOver ? "" : (navEl.style.display = "none");
  }, 100);
};

const fetchProducts = (
  container,
  traitId,
  traitVal,
  subNavHandler,
  objLinkHref
) => {
  let tmp_text = ``;
  $.ajax({
    type: "GET",
    url: `https://multifoto.pl/pl/search.php?traits_alt[${traitId}]=${traitVal}&getProductXML=true&limit=10`,
    dataType: "xml",
    timeout: 12000,
    success: function (xml) {
      $(xml)
        .find("page > products > product")
        .each(function (index) {
          const prod = $(this);

          const name =
            prod.find("name").eq(1).text().length > 3
              ? prod.find("name").eq(1).text()
              : prod.find("name").eq(0).text();
          const id = prod.attr("id");
          const photo = prod.find("icon_src").eq(0).text();
          const url = prod.attr("link");
          const rate = prod.find("comments").attr("avg");
          const size = prod.find("sizes > size").attr("name");
          const availability = prod.find("sizes > availability").attr("status");

          // Zmienne związane z ceną
          const pricesEl = prod.find("prices");
          const priceEl = prod.find("price");

          const price = priceEl.attr("price_formatted");
          const maxPrice = priceEl.attr("maxprice_formatted");
          const omnibusPrice = priceEl.attr("omnibus_price_formatted");

          // markup produktu
          tmp_text += `
              
    <div
      class="product d-flex flex-column justify-content-between col-6 col-sm-3 col-xl-2 py-3"
      tabindex="0"
      style="min-width: 250px;"
    >
      <a
        class="product__icon d-flex justify-content-center align-items-center"
        rel="nofollow"
        data-product-id="${id}"
        href="${url}"
        title="${name}"
        style="max-height: 225px"
        tabindex="0"
      >
        <img src="${photo}" class="b-lazy b-loaded" alt="${name}"
      /></a>
      <div class="d-flex justify-content-between mb-1" style="align-self: flex-end">
        <div>
          <div class="avg__wrapper">
            <div class="avg d-flex align-items-center" data-avg=${rate}>
              <div class="note">
                <span
                  ><i class="icon-star ${
                    rate > 0.5 ? "--active" : ""
                  }"></i><i class="icon-star ${
            rate > 1.5 ? "--active" : ""
          }"></i
                  ><i class="icon-star ${
                    rate > 2.5 ? "--active" : ""
                  }"></i><i class="icon-star ${
            rate > 3.5 ? "--active" : ""
          }"></i
                  ><i class="icon-star ${rate > 4.5 ? "--active" : ""}"></i
                ></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <h3>
        <a class="product__name" rel="dofollow" href="${url}" title="${name}"
          >${name}
        </a>
      </h3>
      <div class="product__prices --omnibus">
        <div class="product__price_container">
          <div>
            ${
              maxPrice && omnibusPrice
                ? `
            <div class="product__priceMax_container">
              <span class="price --max"
                ><del>${maxPrice}<span class="price_vat"> brutto</span></del></span
              ><strong class="price --core-red"
                >${price}<span class="price_vat"> brutto</span></strong
              >
            </div>
            `
                : `
            <strong class="price"
              >${price}<span class="price_vat"> brutto</span>
            </strong>
            `
            }
            <div class="product__availability">
            ${
              availability === "enable"
                ? '<span class="product__available">Dostępny</span>'
                : '<span class="product__unavailable">Niedostępny</span>'
            }
            </div>
          </div>
          <button
            onclick="hot_spot_3(event,this)"
            data-buttonsajax="false"
            class="to_bsk__btn btn --solid --large"
            style="justify-content: flex-start"
            data-buttonajaxsize="${size}"
            data-buttonajaxid="${id}"
            title="Do koszyka"
            tabindex="0"
          >
            <img
              src="https://lowepro.com.pl/data/include/cms/Ikonki_bannery_New_Multifoto/cart_2.png?v=1703060656278"
              alt="basket_icon"
            />
          </button>
        </div>
        ${
          maxPrice && omnibusPrice
            ? `
        <span class="omnibus_price"
          ><span class="omnibus_price__text"
            >Najniższa cena produktu w okresie 30 dni przed wprowadzeniem obniżki: </span
          ><span class="omnibus_price__value">${omnibusPrice}</span></span
        >`
            : ``
        }
      </div>
    </div>
                   `;
        });

      container.innerHTML = tmp_text;
      initSlider(container, subNavHandler, objLinkHref);
    },
  });
};

if (window.innerWidth > 979) {
  document.querySelectorAll("ul.navbar-nav > .nav-item").forEach((navItem) => {
    const link = navItem.querySelector(".nav-link");
    const subNav = navItem.querySelector("ul.navbar-subnav");
    const sliderContainer = navItem.querySelector(
      ".navbar-whiteBackground__recommendationContainer"
    );
    const loaderContainer = sliderContainer.querySelector(
      "#loaded_contant_bm_hotspots"
    );
    const ul_container = navItem.querySelector("ul");
    const linkHref = link.getAttribute("href");

    navItem.addEventListener("mouseleave", (e) => {
      if (obj[linkHref] && obj[linkHref].isFetched) {
        ul_container.style.display = "none";
        obj[linkHref].isMouseOver = false;
      } else {
        obj[linkHref].isMouseOver = false;
      }
    });

    navItem.addEventListener("mouseover", (e) => {
      obj[linkHref].isMouseOver = true;
      ul_container.style.display = "grid";

      if (!obj[linkHref]) {
        loaderContainer.style.display = "none";
        sliderContainer.remove();
      }

      if (obj[linkHref] && !obj[linkHref].tmp_fetch) {
        const { id, val } = obj[linkHref];

        obj[linkHref].tmp_fetch = true;
        fetchProducts(sliderContainer, id, val, subNav, obj[linkHref]);
      }

      navItem.querySelectorAll(".nav-merge > li:not(.empty)").forEach((el) => {
        el.addEventListener("mouseover", () => {
          navItem.querySelector(
            ".navbar-whiteBackground__baner"
          ).style.display = "none";
        });
        el.addEventListener("mouseleave", () => {
          navItem.querySelector(
            ".navbar-whiteBackground__baner"
          ).style.display = "block";
        });
      });
    });
  });
}