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

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

document.addEventListener('DOMContentLoaded', () => {
  const PHOTO_GALLERY = document.querySelector('.photo-gallery');
  if (!PHOTO_GALLERY) return;

  const animateGroup1stImage = () => {
    const GROUP_1ST_IMAGES = PHOTO_GALLERY.querySelectorAll('.photo-gallery__group > .photo-gallery__image:nth-child(1)');
    if (!GROUP_1ST_IMAGES) return;

    new FadeInSlideDownAnimator(GROUP_1ST_IMAGES);
  };

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

    new FadeInSlideLeftAnimator(GROUP_2ND_IMAGES);
  };

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

    new FadeInSlideRightAnimator(GROUP_3RD_IMAGES);
  };

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

    new FadeInSlideUpAnimator(GROUP_4TH_IMAGES);
  };

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

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