document.addEventListener("DOMContentLoaded", () => {
  const giftThreshold = 300;
  let shouldShowReminder = true;
  let reminderTimeout;
  const isInACart = document.querySelector(".ex-cart");

  if (!isInACart) {
    const giftReminderContainer = document.createElement("div");
    giftReminderContainer.classList.add("gift-reminder", "inactive");
    giftReminderContainer.innerHTML = `
      <p>
        <span class="gift-message"></span>
        <span class="amount-needed"></span>
        <span class="gift-message-end"></span>
      </p>`;
    document.body.append(giftReminderContainer);
  } else if (isInACart) {
  }
  const createPromotion = () => {
    const promoDiscount = document.querySelectorAll(".promotion_discount");
    const checkGiftContainer = document.querySelectorAll(
      ".gift-promotion-container"
    );
    if (checkGiftContainer.length) return;
    const createPromoRow = () => {
      const innerRowDiv = document.createElement("div");
      innerRowDiv.classList.add("row");
      const innerColDiv = document.createElement("div");
      innerColDiv.classList.add("col-xs-12", "gift-promotion-container");
      const innerGiftDiv_s1 = document.createElement("div");
      innerGiftDiv_s1.classList.add("gift-promotion-1");
      innerColDiv.append(innerGiftDiv_s1);
      innerRowDiv.append(innerColDiv);
      return innerRowDiv;
    };
    promoDiscount.forEach((element) => {
      element.append(createPromoRow());
    });
  };

  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 updateGiftReminder = (
    message,
    amount = 0,
    secondMessage = "",
    hideAfter = 5000
  ) => {
    clearTimeout(reminderTimeout);
    giftReminderElement.classList.remove("inactive");
    giftMessageElement.textContent = message;
    moneyToSpendSpan.textContent = amount ? `${$globalCurrency}${amount}` : "";
    giftMessageEndElement.textContent = amount ? secondMessage : "";

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

  const showGiftMessage = (cartTotal) => {
    const remainingAmount = (giftThreshold - cartTotal).toFixed(2);
    if (remainingAmount > 0) {
      updateGiftReminder("Spend another", remainingAmount, "to save $30!");
      shouldShowReminder = true;
    } else if (remainingAmount <= 0 && shouldShowReminder) {
      updateGiftReminder(
        "You can now claim $30 off your order! Use code SAVE30 at checkout.",
        0,
        "",
        7000
      );
      shouldShowReminder = false;
    }
  };
  const showGiftMessageCart = (cartTotal) => {
    createPromotion();
    const innerGiftDiv_1 = document.querySelectorAll(".gift-promotion-1");
    const remainingAmount = (giftThreshold - cartTotal).toFixed(2);
    if (remainingAmount > 0) {
      innerGiftDiv_1.forEach((element) => {
        element.innerHTML = `<p class="bg-warning">Spend another <b class="dark-color">${$globalCurrency}${remainingAmount}</b> to save ${$globalCurrency}30!</p>`;
      });
    } else if (remainingAmount <= 0) {
      innerGiftDiv_1.forEach((element) => {
        element.innerHTML = `<p class="bg-info">Congratulations! You can now claim ${$globalCurrency}30 off your order! Use code <strong>SAVE30</strong>.</p>`;
      });
    }
  };

  document.addEventListener("cart-total-update", function () {
    const cartTotal = parseFloat($mini_cart[0].cart_total);
    if (!isInACart) {
      showGiftMessage(cartTotal);
    } else {
      setTimeout(() => showGiftMessageCart(cartTotal), 50);
    }
  });
  (() => {
    const cartTotal = parseFloat($mini_cart[0].cart_total);
    if (isInACart) {
      setTimeout(() => showGiftMessageCart(cartTotal), 50);
    } else {
      const remainingAmount = (giftThreshold - cartTotal).toFixed(2);
      if (remainingAmount <= 0) {
        shouldShowReminder = false;
      }
    }
  })();
});