// ==================== Main ====================
// ========== User Account - (Mobile Screen) ==========
const mobUserBtn = document.querySelector('.inner > .block .header-btn');
let mobMenWrap;
const mobMenWrapInt = setInterval(() => {
  mobMenWrap = document.querySelector('.mm-ocd__content');
  if (mobMenWrap) {
    clearInterval(mobMenWrapInt);
    if (mobUserBtn) mobMenWrap.append(mobUserBtn);
    let mobMen;
    const mobMenInt = setInterval(() => {
      mobMen = mobMenWrap.querySelector('.mobile-menu');
      if (mobMen) {
        clearInterval(mobMenInt);
        mobMen.prepend(document.querySelector('.top-navbar').cloneNode(true));
        const closeMobMenBtn = mobMenWrap.querySelector('.close-mobile-menu');
        const mobMenuBtns = [...mobMenWrap.querySelectorAll('.header-buttons button')];
        if (mobUserBtn) mobMenuBtns.push(mobUserBtn);
        mobMenuBtns.forEach(b => b.addEventListener("click", () => {
          closeMobMenBtn.click();
          const extrModal = document.querySelectorAll('salla-modal[visible]')[1];
          if (extrModal) extrModal.remove();
        }));
      }
    });
  }
});
// ========== Custom Add-To-Cart Options PopUp Functions ==========
function createConShpMod() {
  return new Promise((resolve) => {
    const conShpMod = document.createElement('salla-modal');
    conShpMod.classList = "add-to-cart-pop-up s-modal s-modal-container hydrated";
    conShpMod.ariaModal = "true";
    conShpMod.role = "dialog";
    conShpMod.width = "xs";
    conShpMod.position = "middle";
    document.querySelector('.app-inner').after(conShpMod);

    let crtShpCnfCont;
    const crtShpCnfCntInt = setInterval(() => {
      crtShpCnfCont = conShpMod.querySelector('.s-modal-body');
      if (crtShpCnfCont) {
        clearInterval(crtShpCnfCntInt);
        crtShpCnfCont.innerHTML = `
          <a href="https://mend.sa/cart">إتمام الشراء</a>
          <button onclick="document.querySelector('.salla-modal.add-to-cart-pop-up').close()">متابعة التسوق</button>
        `;
        resolve(conShpMod); // Resolve the promise with conShpMod
      }
    }, 100);
  });
}
function addCusOptPop(addToCartBtn, conShpMod) {
  addToCartBtn.addEventListener('click', () => {
    const prodAddSucInt = setInterval(() => {
      if (document.querySelector('.swal2-success')) {
        clearInterval(prodAddSucInt);
        conShpMod.open();
      } else if (document.querySelector('.s-product-options-option-error')) clearInterval(prodAddSucInt);
    });
  });
}

