$(() => {
  x13webp.fixProductThumbs();
  if (!x13webpIsPs16) {
    x13webp.addStylesheet();
  }
  x13webp.observe();
});

$(window).on('hashchange', function () {
  if (!x13webpIsPs16) return;

  setTimeout(function () {
    let thumb = $('#thumbs_list_frame li:visible:first');
    if (thumb.length === 0) return;
    if (thumb.find('picture').length === 0) return;

    let img = thumb.find('img').attr('data-original') ?? thumb.find('img').attr('src');
    let source = thumb.find('source').attr('srcset');

    $('#' + x13webp.themeSelectors.jsQvProductCover).attr('src', img.replace('-cart_default', '-large_default'));
    $('#' + x13webp.themeSelectors.jsQvProductCover).siblings('source').attr('srcset', source.replace('-cart_default', '-large_default'));
  })
});


const x13webp = {
  themeSelectors: {
    jsQvProductCover: x13webpIsPs16 ? "bigpic" : "js-qv-product-cover",
    jsModalProductCover: "js-modal-product-cover",
    jsThumb: "js-thumb",
    jsModalThumb: "js-modal-thumb",
  },

  addStylesheet: () => {
    let thumbHover = "." + x13webp.themeSelectors.jsThumb + ":hover";
    let thumbSelected = "." + x13webp.themeSelectors.jsThumb + ".selected";
    let thumb = document.querySelector(thumbSelected);

    if (!thumb) return;

    thumb = getComputedStyle(thumb);
    let thumbBorder = {
      style: thumb.borderBlockStyle,
      width: thumb.borderBlockWidth,
      color: thumb.borderBlockColor,
    };

    let css =
        "picture" +
        thumbSelected +
        ", picture" +
        thumbHover +
        ", " +
        "picture" +
        thumbSelected.replace(
          x13webp.themeSelectors.jsThumb,
          x13webp.themeSelectors.jsModalThumb
        ) +
        ", picture" +
        thumbHover.replace(
          x13webp.themeSelectors.jsThumb,
          x13webp.themeSelectors.jsModalThumb
        ) +
        " { border: none !important; outline-style: " +
        thumbBorder.style +
        " !important; outline-color: " +
        thumbBorder.color +
        " !important; outline-width: " +
        thumbBorder.width +
        " !important; outline-offset: -" +
        thumbBorder.width +
        " !important;}",
      head = document.head || document.getElementsByTagName("head")[0],
      style = document.createElement("style");

    head.appendChild(style);

    style.type = "text/css";
    if (style.styleSheet) {
      // This is required for IE8 and below.
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
  },

  replacePictureSource: (target, source) => {
    target.setAttribute("srcset", source);
  },

  addAttributesToPicture: (target, classArray, dataArray = {}) => {
    target.style.display = "inline-block";
    target.classList.add(...classArray);

    Object.entries(dataArray).forEach(([key, value]) => {
      target.dataset[key] = value;
    });
  },

  fixProductThumbs: () => {
    const body = document.querySelector("body").getAttribute("id");

    if (body !== "product") return;

    const thumbs = [
      ...document.querySelectorAll("." + x13webp.themeSelectors.jsThumb),
    ];
    const modalThumbs = [
      ...document.querySelectorAll("." + x13webp.themeSelectors.jsModalThumb),
    ];

    const allThumbs = [...thumbs, ...modalThumbs];

    allThumbs.forEach((thumb) => {
      if (!thumb.parentElement) return;
      if (thumb.parentElement.tagName !== "PICTURE") return;

      const target = thumb.parentElement;
      const classArray = thumb.classList;
      const isModal = classArray.contains(x13webp.themeSelectors.jsModalThumb);
      const dataArray = Object.assign({}, thumb.dataset);

      x13webp.addAttributesToPicture(target, classArray, dataArray);

      thumb.className = isModal
        ? x13webp.themeSelectors.jsModalThumb + "-fix"
        : x13webp.themeSelectors.jsThumb + "-fix";
    });
  },

  observe: () => {
    const pictureTagObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (!mutation.target.parentElement) return;
        if (mutation.target.parentElement.tagName !== "PICTURE") return;

        const mutationClass = mutation.target.classList;

        if (
          mutationClass.contains(x13webp.themeSelectors.jsQvProductCover) ||
          mutationClass.contains(x13webp.themeSelectors.jsModalProductCover) ||
          mutation.target.getAttribute("id") ===
            x13webp.themeSelectors.jsQvProductCover
        ) {
          const target = mutation.target.parentElement.querySelector("source");
          let source =
            mutation.target.getAttribute("data-original") ??
            mutation.target.getAttribute("src");
          source = source.replace(/(\.jpg)|(\.png)/, ".webp");

          x13webp.replacePictureSource(target, source);
          return;
        }

        if (mutationClass.contains(x13webp.themeSelectors.jsThumb + "-fix")) {
          const target = mutation.target.parentElement;
          const classArray = mutation.target.classList;

          x13webp.addAttributesToPicture(target, classArray);
          return;
        }
      });
    });

    const allPictureTags = document.querySelectorAll("img");

    allPictureTags.forEach((pictureTag) => {
      pictureTagObserver.observe(pictureTag, { attributes: true });
    });
  },
};