import { AnimationSustainabilityScreen } from "./animations/AnimationSustainability";
import { AnimationMainScreen } from "./animations/Animation";
import { AnimationAboutScreen } from "./animations/AnimationAbout";

window.addEventListener('load', function () {
  const sustainability = document.querySelector('.js-sustainability-animation');
  const mainPage = document.querySelector('.js-main-animation');
  const about = document.querySelector('.js-about-animation');
  const breakpoint = window.matchMedia('(min-width: 1200px)');
  const TIME_OUT = 800;
  const body = document.querySelector('body');
  const section = document.querySelectorAll('.scroll-page__section').length;

  let startFlag = true;
  let initialScroll = 50;
  let screen = 1;
  let main = null;
  let next = null;

  if (breakpoint.matches) {
    document.body.onscroll = () => {
      if (startFlag) {
        const scrollDown = this.scrollY >= initialScroll
        const scrollLimit = screen >= 1 && screen <= section

        if (scrollLimit) {
          body.style.overflowY = 'hidden'

          if (scrollDown && screen < section) {
            main = document.querySelector(`.scroll-page__section-${screen}`)
            next = document.querySelector(`.scroll-page__section-${screen + 1}`)

            main.style.transform = 'translateY(-100vh)'
            next.style.transform = 'translateY(0)'

            screen++
          } else if (!scrollDown && screen > 1) {
            main = document.querySelector(`.scroll-page__section-${screen - 1}`)
            next = document.querySelector(`.scroll-page__section-${screen}`)

            main.style.transform = 'translateY(0)'
            next.style.transform = 'translateY(100vh)'

            screen--
          }
        }

        if (sustainability) {
          AnimationSustainabilityScreen(screen);
        }

        if (mainPage) {
          AnimationMainScreen(screen);
        }

        if (about) {
          AnimationAboutScreen(screen);
        }

        setTimeout(() => {
          initialScroll = this.scrollY
          startFlag = true
          body.style.overflowY = 'scroll'
        }, TIME_OUT)

        startFlag = false
      }
    }
  }
});