import './layout.scss';
import './accordion/_accordion.scss';
import './flex/_flex.scss';
import './one-column/_one-column.scss';
import './two-column/_two-column.scss';
import './three-column/_three-column.scss';
import './four-column/_four-column.scss';

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

Drupal.behaviors.layouts = {
  attach(context) {
    const animateLayoutRegionItems = () => {
      const LAYOUTS = context.querySelectorAll('.layout:not(.layout--two-column');
      if (!LAYOUTS) return;

      LAYOUTS.forEach(layout => {
        const REGION_ITEMS = layout.querySelectorAll('.layout__region-item');
        if (!REGION_ITEMS) return;

        new FadeInSlideUpAnimator(REGION_ITEMS);
      });
    };

    const animateLayoutTwoColumnRegionItems = () => {
      const LAYOUTS = context.querySelectorAll('.layout--two-column');
      if (!LAYOUTS) return;

      LAYOUTS.forEach(layout => {
        const REGION_FIRST_ITEMS = layout.querySelectorAll('.layout__region--first .layout__region-item');
        if (REGION_FIRST_ITEMS) {
          new FadeInSlideRightAnimator(REGION_FIRST_ITEMS);
        }

        const REGION_SECOND_ITEMS = layout.querySelectorAll('.layout__region--second .layout__region-item');
        if (REGION_SECOND_ITEMS) {
          new FadeInSlideLeftAnimator(REGION_SECOND_ITEMS);
        }
      });
    };

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

    animateLayoutRegionItems();
    animateLayoutTwoColumnRegionItems();
  }
}