// ==================== Home Page ====================
if (document.body.classList.contains('index')) {
  // ========== Main Product ==========
  const specialProduct = document.querySelector('.special-product');
  if (specialProduct) {
    // ===== More Loading =====
    const cusLoadingOverlay = document.createElement('div');
    cusLoadingOverlay.className = 'loading-overlay';
    cusLoadingOverlay.innerHTML = `
      <div class="spinner">
        <img fetchpriority="high" loading="eager" src="https://cdn.salla.sa/form-builder/K97HIXavez7XgyyfnoFEfhYyLMTr0CP6sv8MSi60.png" alt="MEND" width="&quot;200&quot;" height="&quot;100&quot;" style="width:200px; height:100px;">
      </div>
    `;
    document.querySelector('body .loading-overlay:first-child').style.display = 'none';
    document.body.appendChild(cusLoadingOverlay);
    // ===== QuickView =====
    document.body.classList.add('hidden-quickview');
    let quickViewBtn;
    const quickViewBtnInt = setInterval(() => {
      quickViewBtn = specialProduct.querySelector('.quickview-btn button');
      if (quickViewBtn) {
        clearInterval(quickViewBtnInt)
        quickViewBtn.click();
        const quickViewInt = setInterval(() => {
          if (document.documentElement.classList.contains('quickview-opened')) {
            clearInterval(quickViewInt);
            document.documentElement.classList.remove('quickview-opened');
            const quickView = document.getElementById('quickview');
            quickView.classList.remove('transition');
            specialProduct.querySelector('.container').append(quickView);
            // === Product Rating ===
            specialProduct.querySelector('.quickview__header').prepend(specialProduct.querySelector('salla-rating-stars'))
            // === Inventory ===
            specialProduct.querySelector('.product-quickview_title').append(specialProduct.querySelector('.inventory-content'));
            // === Images Linkes To The Product Page ===
            quickView.querySelectorAll('.product-quickview__images a').forEach( e => {
              e.addEventListener('click', () => {
                document.location.href = quickView.querySelector('a:has(>.product-quickview_title)').href;
                document.querySelector('.fslightbox-container').remove();
              });
            });
            // === Quickview Description ===
            specialProduct.querySelector('.quickview-description').textContent = "ميند مصل الشعر الحل المثالي لتعزيز كثافة الشعر. بتركيبة مبتكرة تجمع بين أحدث التقنيات العلمية والمكونات الطبيعية الفعالة، يعمل مصل ميند على تحفيز نمو الشعر وزيادة طوله وكثافته، لشعر كثيف، قوي، يعكس قوة حضورك وثقتك.";
            // === Custom Add-To-Cart Options PopUp ===
            createConShpMod().then(conShpMod => {
              addCusOptPop(quickView.querySelector('salla-add-product-button salla-button'), conShpMod);
            });
            // === More Details Button ===
            const specialProductInfo = specialProduct.querySelector('.content_product_detail');
            const productDetails = document.createElement('a');
            productDetails.className = 'cus-product-details-btn btn bg-primary text-primary-reverse h-12 !px-6';
            productDetails.href = specialProductInfo.querySelector('a:has(h2)').href;
            productDetails.textContent = 'المزيد عن المنتج';
            specialProductInfo.append(productDetails);
            document.body.classList.remove('hidden-quickview');
            cusLoadingOverlay.style.display = 'none';
          }
        }, 100);
      }
    }, 100);
  }
}

// ==================== Product Page ====================
if (document.body.classList.contains('product-single')) {
  const desc = document.querySelector('.product-single-top-description');

  // === Inventory ===
  document.querySelector('h1').append(document.querySelector('.inventory-content'));

  // ========== Product Rating ==========
  document.querySelector('.product-single__info > div:first-child').prepend(document.querySelector('salla-rating-stars'));
  let revSum;
  const revSumInt = setInterval(() => {
    revSum = document.querySelector('.s-reviews-summary-count');
    if (revSum) {
      clearInterval(revSumInt);
      document.querySelector('.s-rating-stars-reviews').textContent = revSum.textContent;
    }
  });
  
  // ========== Add To Card Mobile Bar ==========
  document.body.classList.remove('is-sticky-product-bar');
  window.addEventListener('scroll', function() {
    if(desc.offsetTop - window.scrollY <= 0) {
      if (!document.body.classList.contains('is-sticky-product-bar')) document.body.classList.add('is-sticky-product-bar');
    } else if (document.body.classList.contains('is-sticky-product-bar')) document.body.classList.remove('is-sticky-product-bar');
  });
  // ========== Custom Add-To-Cart Options PopUp ==========
  let addToCrtBtns;
  const addToCrtBtnsInt = setInterval(() => {
    addToCrtBtns = document.querySelectorAll('salla-add-product-button salla-button');
    if (addToCrtBtns.length) {
      clearInterval(addToCrtBtnsInt);
      createConShpMod().then(conShpMod => {
        addToCrtBtns.forEach(e => addCusOptPop(e, conShpMod));
      });
    }
  });

  // ========== Product Description Rearange ==========
  let securePayments;
  const securePaymentsInt = setInterval(() => {
    securePayments = document.querySelector('.product-single__inner .s-payments-list-wrap');
    if (securePayments) {
      clearInterval(securePaymentsInt);
      securePayments.after(desc);
    }
  });
}