const idmPhotoModuleLiteralsPM = {
  [`Okazja`]: "Okazja",
  [`Zobacz produkt`]: "Zobacz produkt",
  [`Dodany`]: "Dodany",
  [`Wystąpił błąd`]: "Wystąpił błąd",
  [`Do koszyka`]: "Do koszyka",
  [`Najniższa cena z 30 dni przed obniżką:`]:
    "Najniższa cena z 30 dni przed obniżką:",
  [`Cena regularna:`]: "Cena regularna:",
  [`Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę`]:
    "Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę",

  // mapowanie labelow
  ["new"]: "Nowość",
  ["bestseller"]: "Bestseller",
  ["promotion"]: "Promocja",
  ["discount"]: "Przecena",
  ["distinguished"]: "Produkt Wyróżniony",
  ["special"]: "Produkt Specjalny",
  ["subscription"]: "Subskrypcja",
};

// LAZY LOAD
function idmObserveEachOncePM(elements, callback, options = {}) {
  const observer = new IntersectionObserver(
    (entries, obs) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;

        callback(entry);
        obs.unobserve(entry.target);
      });
    },
    {
      threshold: 0.1,
      ...options,
    },
  );

  elements.forEach((el) => observer.observe(el));
  return observer;
}

idmObserveEachOncePM(
  document.querySelectorAll(".idm_picture__module"),
  (entry) => {
    idmPictureModuleProductsPM(entry.target);
  },
);

// GRAPHQL QUERY
function idmGetSingleProdGraphQLPM({
  prodId,
  opinions = false,
  labels = false,
  addToBasket = false,
}) {
  const IDM_PRICE_QUERY = (priceType) => `price {
      rebateCodeActive
      price {
        ${priceType} {
          value
          formatted
        }
      }
      omnibusPrice {
        ${priceType} {
          value
          formatted
        }
      }
      omnibusPriceDetails {
        unit {
          ${priceType} {
            value
            formatted
          }
        }
        youSavePercent
        omnibusPriceIsHigherThanSellingPrice
        newPriceEffectiveUntil {
          formatted
        }
      }
      max {
        ${priceType} {
          value
          formatted
        }
      }
      unit {
        ${priceType} {
          value
          formatted
        }
      }
      unitConvertedPrice {
        ${priceType} {
          value
          formatted
        }
      }
      youSavePercent
      beforeRebate {
        ${priceType} {
          value
          formatted
        }
      }
      beforeRebateDetails {
        youSavePercent
        unit {
          ${priceType} {
            value
            formatted
          }
        }
      }
      advancePrice {
        ${priceType} {
          value
          formatted
        }
      }
      suggested {
        ${priceType} {
          value
          formatted
        }
      }
      rebateNumber {
        number
        ${priceType} {
          value
          formatted
        }
      }
    }`;

  return `
    prod${prodId}: product(productId: ${prodId}) {
        product {
            id
            name
            link
            type
            icon
            ${labels ? "zones" : ""}
            ${
              opinions
                ? `
            opinion{
              rating
              count
            }`
                : ""
            }
            ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
            ${
              addToBasket
                ? `
              unit{
                id
                name
                singular
                plural
                fraction
                sellBy
                precision
                unitConvertedFormat
              }
              sizes{
                id
                name
                code
                amount
                availability{
                  visible
                  status
                }
                ${IDM_PRICE_QUERY(app_shop.vars.priceType)}
              }
              `
                : ""
            }
        }
    }`;
}

async function idmHandleAddToBasketPM(e) {
  const formEl = e.target.closest(".add_to_basket");
  if (!formEl) return;
  const buttonEl = formEl.querySelector(".add_to_basket__button");
  e.preventDefault();
  try {
    formEl.classList.add("--loading");
    const id = formEl.querySelector("input.product__add_id")?.value;
    const size = formEl.querySelector("input.product__add_size")?.value;
    const number = formEl.querySelector("input.product__add_number")?.value;

    const res = await fetch(`/graphql/v1/`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: `mutation {
            addProductsToBasket(ProductInput: {id: ${id}, size: "${size}", quantity: ${number}}) {     
              status
              results {         
                status          
                error {            
                  code
                  message
                }
              }
            }
          }`,
      }),
    });
    const data = await res.json();

    // Błąd
    if (data?.data?.addProductsToBasket?.status !== "success")
      throw new Error(data);
    else {
      localStorage.setItem("addedtoBasket", true);
      // Obsługiwanie sukcesu
      app_shop.fn?.menu_basket_cache();
      await app_shop.graphql.trackingEvents(res);
      buttonEl.classList.add("--success");
      buttonEl.innerHTML = `<span>${buttonEl.dataset.success}</span>`;
      setTimeout(() => {
        buttonEl.innerHTML = `<span>${buttonEl.dataset.text}</span>`;
        buttonEl.classList.remove("--success");
      }, 3000);
    }
  } catch (err) {
    console.error(err);
    Alertek.Error(
      idmPhotoModuleLiteralsPM[
        "Coś poszło nie tak podczas dodawania do koszyka. Spróbuj ponownie lub odśwież stronę"
      ],
    );
    buttonEl.innerHTML = `<span>${buttonEl.dataset.error}</span>`;
    buttonEl.classList.add("--error");
    setTimeout(() => {
      buttonEl.classList.remove("--error");
      buttonEl.innerHTML = `<span>${buttonEl.dataset.text}</span>`;
    }, 3000);
  } finally {
    formEl.classList.remove("--loading");
  }
}

