import { $$, isMobile } from 'utils';

const initLazySlides = () => {
  const slides = $$('.hero-slider .slide, .main section');
  [...slides].forEach((slide) => {
    if (isMobile()) {
      if (slide.dataset.mobimg) {
        slide.style.backgroundImage = 'url(' + slide.dataset.mobimg + ')';
        slide.style.backgroundSize = 'cover';
      }
    } else {
      if (slide.dataset.img) {
        slide.style.position = 'relative';
        let backImage = slide.querySelector('picture.back-image');

        if (backImage == null) {
          const picture = document.createElement('picture');
          picture.classList.add('back-image');
          slide.insertAdjacentElement('afterbegin', picture);
          backImage = slide.querySelector('picture.back-image');
        } else {
          backImage.innerHTML = '';
        }

        const fileName = slide.dataset.img;
        const extension = fileName.split('.').pop();

        switch (extension) {
          case 'jpg':
          case 'png':
            const webpUrl = fileName.replace('.' + extension, '.webp');
            const webp = document.createElement('source');
            webp.srcset = webpUrl;
            webp.type = 'image/webp';
            webp.style.width = '100%';
            webp.style.height = '100%';
            webp.style.objectFit = 'cover';
            backImage.insertAdjacentElement('beforeend', webp);
            break;
          default:
            break;
        }

        const img = document.createElement('img');
        img.src = fileName;
        img.style.width = '100%';
        img.style.height = '100%';
        img.style.objectFit = 'cover';
        backImage.insertAdjacentElement('beforeend', img);

        backImage.style.width = '100%';
        backImage.style.height = '100%';
        backImage.style.position = 'absolute';
        backImage.style.zIndex = -1;
        backImage.style.objectFit = 'cover';
      }
    }

    if (slide.dataset.align) {
      slide.style.backgroundPosition = slide.dataset.align;
    }
  });
};

const initLazyImg = () => {
  const imgs = $$('img.lazy');

  [...imgs].forEach((img) => {
    if (isMobile()) {
      if (img.dataset.mobimg) {
        img.src = img.dataset.mobimg;
      }
    } else {
      if (img.dataset.img) {
        img.src = img.dataset.img;
      }
    }
  });
};

export default () => {
  initLazyImg();
  initLazySlides();
};