/** ----------------------------------------------------------------------------
 * Video Background */

 import {
	$,
	$window,
	$doc,
	$body
} from './utility';

var sightVideoPortfolio = {};

( function() {
	var $this;
	var YTdeferredDone = false;
	var initAPI = false;
	var process = false;
	var contex = [];
	var players = [];
	var attrs = [];

	// Create deferred object
	var YTdeferred = $.Deferred();

	if ( typeof window.onYouTubePlayerAPIReady !== 'undefined' ) {
		if ( typeof window.sightYTAPIReady === 'undefined' ) {
			window.sightYTAPIReady = [];
		}
		window.sightYTAPIReady.push( window.onYouTubePlayerAPIReady );
	}

	window.onYouTubePlayerAPIReady = function() {
		if ( typeof window.sightYTAPIReady !== 'undefined' ) {
			if ( window.sightYTAPIReady.length ) {
				window.sightYTAPIReady.pop()();
			}
		}

		// Resolve when youtube callback is called
		// passing YT as a parameter.
		YTdeferred.resolve( window.YT );
	};

	// Whenever youtube callback was called = deferred resolved
	// your custom function will be executed with YT as an argument.
	YTdeferred.done( function( YT ) {
		YTdeferredDone = true;
	} );

	// Embedding youtube iframe api.
	function embedYoutubeAPI() {
		if ( 'function' === typeof( window.onYTReady ) ) {
			return;
		}

		var tag = document.createElement( 'script' );
		tag.src = 'https://www.youtube.com/iframe_api';

		var firstScriptTag = document.getElementsByTagName( 'script' )[ 0 ];
		firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );
	}

	$.fn.contexObject = function( id, type ) {
		if ( 'string' === typeof id ) {
			id = `[data-id="${id}"]`;
		} else {
			id = this;
		}

		if ( 'wrap' === type ) {
			return $( id ).closest( '.sight-portfolio-video-wrap' );
		} else if ( 'container' === type ) {
			return $( id ).closest( '.sight-portfolio-video-container' );
		} else if ( 'inner' === type ) {
			return $( id ).closest( '.sight-portfolio-video-wrap' ).find( '.sight-portfolio-video-inner' );
		} else {
			return $( id );
		}
	};

	// Object Video Portfolio.
	sightVideoPortfolio = {

		/** Initialize */
		init: function( e ) {
			if ( $( 'body' ).hasClass( 'wp-admin' ) ) {
				return;
			}

			$this = sightVideoPortfolio;

			// Init events.
			$this.events( e );
		},

		// Video rescale.
		rescaleVideoBackground: function() {
			$( '.sight-portfolio-video-init' ).each( function() {
				let w = $( this ).parent().width();
				let h = $( this ).parent().height();

				var hideControl = 400;

				let id = $( this ).attr( 'data-id' );

				if ( w / h > 16 / 9 ) {
					if ( 'youtube' === $( this ).parent().data( 'video-mode' ) ) {
						players[ id ].setSize( w, w / 16 * 9 + hideControl );
					} else {
						players[ id ].width( w );
						players[ id ].height( w / 16 * 9 + hideControl );
					}
				} else {
					if ( 'youtube' === $( this ).parent().data( 'video-mode' ) ) {
						players[ id ].setSize( h / 9 * 16, h + hideControl );
					} else {
						players[ id ].width( h / 9 * 16 );
						players[ id ].height( h + hideControl );
					}
				}
			} );
		},

		// Init video background.
		initVideoBackground: function( mode, object ) {

			$( '.sight-portfolio-video-inner' ).each( function() {

				// The mode.
				if ( !$( this ).parent().is( `[data-video-mode="${mode}"]` ) ) {
					return;
				}

				// The state.
				var isInit = $( this ).hasClass( 'sight-portfolio-video-init' );

				var id = null;

				// Generate unique ID.
				if ( !isInit ) {
					id = Math.random().toString( 36 ).substr( 2, 9 );
				} else {
					id = $( this ).attr( 'data-id' );
				}

				// Create contex.
				contex[ id ] = this;

				// The monitor.
				var isInView = $( contex[ id ] ).isInViewport();

				// The actived.
				var isActive = $( contex[ id ] ).hasClass( 'active' );

				// Get video attrs.
				var youtubeID = $( contex[ id ] ).parent().data( 'youtube-id' );
				var videoType = $( contex[ id ] ).parent().data( 'video-type' );
				var videoStart = $( contex[ id ] ).parent().data( 'video-start' );
				var videoEnd = $( contex[ id ] ).parent().data( 'video-end' );

				// Initialization.
				if ( isInView && !isInit ) {

					// Add init class.
					$( contex[ id ] ).addClass( 'sight-portfolio-video-init' );

					// Add unique ID.
					$( contex[ id ] ).attr( 'data-id', id );

					// Check video mode.
					if ( 'youtube' === mode ) {
						// Check video id.
						if ( typeof youtubeID === 'undefined' || !youtubeID ) {
							return;
						}

						// Video attrs.
						attrs[ id ] = {
							'videoId': youtubeID,
							'startSeconds': videoStart,
							'endSeconds': videoEnd,
							'suggestedQuality': 'hd720'
						};

						// Creating a player.
						players[ id ] = new YT.Player( contex[ id ], {
							playerVars: {
								autoplay: 0,
								autohide: 1,
								modestbranding: 1,
								rel: 0,
								showinfo: 0,
								controls: 0,
								disablekb: 1,
								enablejsapi: 0,
								iv_load_policy: 3,
								playsinline: 1,
								loop: 1
							},
							events: {
								'onReady': function() {

									players[ id ].cueVideoById( attrs[ id ] );
									players[ id ].mute();

									if ( 'always' === videoType ) {
										$this.playVideo( id );
									}
								},
								'onStateChange': function( e ) {
									if ( e.data === 1 ) {
										$( this ).contexObject( id ).closest( '.sight-portfolio-video-wrap' ).addClass( 'sight-portfolio-video-bg-init' );
										$( this ).contexObject( id ).addClass( 'active' );
									} else if ( e.data === 0 ) {
										players[ id ].seekTo( attrs[ id ].startSeconds );
									} else if ( e.data === 5 ) {
										players[ id ].videoReady = true;
									}
								}
							}
						} );
					} else {
						// Creating a player.
						players[ id ] = $( contex[ id ] );

						// Ready play.
						players[ id ].on( 'canplay', function() {
							players[ id ].videoReady = true;

							if ( true !== players[ id ].start ) {
								players[ id ].start = true;

								this.currentTime = videoStart ? videoStart : 0;

								if ( 'always' === videoType ) {
									$this.playVideo( id );
								}
							}
						} );

						// Play.
						players[ id ].on( 'play', function() {
							players[ id ].parents( '.sight-portfolio-video-wrap' ).addClass( 'sight-portfolio-video-bg-init' );
							players[ id ].addClass( 'active' );
						} );

						// Ended.
						players[ id ].on( 'timeupdate', function() {
							if ( videoEnd && this.currentTime >= videoEnd ) {
								players[ id ].trigger( 'pause' );

								this.currentTime = videoStart;

								players[ id ].trigger( 'play' );
							}
						} );

						players[ id ].trigger( 'load' );
					}

					$this.rescaleVideoBackground();
				}

				// Pause and play.
				if ( 'always' === videoType && isActive && isInit && ! $this.getVideoUpause( id ) ) {

					if ( isInView ) {
						$this.playVideo( id );
					}

					if ( ! isInView ) {
						$this.pauseVideo( id );
					}
				}
			} );
		},

		// Construct video background.
		constructVideoBackground: function( object ) {
			if ( $( 'body' ).hasClass( 'wp-admin' ) ) {
				return;
			}

			if ( process ) {
				return;
			}

			process = true;

			// Smart init API.
			if ( !initAPI ) {
				let elements = $( '[data-video-mode="youtube"][data-youtube-id]' );

				if ( elements.length ) {
					embedYoutubeAPI();

					initAPI = true;
				}
			}

			if ( !initAPI ) {
				process = false;
			}

			// Play Video.
			$this.initVideoBackground( 'local', object );

			if ( initAPI && YTdeferredDone ) {
				$this.initVideoBackground( 'youtube', object );
			}

			process = false;
		},

		// Get video type.
		getVideoType: function( id ) {
			return $( this ).contexObject( id, 'container' ).data( 'video-type' );
		},

		// Get video mode.
		getVideoMode: function( id ) {
			return $( this ).contexObject( id, 'container' ).data( 'video-mode' );
		},

		// Get video state.
		getVideoState: function( id ) {
			return players[ id ].videoState;
		},

		// Get video ready.
		getVideoReady: function( id ) {
			return players[ id ].videoReady ? players[ id ].videoReady : false;
		},

		// Get video upause.
		getVideoUpause: function( id ) {
			return players[ id ].videoUpause ? players[ id ].videoUpause : false;
		},

		// Get video volume.
		getVideoVolume: function( id ) {
			return players[ id ].videoVolume ? players[ id ].videoVolume : 'mute';
		},

		// Change video upause.
		changeVideoUpause: function( id, val ) {
			players[ id ].videoUpause = val;
		},

		// Play video.
		playVideo: function( id ) {
			if ( 'play' === players[ id ].videoState ) {
				return;
			}

			if ( ! players[ id ].videoReady ) {
				return setTimeout(function(){
					$this.playVideo( id );
				}, 100);
			}

			if ( 'youtube' === $this.getVideoMode( id ) ) {
				players[ id ].playVideo();
			} else {
				players[ id ].trigger( 'play' );
			}

			// Change control.
			let control = $( this ).contexObject( id, 'wrap' ).find( '.sight-portfolio-player-state' );

			$( control ).removeClass( 'sight-portfolio-player-pause' );
			$( control ).addClass( 'sight-portfolio-player-play' );

			// Set state.
			players[ id ].videoState = 'play';
		},

		// Pause video.
		pauseVideo: function( id ) {
			if ( 'pause' === players[ id ].videoState ) {
				return;
			}

			if ( ! players[ id ].videoReady ) {
				return;
			}

			if ( 'youtube' === $this.getVideoMode( id ) ) {
				players[ id ].pauseVideo();
			} else {
				players[ id ].trigger( 'pause' );
			}

			// Change control.
			let control = $( this ).contexObject( id, 'wrap' ).find( '.sight-portfolio-player-state' );

			$( control ).removeClass( 'sight-portfolio-player-play' );
			$( control ).addClass( 'sight-portfolio-player-pause' );

			// Set state.
			players[ id ].videoState = 'pause';
		},

		// Unmute video.
		unmuteVideo: function( id ) {
			if ( ! players[ id ].videoReady ) {
				return;
			}

			if ( 'youtube' === $this.getVideoMode( id ) ) {
				players[ id ].unMute();
			} else {
				players[ id ].prop( 'muted', false );
			}

			// Change control.
			let control = $( this ).contexObject( id, 'wrap' ).find( '.sight-portfolio-player-volume' );

			$( control ).removeClass( 'sight-portfolio-player-mute' );
			$( control ).addClass( 'sight-portfolio-player-unmute' );

			// Set state.
			players[ id ].videoVolume = 'unmute';
		},

		// Mute video.
		muteVideo: function( id ) {
			if ( ! players[ id ].videoReady ) {
				return;
			}

			if ( 'youtube' === $this.getVideoMode( id ) ) {
				players[ id ].mute();
			} else {
				players[ id ].prop( 'muted', true );
			}

			// Change control.
			let control = $( this ).contexObject( id, 'wrap' ).find( '.sight-portfolio-player-volume' );

			$( control ).removeClass( 'sight-portfolio-player-unmute' );
			$( control ).addClass( 'sight-portfolio-player-mute' );

			// Set state.
			players[ id ].videoVolume = 'muted';
		},

		// Toogle video state.
		toogleVideoState: function( id ) {
			if ( 'play' === $this.getVideoState( id ) ) {
				$this.pauseVideo( id );
			} else {
				$this.playVideo( id );
			}
		},

		// Toogle video volume.
		toogleVideoVolume: function( id ) {
			if ( 'unmute' === $this.getVideoVolume( id ) ) {
				$this.muteVideo( id );
			} else {
				$this.unmuteVideo( id );
			}
		},

		/** Events */
		events: function( e ) {
			// State Control.
			$doc.on( 'click', '.sight-portfolio-player-state', function() {
				let id = $( this ).contexObject( false, 'inner' ).attr( 'data-id' );

				$this.toogleVideoState( id );

				if ( 'play' === $this.getVideoState( id ) ) {
					$this.changeVideoUpause( id, false );
				} else {
					$this.changeVideoUpause( id, true );
				}
			} );

			// Stop Control.
			$doc.on( 'click', '.sight-portfolio-player-stop', function() {
				let id = $( this ).contexObject( false, 'inner' ).attr( 'data-id' );

				if ( 'play' === $this.getVideoState( id ) ) {
					$this.changeVideoUpause( id, true );
				}

				$this.pauseVideo( id );
			} );

			// Volume Control.
			$doc.on( 'click', '.sight-portfolio-player-volume', function() {
				let id = $( this ).contexObject( false, 'inner' ).attr( 'data-id' );

				$this.toogleVideoVolume( id );
			} );

			// Mouseover.
			$doc.on( 'mouseover mousemove', '.sight-portfolio-entry__thumbnail', function() {
				let id = $( this ).contexObject( false, 'inner' ).attr( 'data-id' );

				if ( 'hover' === $this.getVideoType( id ) ) {
					$this.playVideo( id );
				}
			} );

			// Mouseout.
			$doc.on( 'mouseout', '.sight-portfolio-entry__thumbnail', function() {
				let id = $( this ).contexObject( false, 'inner' ).attr( 'data-id' );

				if ( 'hover' === $this.getVideoType( id ) ) {
					$this.pauseVideo( id );
				}
			} );

			// Document scroll.
			$window.on( 'load scroll resize scrollstop', function() {
				$this.constructVideoBackground();
			} );

			// Document ready.
			$doc.ready( function() {
				$this.constructVideoBackground();
			} );

			// Post load.
			$body.on( 'post-load', function() {
				$this.constructVideoBackground();
			} );

			// Document resize.
			$window.on( 'resize', function() {
				$this.rescaleVideoBackground();
			} );

			// Init.
			$this.constructVideoBackground();
		}
	};
} )();

// Initialize.
sightVideoPortfolio.init();