/**
 * External Dependencies
 */

import Swiper from 'swiper';
import LocomotiveScroll from 'locomotive-scroll';
import gsap from 'gsap';
import { SplitText } from 'gsap/SplitText';


gsap.registerPlugin(SplitText);

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true, 
  getDirection: true, 
});

document.addEventListener("DOMContentLoaded", function(){
  scroll.update()
});

/**
 * Show header
 */

setTimeout(function() {
  document.querySelector('.header').classList.add('show')
}, 300)


/**
 * Nav mobile
 */

let navMobile = document.querySelector('.nav-mobile'),
  burger = document.querySelector('.js-menu-toggle'),
  body = document.querySelector('body');

burger.onclick = function() {
  navMobile.classList.toggle('visible');
  this.classList.toggle('open');
  body.classList.toggle('no-scroll');
};


/**
 * Viewport trick 
 */

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);

/**
 *  ScrollTo 
 */

let navItems = document.querySelectorAll('.menu-item a');

for (var i = 0; i < navItems.length; i++) {
  var item = navItems[i];
  item.onclick = function (event) {
    event.preventDefault();
    burger.click();
    let sectionId = this.getAttribute('href');
  
    scroll.scrollTo(sectionId);
  };
}

/**
 *  Reveal logo on scroll
 */

scroll.on('scroll', function(instance) {
  let y = instance.scroll.y,
    header = document.querySelector('.header'),
    heroHeight = document.querySelector('.home-hero').offsetHeight;

  if (y >= heroHeight) {
    header.classList.add('fixed');
  } else {
    header.classList.remove('fixed');
  }    

  if( header.classList.contains('fixed') && y >= heroHeight + 200){
    if(instance.direction == 'down') {
      header.classList.add('hide')
    } else { 
      header.classList.remove('hide')
    }
  } else { 
    header.classList.remove('hide')
  }
});


/**
 *  Rotating Circle & Scroll Header 
 */

let rotatingText = document.querySelector('.rotating-text');

scroll.on('scroll', (instance) => {
  const circle = rotatingText;
  if (!circle.classList.contains('is-inview')) return;
  let progress = Math.round((1 * instance.scroll.y / window.innerHeight) * 100) / 200;
  let rotationTimeline = gsap.timeline({ paused: true }).fromTo(circle, { rotation: 0 }, { rotation: 360, ease: 'none', duration: 0.3, force3D: true })
  rotationTimeline.progress(progress)
})


/**
 *  Text animation
 */

scroll.on('call', (value, way, obj) => {
  switch (value) {
    case 'animateText': {
    let split = new SplitText(obj.el, {type: "lines", linesClass: "lineParent"});

    let lines = split.lines;
    gsap.set(obj, {
      perspective: 1000,
    });
      gsap.from(lines, 1.2, {
      opacity: 0,
      y: 100,
      ease: 'power3.out',
      stagger: 0.05,
    });
    break;
  }
  default:
    break;
  }
});


/**
 *  Zoom background hero
 */

let heroImage = document.querySelector('.hero_image img');

scroll.on('scroll', (instance) => {
  const image = heroImage;

  let progress = Math.round((1 * instance.scroll.y / window.innerHeight) * 100) / 200;
  let zoomTimeline = gsap.timeline({ paused: true }).fromTo(image, { scaleX:1, scaleY:1,}, {scaleX:1.5, scaleY:1.5, ease: 'none', duration: 0.3, force3D: true })
  zoomTimeline.progress(progress)
})


/**
 * Swiper
 */

var productionSlideshow = new Swiper('.production__slideshow .swiper-container', {
  slidesPerView: 1,
  effect: 'fade',
  observer: true, 
  observeParents: true,
  navigation: {
    nextEl: '.pro-nav-next',
    prevEl: '.pro-nav-prev',
  },
  on: {
    init: function () {
      let caption = document.querySelector('.production__slideshow .swiper-slide-active').getElementsByTagName('img')[0].getAttribute('alt');

      document.querySelector('.prod-slide span').innerHTML = caption;
    },
    
    slideChangeTransitionEnd: function(){
      let caption = document.querySelector('.production__slideshow .swiper-slide-active').getElementsByTagName('img')[0].getAttribute('alt');

      document.querySelector('.prod-slide span').innerHTML = caption;
    }
  }
});

var servicesSlideshow = new Swiper('.services__slideshow .swiper-container', {
  slidesPerView: 1,
  effect: 'fade',
  observer: true, 
  observeParents: true,
  navigation: {
    nextEl: '.ser-swiper-nav .swiper-button-next',
    prevEl: '.ser-swiper-nav .swiper-button-prev',
  },
  on: {
    init: function () {
      let currentSlide = this.activeIndex,
        pagCurrent = ('0' + (currentSlide+1)).slice(-2),
        total = this.slides.length,
        pagTotal = ('0' + total).slice(-2),
        caption = document.querySelector('.services__slideshow .swiper-slide-active').getElementsByTagName('img')[0].getAttribute('alt');
      
      document.querySelector('.swiper-pagination .active').innerHTML = pagCurrent;
      document.querySelector('.swiper-pagination .total').innerHTML = pagTotal;
      document.querySelector('.ser-slide span').innerHTML = caption;
    },
    
    slideChangeTransitionEnd: function(){
      let currentSlide = this.activeIndex,
        pagCurrent = ('0' + (currentSlide+1)).slice(-2),
        total = this.slides.length,
        pagTotal = ('0' + total).slice(-2),
        caption = document.querySelector('.services__slideshow .swiper-slide-active').getElementsByTagName('img')[0].getAttribute('alt');
    
      document.querySelector('.swiper-pagination .active').innerHTML = pagCurrent;
      document.querySelector('.swiper-pagination .total').innerHTML = pagTotal;
      document.querySelector('.ser-slide span').innerHTML = caption;
    }
  }
});

var testimonialsSlideshow = new Swiper('.testimonials__slideshow .swiper-container', {
  slidesPerView: 1,
  spaceBetween: 48,
  observer: true, 
  observeParents: true,
  pagination: {
    el: '.testimonials__slideshow .swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    1024: {
      slidesPerView: 2, 
    }
  }
});