'use strict';
// Import our custom CSS
// import '../scss/app.scss'
// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
import * as Popper from '@popperjs/core'
// import { Tooltip, Toast, Popover, To } from 'bootstrap';
window.Popper = Popper
import 'bootstrap'

// menu options custom affix
var fixed_top = $(".header");
$(window).on("scroll", function(){
    if( $(window).scrollTop() > 50){
        fixed_top.addClass("animated fadeInDown menu-fixed");
    }
    else{
        fixed_top.removeClass("animated fadeInDown menu-fixed");
    }
});
$('.navbar-toggler').on('click', function (){
	$('.header').toggleClass('active');
});
$('.nav-right__search-btn').on('click', function(){
    $('.header-search-area').addClass('active');
  });
  //close when click off of container
  $(document).on('click touchstart', function (e){
    if (!$(e.target).is('.nav-right__search-btn, .nav-right__search-btn *, .header-search-form, .header-search-form *')) {
      $('.header-search-area').removeClass('active');
    }
  });

  // mobile menu js
  $(".navbar-collapse>ul>li>a, .navbar-collapse ul.sub-menu>li>a").on("click", function() {
    const element = $(this).parent("li");
    if (element.hasClass("open")) {
      element.removeClass("open");
      element.find("li").removeClass("open");
    }
    else {
      element.addClass("open");
      element.siblings("li").removeClass("open");
      element.siblings("li").find("li").removeClass("open");
    }
  });

// Animate the scroll to top
$(".scroll-to-top").on("click", function(event) {
	event.preventDefault();
	$("html, body").animate({scrollTop: 0}, 300);
});

//preloader js code
$("#preloader").delay(300).animate({
	"opacity" : "0"
	}, 300, function() {
	$("#preloader").css("display","none");
});



$(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })

	// $('#langSel').niceSelect();

	// new WOW().init();

  // mainSlider
  function mainSlider() {
	var BasicSlider = $('.hero__slider');
	BasicSlider.on('init', function (e, slick) {
		var $firstAnimatingElements = $('.movie-slide:first-child').find('[data-animation]');
		doAnimations($firstAnimatingElements);
	});
	BasicSlider.on('beforeChange', function (e, slick, currentSlide, nextSlide) {
		var $animatingElements = $('.movie-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
		doAnimations($animatingElements);
	});
	BasicSlider.slick({
		autoplay: true,
		autoplaySpeed: 3000,
		dots: true,
		fade: false,
		arrows: false,
		// nextArrow: '<div class="next"><i class="las la-long-arrow-alt-right"></i></div>',
    // prevArrow: '<div class="prev"><i class="las la-long-arrow-alt-left"></i></div>',
		responsive: [
				{
					breakpoint: 1024,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1,
						infinite: true,
					}
				},
				{
					breakpoint: 991,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1,
						arrows: false
					}
				},
				{
					breakpoint: 767,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1,
						arrows: false
					}
				}
			]
	});

	function doAnimations(elements) {
		var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
		elements.each(function () {
			var $this = $(this);
			var $animationDelay = $this.data('delay');
			var $animationType = 'animated ' + $this.data('animation');
			$this.css({
				'animation-delay': $animationDelay,
				'-webkit-animation-delay': $animationDelay
			});
			$this.addClass($animationType).one(animationEndEvents, function () {
				$this.removeClass($animationType);
			});
		});
	}
}
mainSlider();


$('.movie-slider-one').slick({
    lazyLoad: 'ondemand',
    autoplay:true,
    slidesToShow: 7,
    slidesToScroll: 1,
    infinite: true,
    speed: 700,
    dots: false,
    arrows: true,
    nextArrow: '<div class="next"><i class="las la-long-arrow-alt-right"></i></div>',
    prevArrow: '<div class="prev"><i class="las la-long-arrow-alt-left"></i></div>',
      responsive: [
          {
        breakpoint: 1650,
        settings: {
                  slidesToShow: 5
        }
          },
          {
        breakpoint: 1200,
        settings: {
                  slidesToShow: 4
        }
      },
          {
        breakpoint: 992,
        settings: {
                  slidesToShow: 3
        }
      },
          {
        breakpoint: 768,
        settings: {
                  slidesToShow: 2
        }
      },
          {
        breakpoint: 512,
        settings: {
                  slidesToShow: 2
        }
      }
    ]
  });

