document.addEventListener("DOMContentLoaded", () => {
  (() => {
    if (
      document.querySelector(".ex-a-1548087") ||
      document.querySelector(".ex-a-2350490")
    )
      return;

    const initialThreshold = [
      {
        tier: 99,
        gift: "free box of Family Circle Biscuits",
        showGreet: true,
        voucher: "MCVITIES",
        image:
          "https://cdn3.evostore.io/productimages/vow_api/m/un04092_01.jpg",
      },
      {
        tier: 249,
        gift: "free box of Cadbury Roses",
        showGreet: true,
        voucher: "CADBURY",
        image:
          "https://cdn3.evostore.io/productimages/vow_api/m/ks95985_01.jpg",
      },
    ];
    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 = `
      <img class="gift-image" src="" />
      <p>
        <span class="gift-message"></span>
        <span class="amount-needed"></span>
        <span class="gift-message-end"></span>
      </p>`;
      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
    ) => {
      console.log(message_1, amount, message_2, hideAfter);
      clearTimeout(reminderTimeout);
      giftReminderElement.classList.remove("inactive");
      giftMessageElement.textContent = message_1;
      moneyToSpendSpan.textContent = amount
        ? `${$globalCurrency}${amount}`
        : "";
      giftMessageEndElement.textContent = amount
        ? `to claim your ${message_2}`
        : "";
      giftImageElement.src = image ? image : "";

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

    const showGiftMessage = () => {
      // Update Version On Every Call
      popupVersion++;
      const currentVersion = popupVersion;

      // Get Cart Subtotal
      const cartSubTotal = $mini_cart[0].cart_total;

      // Find index of Tier Depending on isFragile value
      const indexOfTier = findTier(cartSubTotal);

      console.log("Index of element: ", indexOfTier);
      console.log("Using threshold: ", initialThreshold);
      console.log("Threshold length: ", initialThreshold.length);
      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);
          console.log("Cart remaining to spend: ", amountRemaining);
          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">Congratulations! Use code <strong>${
                initialThreshold[indexOfTier - 1].voucher
              }</strong> to claim your ${
                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">Spend another <strong class="dark-color">${$globalCurrency}${amountRemaining}ex VAT</strong> and get a ${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">Spend another <strong class="dark-color">${$globalCurrency}${amountRemaining}ex VAT</strong> and get a ${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">Congratulations! Use code <strong>${
              initialThreshold[indexOfTier - 1].voucher
            }</strong> to claim your ${
              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);
          console.log("Remains to spend: ", amountRemaining);

          if (indexOfTier && initialThreshold[indexOfTier - 1].showGreet) {
            for (let i = 0; i < indexOfTier; i++) {
              initialThreshold[i].showGreet = false;
            }
            updatePopupMessage(
              `Congratulations! Use code  ${
                initialThreshold[indexOfTier - 1].voucher
              } to claim your ${initialThreshold[indexOfTier - 1].gift}`,
              "",
              initialThreshold[indexOfTier - 1].image,
              0,
              7000
            );
            clearTimeout(additionalTimeout);
            additionalTimeout = setTimeout(() => {
              if (currentVersion !== popupVersion) return;
              updatePopupMessage(
                `Spend another`,
                `${initialThreshold[indexOfTier].gift}`,
                `${initialThreshold[indexOfTier].image}`,
                `${amountRemaining}ex VAT`,
                5000
              );
            }, 7500);
          } else {
            clearTimeout(additionalTimeout);
            updatePopupMessage(
              `Spend another`,
              `${initialThreshold[indexOfTier].gift}`,
              `${initialThreshold[indexOfTier].image}`,
              `${amountRemaining}ex VAT`,
              5000
            );
          }
          for (let i = indexOfTier; i < initialThreshold.length; i++) {
            initialThreshold[i].showGreet = true;
          }
        } else {
          console.log("All tiers reached");
          if (initialThreshold[indexOfTier - 1].showGreet) {
            initialThreshold.forEach((e) => {
              e.showGreet = false;
            });
            updatePopupMessage(
              `Congratulations! Use code  ${
                initialThreshold[indexOfTier - 1].voucher
              } to claim your ${initialThreshold[indexOfTier - 1].gift}`,
              "",
              `${initialThreshold[indexOfTier - 1].image}`
            );
          }
        }
      }
      console.log("Now actual thershold looks like: ", initialThreshold);
    };

    document.addEventListener("cart-total-update", function () {
      clearTimeout(cartUpdateTimeout);
      cartUpdateTimeout = setTimeout(() => showGiftMessage(), 50);
    });
    if (isInCart) setTimeout(showGiftMessage(), 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("new-sticky")
        );
        tt.classList.toggle(
          "has-scrollup",
          header.classList.contains("scrollup")
        );
      });
      observer.observe(header, {
        attributes: true,
        attributeFilter: ["class"],
      });
    })();
  })();
});