import { swiperImage } from "./swiper";

export const renderInside = (news, page) => {
  if (!news) return false
  if (!page) return false;
  const date = page.querySelector('.block-content__date span');
  const tags = page.querySelector('.block-content__tags');
  const text = page.querySelector('.block-content__text');
  const title = page.querySelector('.block-hero__title');
  const image = page.querySelector('.block-hero__image');
  const images = page.querySelector('.block-images__items');
  const wrapper = page.querySelector('.block-images-slider__wrapper');
  const gallery = page.querySelector('.slider-gallery__wrapper');
  const mobileImage = page.querySelector('.block-images__mobile');
  const ogImage = document.querySelector('meta[name="og:image"]');
  const seoDesc = document.querySelector('meta[name="description"]');

  if (date) {
    date.innerHTML = news.date;
  }

  if (ogImage && news.ogImage) {
    ogImage.setAttribute("content", news.ogImage);
  }

  if (image && news.imagePreview) {
    image.src = news.imagePreview;
  }

  if (tags && news.tags.length && news.tagsFilter.length) {
    tags.innerHTML = '';
    news.tags.forEach((item, key) => {
      tags.innerHTML += `<a href="news/${news.tagsFilter[key]}" class="block-content__tag defaultSmall">${item}</a>`
        })
  }

  if (seoDesc && news.text.length) {
    seoDesc.setAttribute("content", news.text[0]);
  }

  if (text && news.text.length) {
    text.innerHTML = '';
    news.text.forEach(item =>
      text.innerHTML += `<p>${item}</p>`
    )
  }

  if (title && news.title) {
    document.title = `${news.title}`
    title.innerHTML = news.title;
  }

  if (images && news.images && news.images.length) {
    images.innerHTML = '';

    news.images.forEach((item, key) =>
      images.innerHTML += `
        <div class="block-images__item" data-role="news" data-slide="${key + 1}">
          <img src="${item}" alt="" loading="lazy">
        </div>`
    );
  }

  if (wrapper && mobileImage && news.images && news.images.length) {
    wrapper.innerHTML = '';

    news.images.forEach(item =>
      wrapper.innerHTML += `
        <div class="swiper-slide block-images-slider__slide">
          <img src="${item}" alt="">
        </div>`
    );

    swiperImage().init();
  } else {
    mobileImage.style.display = 'none';
  }

  if (gallery && news.images && news.images.length) {
    gallery.innerHTML = '';

    news.images.forEach(item =>
      gallery.innerHTML += `
        <div class="swiper-slide slider-gallery__slide">
          <img src="${item}" alt="gallery img">
        </div>`
    );
  }
}