/*  نصوص البنرات المتحركة  */
const addSlidersTexts = () => {
  const lang = document.documentElement.lang || "ar";
  const sliders = document.querySelectorAll(".s-block--photos-slider a");
  if (sliders) {
    sliders.forEach((slider) => {
      const content = document.createElement("div");
      content.classList.add("slider-texts");
      content.innerHTML = `
        <h2> 
        ${
          lang == "ar"
            ? "بوابتك إلى لحظات خالدة "
            : "Your gateway to timeless moments"
        }
        </h2>
        <p>
        ${
          lang == "ar"
            ? "اكتشف عطور تعكس ذوقك، وترافقك في كل حضور."
            : "Discover perfumes that reflect your taste and accompany you in every occasion."
        }
          </p>
        <img width="1px" src="https://cdn.salla.sa/form-builder/wr9r3nXRFIR8JNq9eFaiVCGgVi1LtZhgxWsDspwS.png">
        <a href="https://ateedofficial.com/latest-products"> 
        
        ${lang == "ar" ? "إكتشف عطورنا" : "Discover our perfumes"}
        </a>
    `;
      slider.appendChild(content);
    });
  }
};
/* إكتشف منتجاتنا  */
const addProductsLink = () => {
  const lang = document.documentElement.lang || "ar";
  const link = document.createElement("div");
  link.classList.add("products-link");
  link.setAttribute("style", `display: none;`);
  link.innerHTML = `
      <a href="https://ateedofficial.com/latest-products"> ${
        lang == "ar" ? "إكتشف منتجاتنا " : "Discover our products"
      } </a>
    `;
  const banners = document.querySelector(".s-block--banners");
  if (banners) {
    banners.appendChild(link);
  }
};
/*  أيقونة السايد بار */
const addSideBarIcons = () => {
  const lang = document.documentElement.lang || "ar";
  const content = document.createElement("div");
  content.classList.add("sidebar-icons", "flex");
  content.innerHTML = `
    <span>
      <a href="https://ateedofficial.com/${lang}/cart">
        <img
          width="24px"
          src="https://cdn.salla.sa/form-builder/VYUE9GpIPIy4T6JIXmwqGxvQMJBOFHhl6HaKxv5T.png"
        />
      </a> 
    </span>
      <span>
      <a href="https://ateedofficial.com">
        <img
          width="24px"
          src="https://cdn.salla.sa/form-builder/DQzEDJsEhkFVtIrYosBBgGMv9rceQ29xZ8Ins2XO.png"
        />
      </a>
    </span>
    <span>
      <button
        type="button"
        onclick="salla.event.dispatch('localization::open')"
      >
        <img
          width="24px"
          src="https://cdn.salla.sa/form-builder/s8Wq3Fet6k2N2h9Awim1EnMa4u8gRJLtK3SKPTqE.png"
        />
      </button>
    </span>
  `;

  const menu = document.querySelector(".mm-ocd ul.main-menu li");
  if (menu) {
    menu.before(content);
  }
};

/*  أيقونة  البحث */
const addSearchIconToHeader = () => {
  const searchBtn = document.createElement("button");
  searchBtn.classList.add("header-btn", "search-btn");
  searchBtn.innerHTML = `
    <img class="search-btn__icon" width="26px" src="https://cdn.salla.sa/form-builder/WPzg3NMlvHSlvDOfA0RrlRfW99HxSLfqoDCkZtN4.png">
  `;

  const user = document.querySelector(
    ".main-nav-container div:has(>salla-cart-summary) *:first-child"
  );
  if (user) {
    user.before(searchBtn);
  }
  //   open search
  document.addEventListener("click", (e) => {
    if (e.target.classList.contains("search-btn__icon")) {
      const search = document.querySelector(".top-navbar .header-search");
      if (search) {
        search.classList.toggle("open");
      }
    }
  });
};

const showDeliveryInfoWithIcon = () => {
  var lang = document.querySelector("html").lang || "ar";
  const section = document.querySelector(".product-form section.flex");
  const div = document.createElement("div");
  div.classList.add("delivery");
  div.innerHTML = `
    <div class="flex"> 
      <img width="24" src="https://cdn.salla.sa/form-builder/f1UhUwgK2Y3h6PBSdsK97yIoDxCdBhl7Htqgxibp.png" /> 
      <b>${lang === "ar" ? "التوصيل من الرياض" : "Delivery from Riyadh"}</b>
    </div>
    <span>${
      lang === "ar"
        ? "2-1 أيام عمل إلى الرياض "
        : "1-2 Business Days to Riyadh."
    }</span>
    <style>
        .delivery {
            font-weight: 300;
        }
        .delivery b {
            margin: 0 8px;
            font-size: 1.25rem;
        }
        .delivery span {
            font-size: 1rem
        }
    </style>
  `;
  if (section) {
    section.before(div);
  }
};

