(() => {
  class Core {
    constructor(animateEls) {
      this.animateEls = animateEls

      this.animateFromTo
      this.animateTo
    };

    returnAnimation() {
      return this.animateFromTo || this.animateTo
    };

  };

  class Animations extends Core {
    constructor(animateEls, time, from, to) {
      super(animateEls)
      this.time = time
      this.from = from
      this.to = to
    };

    animateFromTo(options) {
      this.repeat = options.repeat
      this.animateFromTo = TweenMax.fromTo(this.animateEls, this.time, this.from, this.to).repeat(this.repeat)
    };

    animateTo(options) {
      this.repeat = options.repeat
      this.animateTo = TweenMax.to(this.animateEls, this.time, this.to).repeat(this.repeat)
    };

    killFromTo() {
      this.animateFromTo.kill()
    };

    playFromTo() {
      this.animateFromTo.play()
    };

    killTo() {
      this.animateTo.kill()
    };

    playTo() {
      this.animateTo.play()
    };

  };

  class DetectOffscreen {
    constructor(root, core) {
      this.root = root
      this.core = core

      window.addEventListener('load', () => this.killOffscreen(this.root, this.core))
      this.observeStyleChange()
    };

    killOffscreen(root, core) {
      root.forEach(el => {
        this.top = el.getBoundingClientRect().top

        if (this.top !== 0) {
          core.returnAnimation().kill()
        } else {
          core.returnAnimation().play()
        }
      })
    };

    observeStyleChange() {
      this.target = document.querySelector('#pageable')

      this.observer = new MutationObserver(mutations => {
        mutations.forEach(mutationRecord => {
          this.killOffscreen(this.root, this.core)
        });
      });

      this.observer.observe(this.target, {
        attributes: true,
        attributeFilter: ['style']
      })
    };

  };

  //
  (() => {
    const height = document.querySelector('.aniamtions__lightbulbs-container').offsetHeight
    const from = {
      y: -height / 2,
      ease: Power0.easeNone
    }
    const to = {
      y: 0,
      ease: Power0.easeNone
    }


    const elementsAnimate = document.querySelectorAll('.aniamtions__lightbulbs-container');
    const root1 = document.querySelectorAll('.agency--first')
    const root2 = document.querySelectorAll('.agency--second')



    const cube1 = new Animations(elementsAnimate[0], 4.5, from, to)
    cube1.animateFromTo({ repeat: -1 })
    const cube2 = new Animations(elementsAnimate[1], 4.5, from, to)
    cube2.animateFromTo({ repeat: -1 })
    //
    const detectOffScreen1 = new DetectOffscreen(root1, cube1)
    const detectOffScreen2 = new DetectOffscreen(root2, cube2)


    // const observer = new MutationObserver(mutations => {
    //   mutations.forEach(mutationRecord => {
    //     const detectOffScreen1 = new DetectOffscreen(root1, cube1)
    //     const detectOffScreen2 = new DetectOffscreen(root2, cube2)
    //   });
    // });
    //
    // const target = document.querySelector('#pageable')
    // observer.observe(target, { attributes: true, attributeFilter: ['style']
  })();
  //   (() => {
  //     const to = {
  //       rotation: 360,
  //       transformOrigin: 'center center',
  //       ease: Power0.easeNone
  //     }
  //     const elements = []
  //     const svgG = []
  //     const svgElements = [...document.querySelectorAll('#_1915972218608')]
  //
  //     for (const el of svgElements) {
  //       elements.push(...el.children)
  //     }
  //     elements.forEach(el => svgG.push(...el.children))
  //
  //
  //     const rotateAnimation = new Animations(svgG, 2, null, to)
  //     rotateAnimation.animateTo({ repeat: -1 })
  //   })();
})()