document.addEventListener('theme::ready', () => {
  getCategories();
  changeTaxDisplay();
  useSliderOnBoth();
});
function useSliderOnBoth() {
	const allSliders = document.querySelectorAll('.s-block--info-blocks .container')

	allSliders.forEach((itm) => {
		const imagesSrc = []
		const imagesWrappers = itm.querySelectorAll(".info-block")
		
		imagesWrappers.forEach((w) => {
			const backgroundImage = w.style.backgroundImage;
			const imageUrl = backgroundImage.slice(5, -2);
			imagesSrc.push(imageUrl)
		})
		
		const slider = document.createElement("salla-slider")
		const slider_config = {
      "slidesPerView": 1,
      "spaceBetween": 10,
      "breakpoints": {
        "768": { "slidesPerView": 3 },
      }
    };
            
    slider.sliderConfig = JSON.stringify(slider_config)
    slider.autoPlay = true
    slider.showControls = false
		slider.innerHTML = `
			<div slot="items">
				 ${imagesSrc.map(url => `
		      <div class="image-container">
		        <img loading="lazy" src="${url}" alt="Image" data-src="https://cdn.salla.sa/form-builder/SU7bo1Rt7blVVrIKQ6u0gCxrpgQDnXb8BmTSqJzR.png"/>
		      </div>
    		`).join('')}
			</div>
		`
	
    itm.innerHTML = ''
    itm.appendChild(slider)
	})
}

function getCategories() {
  const slug = salla.config.properties_.page.slug;
  const cID = salla.config.properties_.page.id;

  if (slug !== "product.index" || !cID) return;

  salla.product.categories(cID).then((response) => {
    if (response.status !== 200) return;

    console.log(response.data);
    const cData = response.data;
    const cImage = cData.image;
    const cSubCategories = cData.sub_categories;

    if (cSubCategories?.length !== 0) renderSubCategoreis(cSubCategories);

    if (cImage && cSubCategories?.length !== 0) {
      renderCategoryImage(cImage);
    } 
  });
}

function renderCategoryImage(imageSrc) {
  const wrapper = document.querySelector('.app-inner');
  const ref = document.querySelector('.app-inner > .container');

  if (!wrapper || !ref) return;

  const categoryImageWrapper = document.createElement('div');
  categoryImageWrapper.classList.add("container", "v-category-image");

  wrapper.insertBefore(categoryImageWrapper, ref);

  categoryImageWrapper.innerHTML = `
		<img class="w-full" height="100%" src="${imageSrc}" alt="category_image">
	`;
}

function renderSubCategoreis(sub_categories) {
  const wrapper = document.querySelector('.app-inner');
  const ref = document.querySelector('.app-inner > .container');

  if (!wrapper || !ref) return;

  const subCategoriesWrapper = document.createElement('div');
  subCategoriesWrapper.classList.add("container", "v-sub-categories-wrapper");

  wrapper.insertBefore(subCategoriesWrapper, ref);

  for (let i = 0; i < sub_categories.length; i++) {
    const { name, url, image } = sub_categories[i];
    if (!image) continue;

    subCategoriesWrapper.innerHTML += `
			<a href="${url}" class="flex flex-col gap-1 items-center v-sub-category">
        <img class="v-sub-image" src="${image}" alt="${name}">
        <span class="font-semibold text-sm md:text-base text-center line-clamp-1">${name}</span>
      </a>
		`;
  }
}

function changeTaxDisplay() {
	const parent = document.querySelector('.store-footer__top > .container div')
	const taxWrapper = document.querySelector('footer > div.bg-darker > div > div.flex > div')
	taxWrapper.classList.add("hidden")

	if(!taxWrapper) return
	const taxNumber = taxWrapper.querySelector("p").
	textContent?.split(':')[1]
	const newTaxWrapper = document.createElement('div')
	newTaxWrapper.classList.add("v-tax-wrapper")
	newTaxWrapper.innerHTML = `
	<div class="flex items-center gap-2">
		<img
      width="100%"
      height="100%"
      src="https://cdn.salla.network/images/tax.png?v=2.0.5"
      class="rounded-sm"
      alt="value added tax"
    />
    <div>
              <p class="text-sm text-text-grey mb-1">
الرقم الضريبي
              </p>
              <b class="text-sm">${taxNumber}</b>
    </div>
	
	</div>
	
	<a class="flex items-center gap-2" target="_blank" href="https://eauthenticate.saudibusiness.gov.sa/certificate-details/0000188829">
			<img
			style="width: 3.75rem; height: 3.25rem;"
      width="100%"
      height="100%"
      src="https://cdn.salla.network/cdn-cgi/image/fit=scale-down,width=58,height=58,onerror=redirect,format=auto/images/sbc.png"
      class="rounded-sm"
      alt="value added tax"
    />
    <div>
              <p class="text-sm text-text-grey mb-1">
              رقم التوثيق
              </p>
              <b class="text-sm">0000188829</b>
    </div>
	</a>
	`
	
	parent.appendChild(newTaxWrapper)
}