const changeProductContentToAccordion = () => {
  var lang = document.querySelector("html").lang || "ar";
  const contentEntry = document.querySelector(".product-single article");

  //   عنوان وصف المنتج
  let desTitle = document.createElement("p");
  desTitle.innerText = lang === "ar" ? "تفاصيل المنتج" : "Product Details";

  contentEntry.prepend(desTitle);
  //   عنوان  والاسترجاع
  let refundPolicy = document.createElement("h3");
  refundPolicy.textContent =
    lang === "ar" ? "الاستبدال والاسترجاع" : "Refund Policy";
  let refundText = document.createElement("p");
  refundText.innerHTML =
    lang === "ar"
      ? `
    نعتذر، لا نقبل الاسترجاع أو الاستبدال، حيث لدينا سياسة "عدم الاسترجاع"، إلا
    في حال وجود خلل أو عيب في القطعة المستلمة.
    <br />

    إذا كان هناك خطأ ناتج عنّا في التصنيع، يسعدنا جدولة خدمة تصحيح مجانية.
    <br />
    <b>
      يرجى الملاحظة أن هذه السياسة لا تشمل تغيير رأيك بعد الاستلام بخصوص اللون
      أو إعطاء مقاسات غير دقيقة من طرفك.
    </b>
    <br />

    <a href="https://einabayaa.com/${
      lang == "en" ? "en" : ""
    }/p/ADZqy" class="click"> لتفاصيل أكثر</a>
  `
      : `
    Please note that we follow a non-refundable policy, meaning we do not accept
    returns or exchanges unless the item you received is defective.
    <br />
    If the item is proven to be defective due to our mistake, we will gladly
    offer a corrective service free of charge.
    <br />
    Kindly note this does not include cases where you change your mind about the
    color or provide incorrect measurements after the abaya has already been
    delivered.
    <br />
    <a href="https://einabayaa.com/${
      lang == "en" ? "en" : ""
    }/p/ADZqy" class="click"> For More Details</a>
`;
  contentEntry.append(refundPolicy);
  contentEntry.append(refundText);

  //   عنوان  الشحن
  let shipping = document.createElement("h3");
  shipping.textContent =
    lang === "ar" ? "الشحن والتوصيل" : "Shipping & Delivery";
  let shippingText = document.createElement("p");
  shippingText.innerHTML =
    lang === "ar"
      ? `
    <b> تكاليف الشحن: </b>
    <br />
    تعتمد تكاليف الشحن الدولي على وزن الطلب وطريقة التوصيل.
    <br />
    قد يتم تطبيق رسوم إضافية على الشحن إلى المناطق النائية أو عند الطلبات
    الكبيرة أو الثقيلة.
    <b> مدة تنفيذ الطلب : </b>
    <br />
    تستغرق مدة تنفيذ الطلب من 10 إلى 15 أيام عمل، ولا تشمل هذه المدة إجازة نهاية
    الأسبوع.
    <br />
    <b>
      قد تتأخر بعض الطلبات في حال وجود ضغط مرتفع على الطلبات، ونعتذر مسبقًا عن
      ذلك.</b
    >
    <br />

    <a href="https://einabayaa.com/${
      lang == "en" ? "en" : ""
    }/p/ADZqy" class="click"> لتفاصيل أكثر</a>
  `
      : `
    <b> Shipping Costs: </b>
    <br />
    International shipping costs are based on the weight of your order and the
    selected delivery method.
    <br />
    Additional charges may apply for remote areas or for large/heavy items.<br />
    <b>Processing Time:</b>
    <br />
    Order processing takes 10 to 15 business days and does not include weekends.
    <br />
    Some orders may be delayed during periods of high demand; we apologize in
    advance for any delays.
    <br />
    <a href="https://einabayaa.com/${
      lang == "en" ? "en" : ""
    }/p/ADZqy" class="click"> For More Details</a>
  `;
  contentEntry.append(shipping);
  contentEntry.append(shippingText);

  const elements = Array.from(contentEntry.children);

  let accordionContainer = null;
  let panelContainer = null;

  elements.forEach((el) => {
    if (
      el.innerHTML.includes("تفاصيل المنتج") ||
      el.innerHTML.includes("Product Details") ||
      (el.textContent.includes("الشحن") && el.tagName === "H3") ||
      (el.textContent.includes("Shipping") && el.tagName === "H3") ||
      (el.textContent.includes("الاستبدال") && el.tagName === "H3") ||
      (el.textContent.includes("Refund") && el.tagName === "H3")
    ) {
      accordionContainer = document.createElement("button");
      accordionContainer.classList.add("accordion");
      accordionContainer.textContent = el.textContent;

      el.parentNode.insertBefore(accordionContainer, el);

      panelContainer = document.createElement("p");
      panelContainer.classList.add("panel");

      el.parentNode.insertBefore(panelContainer, el.nextSibling);

      el.remove();
    } else if (panelContainer) {
      panelContainer.appendChild(el);
    }
  });

  const accordions = document.querySelectorAll("article .accordion");
  accordions.forEach((acc) => {
    acc.addEventListener("click", function () {
      this.classList.toggle("active");
      const panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  });
  const productDesc = document.querySelector(".product-single article");
  const main = document.querySelector(".product-single  .product-form");
  if (main && productDesc) {
    main.after(productDesc);
  }
};

document.addEventListener("DOMContentLoaded", () => {
  const productPage = document.querySelector(".product-single");
  if (productPage) {
    changeProductContentToAccordion();
  }
});
const sortSocialList = () => {
  const contactsList = document.querySelector(
    ".store-footer div.enhanced_rounded_contacts"
  );
  const socialList = document.querySelector(
    ".store-footer ul.rounded_contacts"
  );

  if (contactsList && socialList) {
    contactsList.appendChild(socialList);
  }
};

const addLinksToBeforeAfterImgs = (divClass, link) => {
  const div = document.querySelector(divClass);
  if (div) {
    const a = document.createElement("a");
    a.href = link;
    a.target = "_blank";

    const fragment = document.createDocumentFragment();
    while (div.firstChild) {
      fragment.appendChild(div.firstChild);
    }
    a.appendChild(fragment);
    div.appendChild(a);
  }
};

document.addEventListener("DOMContentLoaded", () => {
  sortSocialList();
  var lang = document.querySelector("html").lang || "ar";

  addLinksToBeforeAfterImgs(
    ".s-block.s-block--compare figure.before",
    `https://einabayaa.com/${lang == "en" ? "en" : ""}/category/wdzdAW`
  );

  addLinksToBeforeAfterImgs(
    ".s-block.s-block--compare figure.after",
    `https://einabayaa.com/${lang == "en" ? "en" : ""}/category/rjazvl`
  );
});

const addMeasurementImg = () => {
  var lang = document.querySelector("html").lang || "ar";
  const productOptions = document.querySelector(
    ".product-form:has(.s-product-options-wrapper)"
  );
  if (productOptions) {
    // Create and add the button to the page
    const button = document.createElement("button");
    button.id = "imageMeasurementBtn";
    button.textContent =
      lang === "ar" ? "عرض شريط المقاسات" : "Measurement tape display";

    const div = document.createElement("div");
    div.appendChild(button);
    productOptions.before(div);

    // Create popup overlay
    const popupOverlay = document.createElement("div");
    popupOverlay.className = "measurement-overlay";
    popupOverlay.id = "imageMeasurement";

    // Create measurement content
    const popupContent = document.createElement("div");
    popupContent.className = "measurement-content";

    // Create close button
    const closeBtn = document.createElement("button");
    closeBtn.className = "close-btn";
    closeBtn.innerHTML = "&times;";
    closeBtn.setAttribute("aria-label", "Close");

    // Create image
    const image = document.createElement("img");
    image.classList.add("dresses-image");
    image.src =
      "https://cdn.files.salla.network/homepage/111037715/aa62b65d-e405-4dcf-9c86-f9a182f17a11.webp";
    image.alt = "عرض شريط المقاسات";
    // Create image2
    const image2 = document.createElement("img");
    image2.classList.add("abaya-image");
    image2.src =
      "https://cdn.files.salla.network/homepage/111037715/847a561a-e4dc-4566-ac58-5f8feced64e7.webp";
    image2.alt = "عرض شريط المقاسات";

    // Build measurement structure
    popupContent.appendChild(closeBtn);
    popupContent.appendChild(image);
    popupContent.appendChild(image2);
    popupOverlay.appendChild(popupContent);
    document.body.appendChild(popupOverlay);

    // Event listeners
    button.addEventListener("click", function () {
      popupOverlay.style.display = "flex";
    });

    closeBtn.addEventListener("click", function () {
      popupOverlay.style.display = "none";
    });

    // Close popup when clicking outside the image
    popupOverlay.addEventListener("click", function (e) {
      if (e.target === popupOverlay) {
        popupOverlay.style.display = "none";
      }
    });

    // Close popup with Escape key
    document.addEventListener("keydown", function (e) {
      if (e.key === "Escape" && popupOverlay.style.display === "flex") {
        popupOverlay.style.display = "none";
      }
    });
  }
};

document.addEventListener("DOMContentLoaded", () => {
  addMeasurementImg();
});