function idmMarkupAddToBasketPM(prodData) {
  if (!prodData) return "";

  const totalAmount = prodData?.sizes?.[0]?.amount || 0;
  const prodStatus = prodData?.sizes?.[0]?.availability?.status || "disable";

  if (
    prodData.type !== "product" ||
    totalAmount === 0 ||
    prodStatus === "disable"
  )
    return `<a class="btn --solid --medium add_to_basket__link" href="${prodData.href}">${idmPhotoModuleLiteralsPM["Zobacz produkt"]}</a>`;

  return `<form class="add_to_basket" action="/basketchange.php" type="post">
    <input class="product__add_mode" type="hidden" value="1" name="mode">
    <input class="product__add_id" type="hidden" value="${prodData.id}" name="mode">
    <input class="product__add_size" type="hidden" value="${prodData.sizes?.[0]?.id || "uniw"}" name="mode">
    <input class="product__add_number" type="hidden" value="${prodData.unit?.sellBy || 1}" name="mode">
    <button class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmPhotoModuleLiteralsPM["Dodany"]}" data-error="${idmPhotoModuleLiteralsPM["Wystąpił błąd"]}" data-text="${idmPhotoModuleLiteralsPM["Do koszyka"]}">
        <span>${idmPhotoModuleLiteralsPM["Do koszyka"]}</span>
    </button>
  </form>`;
}

function idmMarkupPricePM({ prodData, addToBasket }) {
  if (!prodData) return "";

  let priceMarkup;
  if (!addToBasket)
    priceMarkup = `<div class="product_prices"><span class="price --normal --main">${prodData.price?.price?.[app_shop.vars.priceType]?.formatted}</span></div>`;
  else {
    const currentSize = prodData?.sizes?.[0] || prodData;

    const price =
      currentSize.price?.price?.[app_shop.vars.priceType]?.formatted;

    const omnibusPrice =
      currentSize?.price?.omnibusPrice?.[app_shop.vars.priceType]?.formatted;
    const isOmnibusHigher =
      currentSize?.price?.omnibusPriceDetails
        ?.omnibusPriceIsHigherThanSellingPrice;
    const omnibusPercent =
      currentSize?.price?.omnibusPriceDetails?.youSavePercent;

    const maxPrice =
      currentSize.price?.price?.[app_shop.vars.priceType]?.formatted;
    const maxPercent = currentSize?.price?.youSavePercent;

    priceMarkup = `
    <div class="product_prices ${omnibusPrice ? `--omnibus` : ""} ${isOmnibusHigher ? `--omnibus-higher` : ""} ${omnibusPrice === maxPrice ? "--omnibus-short" : ""}">
      <span class="price --normal --main">${price}</span>
      ${
        omnibusPrice && typeof omnibusPercent === "number"
          ? `
      <span class="price --omnibus omnibus_price">
        <span class="omnibus_price__text">${idmPhotoModuleLiteralsPM["Najniższa cena z 30 dni przed obniżką:"]}</span>
        <del class="omnibus_price__value">${omnibusPrice}</del>
        <span class="price_percent">${omnibusPercent}%</span>
      </span>`
          : ``
      }
      ${
        maxPrice && typeof maxPercent === "number"
          ? `
      <span class="price --max">
        <span class="omnibus_label">${idmPhotoModuleLiteralsPM["Cena regularna:"]}</span>
        <del>${maxPrice}</del>
        <span class="price_percent">${maxPercent}%</span>
      </span>`
          : ``
      }
    </div>
    `;
  }

  return priceMarkup;
}

function idmInitEventsPM({ prodEl, addToBasket }) {
  if (!prodEl) return;
  if (addToBasket)
    prodEl
      .querySelector("form.add_to_basket")
      ?.addEventListener("submit", idmHandleAddToBasketPM);
}

