// rataasgharpor@gmail.com
// ADD ALL JS FRAMEWORKS
import $ from 'jquery';
// import 'leaflet/dist/leaflet.js';
import ScrollMagic from 'scrollmagic/scrollmagic/uncompressed/ScrollMagic';
import 'waypoints/lib/noframework.waypoints';
import anime from 'animejs';
import '../gsap.min.js';
import 'scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap';
import jQueryBridget from 'jquery-bridget';
import Flickity from 'flickity';
import 'flickity-fade';
// make Flickity a jQuery plugin
jQueryBridget('flickity', Flickity, $);

// ----------------------

$(function () {
	//Model
	var appModel = {
		el: {
			// responsive menu
			menuActivator: document.getElementById('js-menu-mobile'),
			menuCloser: document.getElementById('js-menu-closer'),
			menuOverlay: document.getElementsByClassName('menu-responsive')[0],
			// wrapperScale: document.getElementsByClassName('wrapper')[0],
		},
	};

	// animTarget,easing,opacityStart,opacityEnd,start,end,duration,delay
	function animationY(animTarget, easing, opacityStart, opacityEnd, start, end, duration, delay) {
		anime({
			targets: animTarget, //animation target element
			easing: easing, //how animation  moves
			opacity: [opacityStart, opacityEnd],
			translateY: [start, end],
			duration: duration, //duration of animation
			delay: anime.stagger(delay), //delay for animation
			loop: false,
		});
	}

	function animationX(animTarget, easing, opacityStart, opacityEnd, start, end, duration, delay) {
		anime({
			targets: animTarget, //animation target element
			easing: easing, //how animation  moves
			opacity: [opacityStart, opacityEnd],
			translateX: [start, end],
			duration: duration, //duration of animation
			delay: anime.stagger(delay), //delay for animation
			loop: false,
		});
	}

	//Controller
	var appController = {
		// INIT ALL CONTROLLERS
		init: function () {
			appController.stickyMenu();
			appController.responsiveMenu();
			appController.searchBox();

			if (document.querySelector('.page-template-page-home')) {
				// appController.counter();

				// appController.drawSvgSlider();
				// appController.drawSvgTeam();
				appController.preloaderSlider();
				appController.exhibition();
				appController.team();
				appController.news();
			} else if (document.querySelector('.page-template-page-about')) {
				appController.svgAbout();
				appController.scrollPageAbout();
				appController.scrollAnimationAbout();
				// appController.drawSvgAbout();
				// appController.drawSvgStructure();
				appController.managers();
			} else if (document.querySelector('.page-template-page-contact')) {
				appController.sliderSvg();
			}
			// appController.scroll();
			// must be use setInterval for continues counting
			// setInterval(() => {
			// 	appController.counter();
			// }, 1000);
		},
		// functions for all pages:
		// stickyMenu start
		// use jquery sticky plugin for menu
		stickyMenu: function () {
			var controller = new ScrollMagic.Controller();
			new ScrollMagic.Scene({
				triggerElement: '.c-nav',
				offset: 700,
			})
				.setPin('.c-nav', { pushfollowers: false })
				.setClassToggle('.c-nav', 'sticky-outer') // add class toggle
				.addTo(controller);
			new ScrollMagic.Scene({
				triggerElement: '.c-nav',
				offset: 800,
			})
				.setPin('.c-nav', { pushfollowers: false })
				.setClassToggle('.c-nav', 'sticky-nav') // add class toggle
				.addTo(controller);
		},
		responsiveMenu: function () {
			appModel.el.menuActivator.addEventListener('click', function () {
				// animTarget,easing,opacityStart,opacityEnd,start,end,duration,delay
				animationX(appModel.el.menuOverlay, 'linear', 0, 1, '100vh', '0', 400, 300);
				// animTarget,easing,opacityStart,opacityEnd,start,end,duration,delay
				animationX(appModel.el.mobileList, 'spring(1, 50, 50, 0)', 0, '100', '100vh', '0', 100, 10);

				appModel.el.menuOverlay.style.opacity = 1;
				appModel.el.menuOverlay.style.visibility = 'visible';
			});

			appModel.el.menuCloser.addEventListener('click', function () {
				// animTarget,easing,opacityStart,opacityEnd,start,end,duration,delay
				animationX(appModel.el.menuOverlay, 'linear', '100', 0, '0', '100vh', 400, 0);
			});
		},
		// searchBox start
		// use anime.js
		searchBox: function () {
			$('.open-input').click(function () {
				$('.open-input').css('display', 'none');
				$('.search').css('visibility', '');
				var openAnimation = anime.timeline({
					easing: 'linear',
					duration: 300,
					loop: false,
				});

				// Add children
				openAnimation
					.add({
						targets: '.search .search-holder',
						width: [10, 200],
						backgroundColor: '#FFF',
					})
					.add(
						{
							targets: '.search .search-submit',
							translateX: 170,
						},
						'-=400'
					)
					.add({
						targets: '.search .search-submit',
						backgroundColor: '#bc272d',
						easing: 'easeOutExpo',
					});
				var searchSubmit = $('.search-submit');
				searchSubmit.removeAttr('type').attr('type', 'submit');
				window.addEventListener('click', function (e) {
					if (document.getElementById('search').contains(e.target) || document.getElementById('open-input').contains(e.target)) {
						// Clicked inside the box
					} else {
						// Clicked outside the box
						$('.open-input').css('display', '');
						$('.search').css('visibility', 'hidden');
						searchSubmit.removeAttr('type').attr('type', 'button');
					}
				});
				// searchSubmit.setAttribute('type', 'submit');
			});
			// $('.close-input').click(function () {
			// 	$('.search-submit').setAttribute('type', 'button');
			// 	var closeAnimation = anime.timeline({
			// 		easing: 'easeOutExpo',
			// 		duration: 750,
			// 	});

			// 	tl.add({
			// 		targets: '.search .search-holder',
			// 		width: [100, 1],
			// 		backgroundColor: 'transparent',
			// 	}).add({
			// 		targets: '.search .search-submit',
			// 		translateX: 0,
			// 	});
			// 	$('.search-submit').addClass('open-input');
			// 	$('.search-submit').removeClass('close-input');
			// });
			// $('.openBtnSearch').click(function () {
			// 	animationY(appModel.el.searchOverlay, 'linear', 0, 1, '100vh', '0', 400, 300);
			// 	appModel.el.searchOverlay.style.opacity = 1;
			// 	appModel.el.searchOverlay.style.visibility = 'visible';
			// });

			// $('.closebtnSearch').click(function () {
			// 	// document.getElementById('myOverlaySearch').style.display = 'none';
			// 	animationY(appModel.el.searchOverlay, 'linear', '100', 0, '0', '100vh', 400, 0);
			// });
		},
		preloaderSlider: function () {
			$(window).on('load', function () {
				$('.pre-loader-slider ').hide();
				document.getElementById('headSlider').style.visibility = 'visible';
				document.getElementById('headSlider').style.height = 'auto';
				appController.scrollAnimation();
				appController.sliderSvg();
			});
		},

		// functions for page-home
		// counter start
		// Counter for Exhibition Calendar
		// counter: function () {
		// 	var date = document.querySelectorAll('.countDown');
		// 	var dateShowDay = document.querySelectorAll('.countDownDays');
		// 	var dateShowHour = document.querySelectorAll('.countDownHours');
		// 	var dateShowMinute = document.querySelectorAll('.countDownMinutes');
		// 	var dateShowSecond = document.querySelectorAll('.countDownSeconds');
		// 	var now = new Date().getTime();
		// 	for (var i = 0; i < date.length; i++) {
		// 		const dates = new Date(date[i].innerHTML).getTime();
		// 		var distance = dates - now;
		// 		var days = Math.floor(distance / (1000 * 60 * 60 * 24));
		// 		var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
		// 		var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
		// 		var seconds = Math.floor((distance % (1000 * 60)) / 1000);
		// 		dateShowDay[i].innerHTML = days;
		// 		dateShowHour[i].innerHTML = hours;
		// 		dateShowMinute[i].innerHTML = minutes;
		// 		dateShowSecond[i].innerHTML = seconds;
		// 	}
		// },

		// sliderSvg start
		// svg for page-home
		// we use anime.js for svg's animation
		sliderSvg() {
			var morph = anime({
				targets: '.morph-path',
				d: [
					{
						value: 'M78 -31.89C78 175.28 -30 552.11 830 769.11',
					},
				],
				duration: 100000,
				delay: 0,
				direction: 'alternate',
				autoplay: true,
				easing: 'easeOutSine',
				elasticity: 100,
				loop: true,
			});

			var morphTeam = anime({
				targets: '.morph-path-team',
				d: [
					{
						value:
							'M814 -30.89C535.56 38.72 835.42 183.54 950 239.11C1150 336.11 946.18 373.76 888 383.11C-70 537.11 808.19 -143.8 918 247.11C943 336.11 1018 747.11 1319 468.11',
					},
				],
				duration: 30000,
				delay: 0,
				direction: 'alternate',
				autoplay: true,
				easing: 'easeOutSine',
				elasticity: 100,
				loop: true,
			});

			var morphTeam1 = anime({
				targets: '.morph-path-team1',
				d: [
					{
						value:
							'M389 -30.89C539 40.11 66.71 390.6 175 388.11C349 384.11 220 376.11 290 314.11C414.08 204.21 4.97 647.29 -201 683.11C-222.83 686.91 -233.33 664.11 -249 664.11',
					},
				],
				duration: 30000,
				delay: 0,
				direction: 'alternate',
				autoplay: true,
				easing: 'easeOutSine',
				elasticity: 100,
				loop: true,
			});
		},
		// svgAbout start
		// svg for page-about
		// we use anime.js for svg's animation
		svgAbout() {
			var morphabout = anime({
				targets: '.svg-about',
				d: [
					{
						value: 'M245 -20.89C241.1 -20.89 234.08 5.25 232 9.11C113 230.11 271.34 206.23 345 203.11C675 189.11 1028 494.11 675 734.11',
					},
				],
				duration: 50000,
				delay: 0,
				direction: 'alternate',
				autoplay: true,
				easing: 'easeOutSine',
				elasticity: 100,
				loop: true,
			});

			var morphabout1 = anime({
				targets: '.svg-about1',
				d: [
					{
						value: 'M445 -27.89C158.7 258.41 548.03 849.54 421 305.11C414 275.11 414 278.11 405 254.11C318.23 22.73 -10.83 848.11 427 848.111',
					},
				],
				duration: 50000,
				delay: 0,
				direction: 'alternate',
				autoplay: true,
				easing: 'easeOutSine',
				elasticity: 100,
				loop: true,
			});

			var morphstructure = anime({
				targets: '.svg-structure',
				d: [
					{
						value: 'M245 -20.89C241.1 -20.89 234.08 5.25 232 9.11C113 230.11 271.34 206.23 345 203.11C675 189.11 1028 494.11 675 734.11',
					},
				],
				duration: 50000,
				delay: 0,
				direction: 'alternate',
				autoplay: true,
				easing: 'easeOutSine',
				elasticity: 100,
				loop: true,
			});
			var morphstructure1 = anime({
				targets: '.svg-structure1',
				d: [
					{
						value: 'M445 -27.89C158.7 258.41 548.03 849.54 421 305.11C414 275.11 414 278.11 405 254.11C318.23 22.73 -10.83 848.11 427 848.111',
					},
				],
				duration: 50000,
				delay: 0,
				direction: 'alternate',
				autoplay: true,
				easing: 'easeOutSine',
				elasticity: 100,
				loop: true,
			});
		},
		// scrollAnimation start
		// use scrollmagic & gsap for scrolling on slider
		scrollAnimation: function () {
			var controller = new ScrollMagic.Controller();

			new ScrollMagic.Scene({
				triggerElement: '.c-slider__slide',
				offset: 500,
			})
				.duration('50%')
				.setTween('.c-slider__slide-container', { y: 100, ease: Linear.easeNone })
				.addTo(controller);
		},
		scrollAnimationAbout: function () {
			var controller = new ScrollMagic.Controller();

			new ScrollMagic.Scene({
				triggerElement: '.c-page-about__slide',
				offset: 200,
			})
				.duration('100%')
				.setTween('.c-page-about__img', { y: 300, ease: Linear.easeNone })
				.addTo(controller);
		},
		scrollPageAbout: function () {
			var controller = new ScrollMagic.Controller({});
			var scene = new ScrollMagic.Scene({ triggerElement: '.c-page-about__slide', offset: 0 });
			var scene1 = new ScrollMagic.Scene({ triggerElement: '.description-section', offset: 30 });
			scene.on('enter', function () {
				var tl = anime.timeline({ easing: 'easeInOutQuad' });
				// Add children
				tl.add({
					targets: '.about-content',
					translateX: [100, 0],
					opacity: [0, 1],
					duration: 500,
				}).add(
					{
						targets: '.c-structure__content',
						translateX: [100, 0],
						opacity: [0, 1],
					},
					'-=300'
				);
			});
			scene1.on('enter', function () {
				var tl = anime.timeline({ easing: 'easeInOutQuad' });
				// Add children
				tl.add({
					targets: '.duty',
					translateX: [100, 0],
					opacity: [0, 1],
					duration: 500,
				})
					.add(
						{
							targets: '.perspective',
							translateX: [-100, 0],
							opacity: [0, 1],
							duration: 500,
						},
						'-=200'
					)
					.add(
						{
							targets: '.goals',
							translateX: [100, 0],
							opacity: [0, 1],
							duration: 500,
						},
						'-=200'
					)
					.add(
						{
							targets: '.strategy',
							translateX: [-100, 0],
							opacity: [0, 1],
							duration: 500,
						},
						'-=200'
					);
			});
			controller.addScene([scene, scene1]);

			// var controller = new ScrollMagic.Controller();
			// var timeline = new TimelineMax();
			// var scene = new ScrollMagic.Scene({ triggerElement: '.c-page-about__slide', offset: 0 });
			// var tween = TweenMax.fromTo('.about-content', 1, { x: 100, opacity: 0 }, { x: 0, opacity: 1, ease: Power2 });
			// var tween1 = TweenMax.fromTo('.c-structure__content', 1, { x: 100, opacity: 0 }, { x: 0, opacity: 1, ease: Power2 });
			// timeline.add(tween).add(tween1, '+=0.3');
			// scene.setTween(timeline);
			// var timeline2 = new TimelineMax();
			// var scene2 = new ScrollMagic.Scene({ triggerElement: '.description-section', offset: 30 });
			// var tween2 = TweenMax.fromTo('.duty', 0.5, { x: 100, opacity: 0 }, { x: 0, opacity: 1, ease: Power2 });
			// var tween3 = TweenMax.fromTo('.perspective', 0.5, { x: -100, opacity: 0 }, { x: 0, opacity: 1, ease: Power2 });
			// var tween4 = TweenMax.fromTo('.goals', 0.5, { x: 100, opacity: 0 }, { x: 0, opacity: 1, ease: Power2 });
			// var tween5 = TweenMax.fromTo('.strategy', 0.5, { x: -100, opacity: 0 }, { x: 0, opacity: 1, ease: Power2 });
			// timeline2.add(tween2).add(tween3, '+=0.05').add(tween4, '+=0.05').add(tween5, '+=0.05');
			// scene2.setTween(timeline2);
			// controller.addScene([scene, scene2]);
		},
		// exhibition start
		// use scrollmagic and gsap for exhibition section's animation
		exhibition: function () {
			var controller1 = new ScrollMagic.Controller({});

			//   .add({
			// 	targets: '.basic-timeline-demo .el.circle',
			// 	translateX: 250,
			//   })
			//   .add({
			// 	targets: '.basic-timeline-demo .el.triangle',
			// 	translateX: 250,
			//   });

			// var timeline = new TimelineMax();
			// var tween = TweenMax.staggerFrom('.sponsor-logo', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween1 = TweenMax.staggerFrom('.exhibition-logo', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween2 = TweenMax.staggerFrom('.countdown-box', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween3 = TweenMax.staggerFrom('.date-box', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween4 = TweenMax.staggerFrom('.date', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween5 = TweenMax.staggerFrom('.cooperation-request', 0.4, { opacity: 0, y: 100 }, 0.2);
			// timeline.add(tween).add(tween1, '-=0.6').add(tween2, '-=0.7').add(tween3, '-=0.9').add(tween4, '-=1').add(tween5, '-=1.1');
			var scene = new ScrollMagic.Scene({ triggerElement: '.exhibition-trigger', offset: 10 });
			scene.on('enter', function () {
				var tl = anime.timeline({
					easing: 'easeInOutQuad',
				});
				// Add children
				tl.add({
					targets: '.sponsor-logo',
					translateY: [100, 0],
					opacity: [0, 1],
					delay: anime.stagger(200),
					duration: 500,
				})
					.add(
						{
							targets: '.exhibition-logo',
							translateY: [100, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 400,
						},
						'-=950'
					)
					.add(
						{
							targets: '.countdown-box',
							translateY: [50, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 400,
						},
						'-=900'
					)
					.add(
						{
							targets: '.date-box',
							translateY: [50, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 400,
						},
						'-=950'
					)
					.add(
						{
							targets: '.date',
							translateY: [50, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 400,
						},
						'-=950'
					)
					.add(
						{
							targets: '.cooperation-request',
							translateY: [100, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 300,
						},
						'-=950'
					);
			});
			controller1.addScene(scene);
		},
		// team start
		// use scrollmagic and gsap for scrolling animation on team section
		team: function () {
			var controller1 = new ScrollMagic.Controller({});
			var scene = new ScrollMagic.Scene({ triggerElement: '.fipco-detail', offset: 20 });
			scene.on('enter', function () {
				var tl = anime.timeline({
					easing: 'easeInOutQuad',
				});
				// Add children
				tl.add({
					targets: '.c-team-detail__img',
					translateY: [100, 0],
					opacity: [0, 1],
					delay: anime.stagger(200),
					duration: 300,
				})
					.add(
						{
							targets: '.person-name',
							translateY: [100, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 300,
						},
						'-=800'
					)
					.add(
						{
							targets: '.person-res',
							translateY: [50, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 300,
						},
						'-=800'
					)
					.add(
						{
							targets: '.person-number',
							translateY: [50, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 200,
						},
						'-=800'
					)
					.add(
						{
							targets: '.person-mail',
							translateY: [50, 0],
							opacity: [0, 1],
							delay: anime.stagger(200),
							duration: 200,
						},
						'-=700'
					);
			});
			controller1.addScene(scene);
			// var controller2 = new ScrollMagic.Controller({
			// 	globalSceneOptions: {
			// 		triggerHook: 0.3,
			// 	},
			// });
			// var timeline = new TimelineMax();
			// var tween6 = TweenMax.staggerFrom('.c-team-detail__img', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween7 = TweenMax.staggerFrom('.person-name', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween8 = TweenMax.staggerFrom('.person-res', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween9 = TweenMax.staggerFrom('.person-number', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var tween10 = TweenMax.staggerFrom('.person-mail', 0.4, { opacity: 0, y: 100 }, 0.2);
			// timeline.add(tween6).add(tween7, '-=0.9').add(tween8, '-=1').add(tween9, '-=1').add(tween10, '-=1');
			// var scene1 = new ScrollMagic.Scene({ triggerElement: '.fipco-detail' });
			// scene1.setTween(timeline);
			// controller2.addScene(scene1);
		},

		// news start
		// use scrollmagic and gsap
		news: function () {
			var controller1 = new ScrollMagic.Controller({});
			var scene = new ScrollMagic.Scene({ triggerElement: '.c-latest-news', offset: 20 });
			scene.on('enter', function () {
				anime({
					targets: '.c-latest-news__box',
					translateY: [100, 0],
					opacity: [0, 1],
					delay: anime.stagger(200), // increase delay by 100ms for each elements.
					easing: 'easeInOutQuad',
				});
			});
			controller1.addScene(scene);
			// var controller = new ScrollMagic.Controller({
			// 	globalSceneOptions: {
			// 		triggerHook: 0.3,
			// 	},
			// });
			// var tween14 = TweenMax.staggerFrom('.c-latest-news__box', 0.4, { opacity: 0, y: 100 }, 0.2);
			// var scene = new ScrollMagic.Scene({ triggerElement: '.c-latest-news' });
			// scene.setTween(tween14);
			// controller.addScene(scene);
		},

		// managers start
		// use scrollmagic and gsap for animating managers section
		managers: function () {
			var controller1 = new ScrollMagic.Controller({});
			var scene = new ScrollMagic.Scene({ triggerElement: '.c-managers', offset: 10 });
			scene.on('enter', function () {
				var tl = anime.timeline({
					easing: 'easeInOutQuad',
				});
				// Add children
				tl.add({
					targets: '.c-managers-detail',
					translateY: [100, 0],
					opacity: [0, 1],
					delay: anime.stagger(150),
					duration: 500,
				})
					.add(
						{
							targets: '.manager-name',
							translateY: [100, 0],
							opacity: [0, 1],
							delay: anime.stagger(100),
							duration: 400,
						},
						'-=1700'
					)
					.add(
						{
							targets: '.manager-res',
							translateY: [100, 0],
							opacity: [0, 1],
							delay: anime.stagger(100),
							duration: 400,
						},
						'-=1200'
					);
			});
			controller1.addScene(scene);
			// var controller3 = new ScrollMagic.Controller({
			// 	globalSceneOptions: {
			// 		triggerHook: 'onEnter',
			// 	},
			// });
			// var timeline = new TimelineMax();
			// var tween11 = TweenMax.staggerFrom('.c-managers-detail', 0.4, { opacity: 0, y: 30 }, 0.2);
			// var tween12 = TweenMax.staggerFrom('.manager-name', 0.2, { opacity: 0, y: 30 }, 0.1);
			// var tween13 = TweenMax.staggerFrom('.manager-res', 0.2, { opacity: 0, y: 30 }, 0.1);
			// timeline.add(tween11).add(tween12, '-=1.1').add(tween13, '-=0.9');
			// var scene2 = new ScrollMagic.Scene({ triggerElement: '.c-managers' });
			// scene2.setTween(timeline);
			// controller3.addScene(scene2);
		},
	};
	//View
	var appView = {
		init: function () {
			appController.init();
		},
	};
	// EXPORT INIT
	appView.init();
});