document.addEventListener("DOMContentLoaded", () => {
  addSearchIconToHeader();
  addSlidersTexts();
  addProductsLink();
  setTimeout(() => {
    addSideBarIcons();
  }, 1500);
  setTimeout(() => {
    const icons = document.querySelector(".sidebar-icons");
    if (!icons) {
      addSideBarIcons();
    }
  }, 4000);
});

const showProductPageDetails = () => {
  var lang = document.querySelector("html").lang || "ar";
  const descDiv = document.createElement("div");
  descDiv.classList.add("description-div");
  const brandsList = document.createElement("div");

  /* === وصف المنتج === */
  const productDesc = document.querySelector(
    ".product-single .product__description"
  );
  const newDiv = document.createElement("div");
  if (productDesc) {
    Array.from(productDesc.children).forEach((item) => {
      newDiv.appendChild(item);
    });
  }

  let des = document.createElement("div");
  let desTitle = document.createElement("button");
  desTitle.classList.add("accordion", "desc-accordion");
  desTitle.innerText = lang === "ar" ? "وصف المنتج" : "Product Details";
  let desText = document.createElement("p");
  desText.classList.add("accordion-content");
  productDesc ? desText.appendChild(newDiv) : "";
  des.appendChild(desTitle);
  des.appendChild(desText);

  /* ===  التحقق من التوفر في المتجر  === */
  let available = document.createElement("div");
  const isAvailable = document.querySelector(
    ".s-add-product-button-main .s-button-element"
  );
  available.innerHTML = `
        <button class="accordion desc-accordion"> ${
          lang === "ar"
            ? "التحقق من التوفر في المتجر"
            : "Check availability in store"
        } </button>
        <p class="accordion-content">
        ${
          lang === "ar"
            ? !isAvailable
              ? "غير متوفر"
              : "متوفر"
            : !isAvailable
            ? "Not Available"
            : "Available"
        }
        </p>
    `;

  /* === التوصيل والإسترجاع === */
  let delivery = document.createElement("div");
  delivery.innerHTML = `
        <button class="accordion desc-accordion">${
          lang === "en" ? "Delivery and Return" : "التوصيل والإسترجاع"
        }</button>
        <p class="accordion-content">
        ${
          lang === "ar"
            ? "لمعرفة تفاصيل التوصيل والإسترجاع"
            : "For delivery and return details"
        }
        <a href="https://ateedofficial.com/${lang}/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A5%D8%B3%D8%AA%D8%A8%D8%AF%D8%A7%D9%84-%D9%88%D8%A7%D9%84%D8%A5%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9/page-1123921600" target="_blank">
        ${lang === "ar" ? "اضغط هنا" : "Click here"} </a>
        </p>
    `;

  /* === إستبدال واسترجاع === */
  let gifting = document.createElement("div");
  gifting.innerHTML = `
        <button class="accordion desc-accordion">  ${
          lang === "ar" ? "الإهداء" : "Gifting"
        } </button>
        <p class="accordion-content"></p>
    `;

  brandsList.appendChild(available);
  brandsList.appendChild(des);
  brandsList.appendChild(delivery);
  brandsList.appendChild(gifting);
  descDiv.appendChild(brandsList);

  // show in productForm
  const productForm = document.querySelector(".product-single .product-form");
  if (productForm) {
    productForm.after(descDiv);
  }
  //   myfunc2
  document.addEventListener("click", (e) => {
    if (e.target.classList.contains("desc-accordion")) {
      e.target.classList.toggle("is-open");
      const content = e.target.nextElementSibling;
      content.style.maxHeight = content.style.maxHeight
        ? (content.style.maxHeight = null)
        : content.scrollHeight + "px";
    }
  });
};

document.addEventListener("DOMContentLoaded", () => {
  const productPage = document.querySelector(".product-single");
  if (productPage) {
    showDeliveryInfoWithIcon();
    setTimeout(() => {
      showProductPageDetails();
    }, 1500);
  }
});