import jQuery from 'jquery';
import { gsap, Power2 } from "gsap";
import  ScrollTrigger  from "gsap/ScrollTrigger";
import  ScrollToPlugin  from "gsap/ScrollToPlugin";
import "_count-up";


//const scroll = new LocomotiveScroll();

document.addEventListener("DOMContentLoaded", function() {
    window.addEventListener('scroll', function() {
        if (window.scrollY > 57) {
            document.getElementById('main-nav').classList.add('fixed-top');
        } else {
            document.getElementById('main-nav').classList.remove('fixed-top');
        }
    });
});


jQuery(document).ready(function($) {
  $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 
  $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right')); 
  window.addEventListener('resize', function() {
    $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 
    $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right')); 
  });

gsap.registerPlugin(ScrollTrigger);

var tl = gsap.timeline();

tl.from("h1 span", {
  duration: 0.75,
  y: 150,
  autoAlpha: 0,
  ease: Power2.out,
  stagger: 1.5
}).from(".nav-item", {
  duration: 0.75,
  x: 300,
  autoAlpha: 0,
  ease: "elastic.out(1, 1)",
  stagger: {
    each: 0.75,
    amount: 0.5
  }
}, "-=0.25");

var tl1 = gsap.timeline({
  scrollTrigger: {
    trigger: "#vc1",
    scroller: "body",

    scrub: true,
    pin: true,
    start: "top top",
    end: "+=150%",
  }
});
tl1.to(".move_1", {y: -786}, 0).to(".move_2", {y: -486},0)


var tl2 = gsap.timeline({
  scrollTrigger: {
    trigger: "#vc2",
    scroller: "body",
    scrub: true,
    pin: true,
    start: "top top",
    end: "+=150%",
  }
});
tl2.to(".move_3", {y: -786}, 0).to(".move_4", {y: -786},0)

var tl3 = gsap.timeline({
  scrollTrigger: {
    trigger: ".by-the-numbers",
    scroller: "body",
    start: "center center",
    end: "+=200px",
    toggleAction:"reset reset reset reset",
  }
});


const items = document.querySelectorAll(".the-numbers h3");

tl3.from(items, {
  textContent: 0,
  duration: 4,
  ease: Power2.in,
  snap: { textContent: 1 },
  stagger: {
    each: 0.1,
    onUpdate: function() {
      this.targets()[0].innerHTML = numberWithCommas(Math.ceil(this.targets()[0].textContent));
    },
  }
});


function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}




     
  // var tlimage = gsap.timeline({
  //   scrollTrigger: {
  //     trigger: '.staff-images',
  //     scroller: "body",
  //     markers:true,
  //     scrub: true,
  //     pin: true,
  //     start: "top -70px",
  //     end: "+=150%",
  //   }
  // })
  
  // tlimage.from(".image", {
  //   duration: 0.5,
  //   rotationY: 180, 
  //   ease: Power2.out,
  //   stagger: 0.05
  // });
  





});  

ScrollTrigger.refresh();


//     var frameNumber = 400, // start video at frame 0
//     // lower numbers = faster playback
//     playbackConst = 10, 
//     // get page height from video duration
//     setHeight = document.getElementById("body"), 
//     // select video element         
//     vid = document.getElementById('v2'); 

//   // dynamically set the page height according to video length
//   vid.addEventListener('loadedmetadata', function() {
//     setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
//   });

//   // Use requestAnimationFrame for smooth playback
//   function scrollPlay(){  
//     var frameNumber  = window.pageYOffset/playbackConst;
//     vid.currentTime  = frameNumber;
//     window.requestAnimationFrame(scrollPlay);
//   }

// window.requestAnimationFrame(scrollPlay);