document.addEventListener("DOMContentLoaded", () => {
  if (!document.querySelector(".ex-u-2380250")) return;

  const validIds = new Set([
    1167619, 1167890, 1167701, 1167700, 1167702, 1167772, 1168151, 1168180, 1167850, 1167620, 1167769, 1167729, 1167675, 1167774, 1168150,
    1168149, 1168177, 1167618, 1167676, 1167883, 1167871, 1167617, 1167770, 1167771, 1167776, 1167775, 1168148, 1167643, 1168176, 1167642,
    1167621, 1168147, 1167777, 1168146, 1168145, 1167778, 1297099, 1297100, 1167616, 1167869, 1167867, 1167868, 1167870, 1167773, 1167615,
    1168144, 1167708, 1168143, 1167709, 1168142, 1167605, 1168141, 1167688, 1167707, 1167812, 1167659, 1167811, 1168173, 1167656, 1168140,
    1167613, 1167644, 1167785, 1167786, 1167866, 1167604, 1167895, 1168139, 1167809, 1167706, 1167660, 1168138, 1167566, 1167790, 1167891,
    1167789, 1167795, 1167905, 1167797, 1167861, 1167792, 1167796, 1167793, 1167683, 1167898, 1167887, 1167873, 1167791, 1167894, 1167607,
    1168137, 1168136, 1167601, 1167801, 1168135, 1167804, 1167612, 1167669, 1168134, 1167703, 1167794, 1167677, 1167562, 1198478, 1167665,
    1198477, 1167663, 1167657, 1167611, 1168132, 1168133, 1167610, 1168131, 1168130, 1168127, 1168128, 1168129, 1167606, 1167865, 1167872,
    1167661, 1167732, 1167602, 1168126, 1167886, 1228117, 1167603, 1167758, 1167653, 1168125, 1167614, 1167798, 1167788, 1168124, 1168123,
    1167781, 1168122, 1168121, 1167782, 1167780, 1167787, 1167783, 1168120, 1168119, 1167641, 1167609, 1168118, 1168117, 1168115, 1167902,
    1168114, 1168113, 1168112, 1168116, 1167904, 1167764, 1167608, 1168111, 1168110, 1168109, 1167633, 1167810,
  ]);

  let cartSubWithValidIds = 0;

  const initialThreshold = [
    {
      tier: 199,
      gift: "Wrigley LifeSavers 5 Flavors Hard Candies",
      showGreet: true,
      voucher: "FREE200",
      image: "https://content.etilize.com/500/1026668155.jpg",
    },
    {
      tier: 349,
      gift: "Keebler Club & Cheddar Sandwich Crackers",
      showGreet: true,
      voucher: "FREE350",
      image: "https://content.etilize.com/500/1010042088.jpg",
    },
  ];
  const popupMessages = {
    congrat_1: "Congratulations! Use code <strong>",
    congrat_2: "</strong> to claim",
    spend_more_1: "Spend another",
    spend_more_vat: "",
    spend_more_2: "to claim",
    title: "",
  };

  let reminderTimeout;
  let additionalTimeout;
  let cartUpdateTimeout;
  let popupVersion = 0;
  const isInCart = document.querySelector(".ex-cart");

  if (!isInCart) {
    const giftReminderContainer = document.createElement("div");
    giftReminderContainer.classList.add("gift-reminder", "inactive");
    giftReminderContainer.innerHTML = `
      ${popupMessages.title ? popupMessages.title : ""}
      <div class="gift-reminder__message">
        <img class="gift-image" src="" />
        <p>
          <span class="gift-message"></span>
          <span class="amount-needed"></span>
          <span class="gift-message-end"></span>
        </p>
      </div>`;

    document.body.append(giftReminderContainer);
  }

  const findTier = (cartSubTotal) => {
    const found = initialThreshold.find((t) => cartSubTotal < t.tier);
    if (found) {
      return initialThreshold.indexOf(found);
    } else {
      return initialThreshold.length;
    }
  };
  const giftImageElement = document.querySelector(".gift-image");
  const giftReminderElement = document.querySelector(".gift-reminder");
  const moneyToSpendSpan = document.querySelector(".amount-needed");
  const giftMessageElement = document.querySelector(".gift-message");
  const giftMessageEndElement = document.querySelector(".gift-message-end");

  const updatePopupMessage = (message_1, message_2 = "", image = "", amount = 0, hideAfter = 5000) => {
    clearTimeout(reminderTimeout);
    giftReminderElement.classList.remove("inactive");
    giftMessageElement.innerHTML = message_1;
    moneyToSpendSpan.innerHTML = amount ? `${$globalCurrency}${amount}` : "";
    giftMessageEndElement.innerHTML = amount ? `${popupMessages.spend_more_2} ${message_2}` : "";
    giftImageElement.src = image ? image : "";

    reminderTimeout = setTimeout(() => {
      giftReminderElement.classList.add("inactive");
    }, hideAfter);
  };

  const getCartSubTotal = () => {
    let cartSubTotal = 0;
    $mini_cart.forEach((item) => {
      const elementCatId = item.item_category_id;
      const isValid = validIds.has(elementCatId);
      if (isValid) {
        cartSubTotal += parseFloat(item.item_line_total);
      }
    });
    return cartSubTotal;
  };
  const getCartSubTotalFirstCart = () => {
    let cartSubTotal = 0;
    const allCartItems = document.querySelectorAll(".desktop .items-list tr.item");
    allCartItems.forEach((item) => {
      const categoryClass = Array.from(item.classList).find((cls) => cls.startsWith("category_"));
      const elementCatId = parseInt(categoryClass.replace("category_", ""));
      const totalElement = parseFloat(item.querySelector(".item_line_total").textContent.replace(/[^0-9.-]+/g, ""));
      const isValid = validIds.has(elementCatId);
      if (isValid) {
        cartSubTotal += totalElement;
      }
    });
    return cartSubTotal;
  };

  const showGiftMessage = (isFirstCartEnter = false) => {
    // Get Cart Subtotal
    const cartSubTotal = isFirstCartEnter ? getCartSubTotalFirstCart() : getCartSubTotal();
    if (isNaN(cartSubTotal) || cartSubTotal === cartSubWithValidIds) return;
    cartSubWithValidIds = cartSubTotal;
    // Update Version On Every Call
    popupVersion++;
    const currentVersion = popupVersion;

    // Find index of Tier
    const indexOfTier = findTier(cartSubTotal);

    if (isInCart) {
      //Cart Logic
      const promoDiscount = document.querySelectorAll(".promotion_discount");
      let giftPromotionContainer;
      giftPromotionContainer = document.querySelectorAll(".gift-promotion-container");
      if (!giftPromotionContainer.length) {
        promoDiscount.forEach((e) => {
          const innerRowDiv = document.createElement("div");
          innerRowDiv.classList.add("row");
          const innerColDiv = document.createElement("div");
          innerColDiv.classList.add("col-xs-12", "gift-promotion-container");
          innerRowDiv.append(innerColDiv);
          e.append(innerRowDiv);
        });
        giftPromotionContainer = document.querySelectorAll(".gift-promotion-container");
      } else {
        giftPromotionContainer.forEach((e) => {
          e.replaceChildren();
        });
      }

      if (indexOfTier < initialThreshold.length) {
        const amountRemaining = (initialThreshold[indexOfTier].tier - cartSubTotal).toFixed(2);
        if (indexOfTier) {
          //dual
          giftPromotionContainer.forEach((e) => {
            const innerGiftDiv_1 = document.createElement("div");
            innerGiftDiv_1.classList.add("gift-promotion-1");
            innerGiftDiv_1.innerHTML = `<p class="bg-info">${popupMessages.congrat_1}${initialThreshold[indexOfTier - 1].voucher}${
              popupMessages.congrat_2
            } ${initialThreshold[indexOfTier - 1].gift} </p>`;
            const innerGiftDiv_2 = document.createElement("div");
            innerGiftDiv_2.classList.add("gift-promotion-2");
            innerGiftDiv_2.innerHTML = `<p class="bg-warning">${popupMessages.spend_more_1}${$globalCurrency}${amountRemaining}${popupMessages.spend_more_vat}${popupMessages.spend_more_2} ${initialThreshold[indexOfTier].gift}</p>`;
            e.append(innerGiftDiv_1, innerGiftDiv_2);
          });
        } else {
          //single
          giftPromotionContainer.forEach((e) => {
            const innerGiftDiv_1 = document.createElement("div");
            innerGiftDiv_1.classList.add("gift-promotion-1");
            innerGiftDiv_1.innerHTML = `<p class="bg-warning">${popupMessages.spend_more_1} <strong>${$globalCurrency}${amountRemaining}${popupMessages.spend_more_vat}</strong> ${popupMessages.spend_more_2} ${initialThreshold[indexOfTier].gift}</p>`;
            e.append(innerGiftDiv_1);
          });
        }
      } else {
        giftPromotionContainer.forEach((e) => {
          const innerGiftDiv_s1 = document.createElement("div");
          innerGiftDiv_s1.classList.add("gift-promotion-1");
          innerGiftDiv_s1.innerHTML = `<p class="bg-info">${popupMessages.congrat_1}${initialThreshold[indexOfTier - 1].voucher}${
            popupMessages.congrat_2
          } ${initialThreshold[indexOfTier - 1].gift} </p>`;
          e.append(innerGiftDiv_s1);
        });
      }
    } else {
      // If Cart Subtotal don't Excede Max Tier Value
      if (indexOfTier < initialThreshold.length) {
        const amountRemaining = (initialThreshold[indexOfTier].tier - cartSubTotal).toFixed(2);

        if (indexOfTier && initialThreshold[indexOfTier - 1].showGreet) {
          for (let i = 0; i < indexOfTier; i++) {
            initialThreshold[i].showGreet = false;
          }
          updatePopupMessage(
            `${popupMessages.congrat_1}${initialThreshold[indexOfTier - 1].voucher}${popupMessages.congrat_2} ${
              initialThreshold[indexOfTier - 1].gift
            }`,
            "",
            initialThreshold[indexOfTier - 1].image,
            0,
            7000,
          );
          clearTimeout(additionalTimeout);
          additionalTimeout = setTimeout(() => {
            if (currentVersion !== popupVersion) return;
            updatePopupMessage(
              `${popupMessages.spend_more_1}`,
              `${initialThreshold[indexOfTier].gift}`,
              `${initialThreshold[indexOfTier].image}`,
              `${amountRemaining}${popupMessages.spend_more_vat}`,
              5000,
            );
          }, 7500);
        } else {
          clearTimeout(additionalTimeout);
          updatePopupMessage(
            `${popupMessages.spend_more_1}`,
            `${initialThreshold[indexOfTier].gift}`,
            `${initialThreshold[indexOfTier].image}`,
            `${amountRemaining}${popupMessages.spend_more_vat}`,
            5000,
          );
        }
        for (let i = indexOfTier; i < initialThreshold.length; i++) {
          initialThreshold[i].showGreet = true;
        }
      } else {
        if (initialThreshold[indexOfTier - 1].showGreet) {
          initialThreshold.forEach((e) => {
            e.showGreet = false;
          });
          updatePopupMessage(
            `${popupMessages.congrat_1}${initialThreshold[indexOfTier - 1].voucher}${popupMessages.congrat_2} ${
              initialThreshold[indexOfTier - 1].gift
            }`,
            "",
            `${initialThreshold[indexOfTier - 1].image}`,
          );
        }
      }
    }
  };

  document.addEventListener("cart-total-update", function (e) {
    clearTimeout(cartUpdateTimeout);
    cartUpdateTimeout = setTimeout(() => showGiftMessage(), 50);
  });
  if (isInCart)
    setTimeout(() => {
      showGiftMessage(true);
    }, 200);

  (() => {
    if (isInCart) return;
    const header = document.querySelector(".header-full");
    const observer = new MutationObserver(() => {
      const tt = document.querySelector(".gift-reminder");
      tt.classList.toggle("has-sticky", header.classList.contains("menubarHeader"));
    });
    observer.observe(header, {
      attributes: true,
      attributeFilter: ["class"],
    });
  })();
});