// POBIERANIE I WSTAWIANIE PRODUKTOW
async function idmPictureModuleProductsPM(containerEL) {
  const allProdEl = containerEL.querySelectorAll(".product_info[data-id]");
  try {
    // TABLICA ID
    const productsId = [];
    allProdEl.forEach((prodEl) => {
      if (prodEl.dataset?.id) productsId.push(prodEl.dataset?.id);
    });

    const isLabels = containerEL.dataset.labels === "true";
    const isOpinions = containerEL.dataset.opinions === "true";
    const isAddToBasket = containerEL.dataset.addToBasket === "true";

    // POBIERANIE PRODUKTOW
    const res = await fetch("/graphql/v1/", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        query: `{${productsId.reduce(
          (acc, val, index) =>
            acc +
            `${idmGetSingleProdGraphQLPM({
              prodId: val,
              labels: isLabels,
              opinions: isOpinions,
              addToBasket: isAddToBasket,
            })}`,
          "",
        )}}`,
      }),
    });

    const data = await res.json();
    const products = Object.values(data?.data)?.map((prod) => prod?.product);

    // WSTAWIANIE PRODUKTOW
    allProdEl.forEach((prodEl) => {
      const prodData = products.find((p) => p?.id === +prodEl.dataset.id);
      if (!prodData || typeof prodData !== "object")
        return prodEl.closest(".idm_picture__product")?.remove();

      prodEl.classList.add("--mod-init");

      // LABELKI
      let labelsHTML = "";

      if (isLabels) {
        if (prodData.price?.omnibusPrice?.[app_shop.vars.priceType]?.value) {
          if (
            prodData.price?.omnibusPriceDetails
              ?.omnibusPriceIsHigherThanSellingPrice
          )
            labelsHTML += `<span class="label --promo --omnibus">${idmPhotoModuleLiteralsPM["promotion"]}</span>`;
          else
            labelsHTML += `<span class="label --bargain --omnibus">${idmPhotoModuleLiteralsPM["Okazja"]}</span>`;
        }

        prodData.zones?.forEach((zone) => {
          if (zone === "promotion") return "";
          labelsHTML += `<span class="label --${zone}">${idmPhotoModuleLiteralsPM[zone]}</span>`;
        });
      }

      // OPINIE
      let opinionsHTML = "";
      if (
        isOpinions &&
        typeof prodData.opinion?.rating === "number" &&
        typeof prodData.opinion?.count === "number"
      ) {
        opinionsHTML = `
          <div class="product_opinions__stars">
            <i class="icon-star ${prodData.opinion.rating > 0.5 ? "--active" : ""}"></i>
            <i class="icon-star ${prodData.opinion.rating > 1.5 ? "--active" : ""}"></i>
            <i class="icon-star ${prodData.opinion.rating > 2.5 ? "--active" : ""}"></i>
            <i class="icon-star ${prodData.opinion.rating > 3.5 ? "--active" : ""}"></i>
            <i class="icon-star ${prodData.opinion.rating > 4.5 ? "--active" : ""}"></i>
          </div>
          <span class="product_opinions__score">${prodData.opinion.rating} / 5.00 </span>
          <span class="product_opinions__count">${prodData.opinion.count}</span>
        `;
      }
      prodEl.innerHTML = `
        <a href="${prodData.link}" class="product_icon --mobile"><img src="${prodData.icon}" alt="${prodData.name}" tabindex="-1"/></a>
        <div class="product_info__container">
          ${isLabels ? `<strong class="label_icons">${labelsHTML}</strong>` : ""}
          ${isOpinions ? `<div class="product_opinions">${opinionsHTML}</div>` : ""}
          <a class="product_name" href="${prodData.link}">${prodData.name}</a>
          ${idmMarkupPricePM({ prodData, addToBasket: isAddToBasket })}
          ${isAddToBasket ? idmMarkupAddToBasketPM(prodData) : ""}
        </div>
      `;

      idmInitEventsPM({
        prodEl,
        addToBasket: isAddToBasket,
      });
    });
  } catch (err) {
    allProdEl?.forEach((prodEl) =>
      prodEl.closest(".idm_picture__product")?.remove(),
    );
    console.error(err);
  }
}

// OTWIERANIE NA MOBILE
document.body.addEventListener("click", (e) => {
  if (app_shop.vars.view === 3 || app_shop.vars.view === 4) return;

  const moduleCotnainer = e.target.closest(".idm_picture__module");
  const prodContainerEl = e.target
    .closest(".idm_picture__product")
    ?.querySelector(".product_info");
  if (!prodContainerEl || !moduleCotnainer) return;

  // ClearShow
  // if(!prodContainerEl) return document.querySelector(".idm_picture__product.--show")?.classList?.remove("--show");
  // if(prodContainerEl.classList.contains("--show")) return prodContainerEl.classList.remove("--show");

  // const moduleContainer = prodContainerEl.closest(".idm_picture__module");
  // if(!moduleContainer) return;

  // moduleContainer.querySelectorAll(".idm_picture__product.--show").forEach(prodConEl=>prodConEl.classList.remove("--show"));
  // prodContainerEl.classList.add("--show");
  const computedStyles = window.getComputedStyle(moduleCotnainer);
  const backgroundColor = computedStyles.getPropertyValue("--photo-mod-col-bg");
  const textColor = computedStyles.getPropertyValue("--photo-mod-col-text");

  new Modal({
    element: prodContainerEl,
    classList: "--mobile --photo-prod-mobile",
    afterShow: (modal) => {
      modal.style.setProperty("--photo-prod-box-bg", backgroundColor || "#fff");
      modal.style.setProperty("--photo-prod-box-text", textColor || "#111");
    },
  });
});