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

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

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

  let accordionContainer = null;
  let panelContainer = null;

  elements.forEach((el) => {
    if (
      el.innerHTML.includes("تفاصيل المنتج") ||
      el.innerHTML.includes("المميزات") ||
      el.innerHTML.includes("مكونات الصنع و طريقة الاستخدام") ||
      el.innerHTML.includes("Product Details") ||
      el.innerHTML.includes("Features") ||
      el.innerHTML.includes("Ingredients and method of use")
    ) {
      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 shareSection = () => {
  const lang = document.documentElement.lang || "ar";
  const actionsDiv = document.createElement("ul");
  const socialShare = document.querySelector(
    ".product-single salla-social-share"
  );

  const goToSection = () => {
    const sectionLink = document.querySelector(
      ".breadcrumbs li:nth-last-of-type(3)"
    );
    if (sectionLink) {
      console.log("Navigating to:", sectionLink.href);
      sectionLink.click();
    }
  };
  //   need help
  const needHelp = document.createElement("div");
  needHelp.innerHTML = `
      <a href="https://jeedjewelry.com/%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D9%85%D8%B9%D9%86%D8%A7/page-16220886" target="_blank" class="flex items-center gap-2">
        <img width="16px" src="https://cdn.salla.sa/form-builder/C7mzLFOhPUptoJx7lXc4eRqJvIA1rRF9SHEmYvnA.png" alt="icon">
        <span> ${
          lang == "ar" ? "هل يمكننا المساعدة ؟" : "Can we help? "
        } </span>
      </a>
    `;

  //   back to section
  const backToSection = document.createElement("div");
  backToSection.innerHTML = `
      <button type="button" onclick="${goToSection}" class="flex items-center gap-2">
        <span> ${lang == "ar" ? "القسم" : "Category"} </span>
        <img width="16px" src="https://cdn.salla.sa/form-builder/Amj1HwdRfjnFUkJQwWEuTHz2dWLCjiLMe6VJnbqw.png" alt="icon">
      </button>
    `;
  actionsDiv.appendChild(needHelp);
  actionsDiv.appendChild(socialShare);
  actionsDiv.appendChild(backToSection);
  actionsDiv.classList.add(
    "flex",
    "items-center",
    "justify-between",
    "gap-4",
    "my-2"
  );
  const main = document.querySelector(".product-single  .product-form");
  main.after(actionsDiv);
};

const checkSiteLanguage = () => {
  const lang = document.documentElement.lang || "ar";
  if (window.location.pathname.startsWith("/en")) {
    window.location.pathname = window.location.pathname.replace("/en", "/ar");
  } else if (lang == "en") {
    window.location.href = "/ar";
  }
};
document.addEventListener("DOMContentLoaded", () => {
  checkSiteLanguage();
  const productDesc = document.querySelector(".product-single article");
  if (productDesc) {
    const main = document.querySelector(".product-single  .product-form");
    main.after(productDesc);
    changeProductContentToAccordion();
    shareSection();
  }
});
const sortNewslette = () => {
  const footerInner = document.querySelector(
    ".store-footer__inner > div.grid > div:has(a img)"
  );
  const newsletter = document.querySelector(
    ".store-footer .store-footer__newsletter"
  );

  if (footerInner && newsletter) {
    footerInner.after(newsletter);
  }
};

const addLangBtnToMenu = () => {
  const menuList = document.querySelector(".mobile-menu.mm-spn ul");
  const langDiv = document.querySelector('[onclick*="calization::open"]');

  if (menuList && langDiv) {
    let div = document.createElement("div");
    const langDiv2 = langDiv.cloneNode(true);
    langDiv2.classList.add("w-full");
    div.appendChild(langDiv2);
    menuList.appendChild(div);
  }
};

document.addEventListener("DOMContentLoaded", () => {
  sortNewslette();
  setTimeout(() => {
    addLangBtnToMenu();
  }, 2000);
});

// new side bar links help
const sideBarLinks = () => {
  const lang = document.documentElement.lang || "ar";
  const sideLinks = document.createElement("div");
  sideLinks.classList.add("side-links");
  const cart = document.createElement("p");
  cart.innerHTML = `
      <a href="https://jeedjewelry.com/%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D9%85%D8%B9%D9%86%D8%A7/page-16220886" target="_blank" class="flex items-center gap-2">
        <img width="22px" src="https://cdn.salla.sa/form-builder/h7a1kiKFQeQVm1mFNO4RL4E21kZu7rujMM2dJHDa.png" alt="icon">
        <span> ${lang == "ar" ? "سلة التسوق" : "Cart "} </span>
      </a>
      <style>
      .side-links p a {
        display: flex !important;
        gap: 5px !important;
      }
      .side-links p span {
        padding: 4px 12px !important;
        font-size: 1.1rem !important;
        font-weight: 500 !important;
        color: #367d7a !important;
      }
      </style>
    `;
  const needHelp = document.createElement("p");
  needHelp.innerHTML = `
      <a href="https://jeedjewelry.com/%D8%AA%D9%88%D8%A7%D8%B5%D9%84-%D9%85%D8%B9%D9%86%D8%A7/page-16220886" target="_blank" class="flex items-center gap-2">
        <img width="22px" src="https://cdn.salla.sa/form-builder/FuiqPeHthfF6w8qMvWgRNNAkSaTniwQOwnUtjjT9.png" alt="icon">
        <span> ${lang == "ar" ? "المساعدة" : "Help "} </span>
      </a>
    `;

  sideLinks.appendChild(cart);
  sideLinks.appendChild(needHelp);

  const sideMenu = document.querySelector(".mobile-menu.mm-spn ul");
  if (sideMenu) {
    sideMenu.appendChild(sideLinks);
  }
};

document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    sideBarLinks();
  }, 1200);
});