import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

import { greenCtaBgAnimation, mediaCards, opacifyUp } from './utils/all-pages';

document.addEventListener('DOMContentLoaded', function () {
  gsap.registerPlugin(ScrollTrigger);
  window.Webflow ||= [];
  window.Webflow.push(() => {
    const mm = gsap.matchMedia();
    mm.add(
      {
        isDesktop: '(min-width: 991px)',
        isTablet: '(max-width: 990px) and (min-width: 478px)',
        isMobile: '(max-width: 477px)',
      },
      (context) => {
        if (context.conditions && context.conditions.isDesktop) {
          greenCtaBgAnimation();
          roleRowAnimation();
          boxesTogether();
          mediaCards();
          opacifyUp();
        }
        if (context.conditions && context.conditions.isTablet) {
          greenCtaBgAnimation();
          roleRowAnimation();
          boxesTogether();
          mediaCards();
          opacifyUp();
        }
        if (context.conditions && context.conditions.isMobile) {
          greenCtaBgAnimation();
          roleRowAnimation();
          boxesTogether();
          mediaCards();
          opacifyUp();
        }
      }
    );
  });
});

function roleRowAnimation() {
  const roleRowContainer = document.querySelector("[bo-elements='role-row']");
  if (!roleRowContainer) {
    return;
  }
  const roleRowItems = gsap.utils.toArray(roleRowContainer.children);
  const topRowItems = roleRowItems.slice(0, 6);
  const bottomRowItems = roleRowItems.slice(6, 12);

  const roleItemsAnim = gsap.timeline();
  roleItemsAnim
    .from(topRowItems, { opacity: 0, stagger: 0.1 })
    .from(topRowItems, { y: '-30vh', stagger: 0.1 }, '<')
    .from(bottomRowItems, { opacity: 0, stagger: 0.1 })
    .from(bottomRowItems, { y: 200, stagger: 0.1 }, '<');

  ScrollTrigger.create({
    trigger: roleRowContainer,
    start: 'top 95%',
    end: 'bottom 95%',
    scrub: 1,
    animation: roleItemsAnim,
  });
}

function boxesTogether() {
  const boxesContainer = document.querySelector("[bo-elements='cta-boxes']");
  if (!boxesContainer) {
    return;
  }
  const leftBox = boxesContainer.children[0];
  const rightBox = boxesContainer.children[1];
  const boxesAnim = gsap.timeline();
  boxesAnim.from(leftBox, { x: 200, opacity: 0 }).from(rightBox, { x: -200, opacity: 0 }, 0);

  ScrollTrigger.create({
    trigger: boxesContainer,
    start: 'top 95%',
    end: 'bottom 95%',
    scrub: 1,
    animation: boxesAnim,
  });
}