import './paragraph.photo-gallery--reverse.scss';

import { FadeInSlideUpAnimator, FadeInSlideDownAnimator, FadeInSlideRightAnimator, FadeInSlideLeftAnimator } from 'utils/animators';

document.addEventListener('DOMContentLoaded', () => {
  const photoGalleries = document.querySelectorAll('.photo-gallery');
  if (!photoGalleries.length) return;

  const initializePhotoGallery = (photoGallery) => {
    const animateGroup1stImage = () => {
      const group1stImages = photoGallery.querySelectorAll('.photo-gallery__group > .photo-gallery__image:nth-child(1)');
      if (!group1stImages.length) return;

      new FadeInSlideRightAnimator(group1stImages);
    };

    const animateGroup2ndImage = () => {
      const group2ndImages = photoGallery.querySelectorAll('.photo-gallery__group > .photo-gallery__image:nth-child(2)');
      if (!group2ndImages.length) return;

      new FadeInSlideDownAnimator(group2ndImages);
    };

    const animateGroup3rdImage = () => {
      const group3rdImages = photoGallery.querySelectorAll('.photo-gallery__group > .photo-gallery__image:nth-child(3)');
      if (!group3rdImages.length) return;

      new FadeInSlideUpAnimator(group3rdImages);
    };

    const animateGroup4thImage = () => {
      const group4thImages = photoGallery.querySelectorAll('.photo-gallery__group > .photo-gallery__image:nth-child(4)');
      if (!group4thImages.length) return;

      new FadeInSlideLeftAnimator(group4thImages);
    };


    animateGroup1stImage();
    animateGroup2ndImage();
    animateGroup3rdImage();
    animateGroup4thImage();
  }

  /**
   * **************************************************
   * Initialize
   */

  photoGalleries.forEach(photoGallery => {
    initializePhotoGallery(photoGallery);
  });
});