///lazy loading image script
function lazyLoading(){
    let images = document.querySelectorAll('.loading-img');
    function preloadImage(image) {
        let src = image.getAttribute('data-src');
        image.setAttribute('src', src)
        image = $(image);
        image.siblings('.thumb_overlay').fadeTo(2500, 0)
    }
    let imageOptions = {
        threshold: 1,
    };
    const imageObserver = new IntersectionObserver((entries, imageObserver) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // setTimeout(() => {
                    preloadImage(entry.target)
                    // overlay.style.display = 'none';
                // }, 2000);
                imageObserver.unobserve(entry.target)
            }
        })
    }, imageOptions)
    images.forEach(image => {
        imageObserver.observe(image)
    }, imageOptions)
}

lazyLoading();

//   .on('afterChange', e => {
//     lazyLoad.update()
//   });


// require('lazysizes');
// import AsyncAlpine from 'async-alpine';
// import Alpine from 'alpinejs'
// import LazyLoad from 'vanilla-lazyload';
// window.Alpine = Alpine;
// import * as scrollToTop from './components/scroll_to_top';
// import * as player from './components/player';
// import Slider from './components/Slider';
// window.Alpine = Alpine;
// AsyncAlpine.init(Alpine);
// import Trailer from './components/Trailer';
// import PlayerModal from './components/PlayerModal';
// import Player from './components/Player';
// AsyncAlpine.data('Player', () => import('./components/Player'));
// AsyncAlpine.data('Search', () => import('./components/Search'));
// AsyncAlpine.start();
// import Nav from './components/Nav';
// import Search from './components/Search';
// import Tabs from './components/Tabs';
// window.Alpine = Alpine
// Alpine.data('Trailer', Trailer);
// Alpine.data('PlayerModal', PlayerModal);
// Alpine.data('Player', Player);
// Alpine.data('Nav', Nav);
// Alpine.data('Search', Search);
// Alpine.data('Tabs', Tabs);
// Alpine.store('PlayerModal', PlayerModal);

// document.addEventListener("alpine:init", () => {
//     Alpine.data('Trailer', Trailer);
//     Alpine.data('PlayerModal', PlayerModal);
//     // Alpine.data("dropdown", () => ({
//     //     open: false,
//     //     toggle() {
//     //         this.open = !this.open;
//     //     },
//     // }));
// });

    // Alpine.start()

// import * as trailer from './components/trailer';
// require('./components/menu');


// window.Trailer = Trailer;
// import Alpine from 'alpinejs'

// window.Alpine = Alpine
// Alpine.start()
(function ($) {
    "user strict";
    //Create Background Image
    // (function background() {
    //     let img = $(".bg_img");
    //     img.css("background-image", function () {
    //         var bg = "url(" + $(this).data("background") + ")";
    //         return bg;
    //     });
    // })();

    // Search options
    $(".search-bar > a").on("click", function () {
        $(".header-top-search-area").slideToggle();
    });
})(jQuery);


document.addEventListener('readystatechange', event => {
    if (document.readyState === "complete") {
        const watch = document.querySelector('#watch');
        if (watch) {
            setTimeout(() => {
                fetch(`https://qa.softcad.pw/${watch.dataset.type}/view/${document.location.hostname}/${watch.dataset.id}`)
                .catch((err) => {});
            }, 800);
        }
        // const doSearch = (query) => {
        //     if (query.trim() !== '') {
        //         query = query.replace(/(<([^>]+)>)/gi, "").replace(/[`~!@#$%^&*()_|=?;:'",.<>{}[\]\\/]/gi, "").split(' ').join('+');
        //         window.location.href = `/search?q=${query}`;
        //     }
        // }
        // const navSearch = document.getElementById('nav-search')
        // const homeSearch = document.getElementById('home-search')
        // const searchBtn = document.getElementById('search-button')
        // navSearch.addEventListener('keypress', (ev) => {
        //     if (ev.key === 'Enter' && navSearch.value.length > 1) {
        //         doSearch(navSearch.value)
        //     }
        // })
        // if (searchBtn) {
        //     searchBtn.addEventListener('click', (ev) => {
        //         ev.preventDefault()
        //         if (homeSearch.value.length > 1) {
        //             doSearch(homeSearch.value)
        //         }
        //     })
        //     homeSearch.addEventListener('keydown', (ev) => {
        //         if (ev.key === 'Enter' && homeSearch.value.length > 1) {
        //             doSearch(homeSearch.value)
        //         }
        //         if (ev.key === 'Escape' && homeSearch.value.length > 0) {
        //             homeSearch.value = ''
        //         }
        //     })
        // }

    }
});