( function( $ ) {

	"use strict";

	$( document ).ready( function() {
		window['owpDemoImport'].init();
	} );

	window['owpDemoImport'] = {

		importData: {},
		allowPopupClosing: true,

		init: function() {
			var that = this;

			// Search functionality.
			$( '.owp-search-input' ).on( 'keyup', function() {
				if ( 0 < $( this ).val().length ) {
					// Hide all items.
					$( '.owp-demo-wrap .themes' ).find( '.theme-wrap' ).hide();

					// Show just the ones that have a match on the import name.
					$( '.owp-demo-wrap .themes' ).find( '.theme-wrap[data-name*="' + $( this ).val().toLowerCase() + '"]' ).show();
				} else {
					$( '.owp-demo-wrap .themes' ).find( '.theme-wrap' ).show();
				}
			} );

			// Prevent the popup from showing when the live preview button
			$( '.owp-demo-wrap .theme-actions a.button' ).on( 'click', function( e ) {
			   e.stopPropagation();
			} );

			// Get demo data
			$( '.owp-open-popup' ).click( function( e ) {
				if( $( e.target ).hasClass( 'owp-live-preview' ) ) {
					return;
				}

				e.preventDefault();

				// Vars
				var $selected_demo 		= $( this ).data( 'demo-id' ),
					$demo_type			= $( this ).data( 'demo-type' ),
					$loading_icon 		= $( '.preview-' + $selected_demo ),
					$disable_preview 	= $( '.preview-all-' + $selected_demo );

				$loading_icon.show();
				$disable_preview.show();

				that.getDemoData( $selected_demo, $demo_type );
			} );

			$( document ).on( 'click' 						, '.install-now', this.installNow );
			$( document ).on( 'click' 						, '.activate-now', this.activatePlugins );
			$( document ).on( 'wp-plugin-install-success'	, this.installSuccess );
			$( document ).on( 'wp-plugin-installing' 		, this.pluginInstalling );
			$( document ).on( 'wp-plugin-install-error'		, this.installError );

			// Elementor
			$( '.owp-elementor-link' ).on( 'click', function( e ) {
				e.preventDefault();
				$( this ).parent().addClass( 'active' );
				$( '.owp-gutenberg-link' ).parent().removeClass( 'active' );

				$( '.owp-navigation .elementor-demos' ).show();
				$( '.owp-navigation .gutenberg-demos' ).hide();
				$( '.owp-demo-wrap .themes.elementor-items' ).show();
				$( '.owp-demo-wrap .themes.gutenberg-items' ).hide();
			} );

			// Gutenberg
			$( '.owp-gutenberg-link' ).on( 'click', function( e ) {
				e.preventDefault();
				$( this ).parent().addClass( 'active' );
				$( '.owp-elementor-link' ).parent().removeClass( 'active' );

				$( '.owp-navigation .gutenberg-demos' ).show();
				$( '.owp-navigation .elementor-demos' ).hide();
				$( '.owp-demo-wrap .themes.gutenberg-items' ).show();
				$( '.owp-demo-wrap .themes.elementor-items' ).hide();
			} );

			// Filter for Elementor demos
			this.categoriesFilter( '.elementor-items', '.elementor-demos' );

			// Filter for Gutenberg demos
			this.categoriesFilter( '.gutenberg-items', '.gutenberg-demos' );

		},

		// Category filter for Elementor demos
		categoriesFilter: function( items, link ) {

			// Cache selector to all items
			var $items 				= $( '.owp-demo-wrap .themes' + items ).find( '.theme-wrap' ),
				fadeoutClass 		= 'owp-is-fadeout',
				fadeinClass 		= 'owp-is-fadein',
				animationDuration 	= 200;

			// Hide all items.
			var fadeOut = function () {
				var dfd = $.Deferred();

				$items.addClass( fadeoutClass );

				setTimeout( function() {
					$items.removeClass( fadeoutClass ).hide();

					dfd.resolve();
				}, animationDuration );

				return dfd.promise();
			};

			var fadeIn = function ( category, dfd ) {
				var filter = category ? '[data-categories*="' + category + '"]' : 'div';

				if ( 'all' === category ) {
					filter = 'div';
				}

				$items.filter( filter ).show().addClass( 'owp-is-fadein' );

				setTimeout( function() {
					$items.removeClass( fadeinClass );

					dfd.resolve();
				}, animationDuration );
			};

			var animate = function ( category ) {
				var dfd = $.Deferred();

				var promise = fadeOut();

				promise.done( function () {
					fadeIn( category, dfd );
				} );

				return dfd;
			};

			$( link + ' .owp-navigation-link' ).on( 'click', function( event ) {
				event.preventDefault();

				// Remove 'active' class from the previous nav list items.
				$( this ).parent().siblings().removeClass( 'active' );

				// Add the 'active' class to this nav list item.
				$( this ).parent().addClass( 'active' );

				var category = this.hash.slice(1);

				// show/hide the right items, based on category selected
				var $container = $( '.owp-demo-wrap .themes' + items );
				$container.css( 'min-width', $container.outerHeight() );

				var promise = animate( category );

				promise.done( function () {
					$container.removeAttr( 'style' );
				} );
			} );

		},

		// Get demo data.
		getDemoData: function( demo_name, demo_type ) {
			var that = this;

			// Get import data
			$.ajax( {
				url: owpDemos.ajaxurl,
				type: 'get',

				data: {
					action: 'owp_ajax_get_import_data',
					demo_name: demo_name,
					demo_type: demo_type,
					security: owpDemos.owp_import_data_nonce
				},

				complete: function( data ) {
					that.importData = $.parseJSON( data.responseText );
				}
			} );

			// Run the import
			$.ajax( {
				url: owpDemos.ajaxurl,
				type: 'get',

				data: {
					action : 'owp_ajax_get_demo_data',
					demo_name: demo_name,
					demo_type: demo_type,
					demo_data_nonce: owpDemos.demo_data_nonce
				},

				complete: function( data ) {
					that.runPopup( data );

					// Vars
					var $loading_icon 		= $( '.preview-' + demo_name ),
						$disable_preview 	= $( '.preview-all-' + demo_name );

					// Hide loader
					$loading_icon.hide();
					$disable_preview.hide();
				}

			} );

		},

		// Run popup.
		runPopup: function( data ) {
			var that = this

			var innerWidth = $( 'html' ).innerWidth();
			$( 'html' ).css( 'overflow', 'hidden' );
			var hiddenInnerWidth = $( 'html' ).innerWidth();
			$( 'html' ).css( 'margin-right', hiddenInnerWidth - innerWidth );

			// Show popup
			$( '#owp-demo-popup-wrap' ).fadeIn();
			$( data.responseText ).appendTo( $( '#owp-demo-popup-content' ) );

			// Close popup
			$( '.owp-demo-popup-close, .owp-demo-popup-overlay' ).on( 'click', function( e ) {
				e.preventDefault();
				if ( that.allowPopupClosing === true ) {
					that.closePopup();
				}
			} );

			// Display the step two
			$( '.owp-plugins-next' ).on( 'click', function( e ) {
				e.preventDefault();
				
				// Hide step one
				$( '#owp-demo-plugins' ).hide();

				// Display step two
				$( '#owp-demo-import-form' ).show();

			} );

			// if clicked on import data button
			$( '#owp-demo-import-form' ).submit( function( e ) {
				e.preventDefault();

				// Vars
				var demo 	 = $( this ).find( '[name="owp_import_demo"]' ).val(),
					demoType = $( this ).find( '[name="owp_import_demo"]' ).data( 'demo-type' ),
					nonce 	 = $( this ).find( '[name="owp_import_demo_data_nonce"]' ).val(),
					contentToImport = [];

				// Check what need to be imported
				$( this ).find( 'input[type="checkbox"]' ).each( function() {
					if ( $( this ).is( ':checked' ) === true ) {
						contentToImport.push( $( this ).attr( 'name' ) );
					}
				} );

				// Hide the checkboxes and show the loader
				$( this ).hide();
				$( '.owp-loader' ).show();

				// Start importing the content
				that.importContent( {
					demo: demo,
					demoType: demoType,
					nonce: nonce,
					contentToImport: contentToImport,
					isXML: $( '#owp_import_xml' ).is( ':checked' )
				} );
			} );

		},

		// importing the content.
		importContent: function( importData ) {
			var that = this,
				currentContent,
				importingLimit,
				timerStart = Date.now(),
				ajaxData = {
					owp_import_demo: importData.demo,
					owp_import_demo_type: importData.demoType,
					owp_import_demo_data_nonce: importData.nonce
				};

			this.allowPopupClosing = false;
			$( '.owp-demo-popup-close' ).fadeOut();

			// When all the selected content has been imported
			if ( importData.contentToImport.length === 0 ) {
				
				// Show the imported screen after 1 second
				setTimeout( function() {
					$( '.owp-loader' ).hide();
					$( '.owp-last' ).show();
				}, 1000 );

				// Notify the server that the importing process is complete
				$.ajax( {
					url: owpDemos.ajaxurl,
					type: 'post',
					data: {
						action: 'owp_after_import',
						owp_import_demo: importData.demo,
						owp_import_demo_type: importData.demoType,
						owp_import_demo_data_nonce: importData.nonce,
						owp_import_is_xml: importData.isXML
					},
					complete: function( data ) {}
				} );

				this.allowPopupClosing = true;
				$( '.owp-demo-popup-close' ).fadeIn();

				return;
			}

			// Check the content that was selected to be imported.
			for ( var key in this.importData ) {

				// Check if the current item in the iteration is in the list of importable content
				var contentIndex = $.inArray( this.importData[ key ][ 'input_name' ], importData.contentToImport );

				// If it is:
				if ( contentIndex !== -1 ) {

					// Get a reference to the current content
					currentContent = key;

					// Remove the current content from the list of remaining importable content
					importData.contentToImport.splice( contentIndex, 1 );

					// Get the AJAX action name that corresponds to the current content
					ajaxData.action = this.importData[ key ]['action'];

					// After an item is found get out of the loop and execute the rest of the function
					break;
				}
			}

			// Tell the user which content is currently being imported
			$( '.owp-import-status' ).append( '<p class="owp-importing">' + this.importData[ currentContent ]['loader'] + '</p>' );

			// Tell the server to import the current content
			var ajaxRequest = $.ajax( {
				url: owpDemos.ajaxurl,
				type: 'post',
				data: ajaxData,
				complete: function( data ) {
					clearTimeout( importingLimit );

					// Indicates if the importing of the content can continue
					var continueProcess = true;

					// Check if the importing of the content was successful or if there was any error
					if ( data.status === 500 || data.status === 502 || data.status === 503 ) {
						$( '.owp-importing' )
							.addClass( 'owp-importing-failed' )
							.removeClass( 'owp-importing' )
							.text( owpDemos.content_importing_error + ' '+ data.status );
					} else if ( data.responseText.indexOf( 'successful import' ) !== -1 ) {
						$( '.owp-importing' ).addClass( 'owp-imported' ).removeClass( 'owp-importing' );
					} else {
						var errors = $.parseJSON( data.responseText ),
							errorMessage = '';

						// Iterate through the list of errors
						for ( var error in errors ) {
							errorMessage += errors[ error ];

							// If there was an error with the importing of the XML file, stop the process
							if ( error === 'xml_import_error' ) {
								continueProcess = false;
							}
						}

						// Display the error message
						$( '.owp-importing' )
							.addClass( 'owp-importing-failed' )
							.removeClass( 'owp-importing' )
							.text( errorMessage );

						that.allowPopupClosing = true;
						$( '.owp-demo-popup-close' ).fadeIn();
					}

					// Continue with the loading only if an important error was not encountered
					if ( continueProcess === true ) {

						// Load the next content in the list
						that.importContent( importData );
					}

				}
			} );

			// Set a time limit of 15 minutes for the importing process.
			importingLimit = setTimeout( function() {

				// Abort the AJAX request
				ajaxRequest.abort();

				// Allow the popup to be closed
				that.allowPopupClosing = true;
				$( '.owp-demo-popup-close' ).fadeIn();

				$( '.owp-importing' )
					.addClass( 'owp-importing-failed' )
					.removeClass( 'owp-importing' )
					.text( owpDemos.content_importing_error );
			}, 15 * 60 * 1000 );

		},

		// Close demo popup.
		closePopup: function() {
			$( 'html' ).css( {
				'overflow': '',
				'margin-right': '' 
			} );

			// Hide loader
			$( '.preview-icon' ).hide();
			$( '.preview-all' ).hide();

			// Hide demo popup
			$( '#owp-demo-popup-wrap' ).fadeOut();

			// Remove content in the popup
			setTimeout( function() {
				$( '#owp-demo-popup-content' ).html( '' );
			}, 600);
		},

		// Install required plugins.
		installNow: function( e ) {
			e.preventDefault();

			// Vars
			var $button 	= $( e.target ),
				$document   = $( document );

			if ( $button.hasClass( 'updating-message' ) || $button.hasClass( 'button-disabled' ) ) {
				return;
			}

			if ( wp.updates.shouldRequestFilesystemCredentials && ! wp.updates.ajaxLocked ) {
				wp.updates.requestFilesystemCredentials( e );

				$document.on( 'credential-modal-cancel', function() {
					var $message = $( '.install-now.updating-message' );

					$message
						.removeClass( 'updating-message' )
						.text( wp.updates.l10n.installNow );

					wp.a11y.speak( wp.updates.l10n.updateCancel, 'polite' );
				} );
			}

			wp.updates.installPlugin( {
				slug: $button.data( 'slug' )
			} );
		},

		// Activate required plugins.
		activatePlugins: function( e ) {
			e.preventDefault();

			// Vars
			var $button = $( e.target ),
				$init 	= $button.data( 'init' ),
				$slug 	= $button.data( 'slug' );

			if ( $button.hasClass( 'updating-message' ) || $button.hasClass( 'button-disabled' ) ) {
				return;
			}

			$button.addClass( 'updating-message button-primary' ).html( owpDemos.button_activating );

			$.ajax( {
				url: owpDemos.ajaxurl,
				type: 'POST',
				data: {
					action : 'owp_ajax_required_plugins_activate',
					_wpnonce: owpDemos.demo_plugins_activate_nonce,
					init   : $init,
				},
			} ).done( function( result ) {

				if ( result.success ) {

					$button.removeClass( 'button-primary install-now activate-now updating-message' )
						.attr( 'disabled', 'disabled' )
						.addClass( 'disabled' )
						.text( owpDemos.button_active );

				}

			} );
		},

		// Install success.
		installSuccess: function( e, response ) {
			e.preventDefault();

			var $message = $( '.owp-plugin-' + response.slug ).find( '.button' );

			// Transform the 'Install' button into an 'Activate' button.
			var $init = $message.data('init');

			$message.removeClass( 'install-now installed button-disabled updated-message' )
				.addClass( 'updating-message' )
				.html( owpDemos.button_activating );

			// WordPress adds "Activate" button after waiting for 1000ms. So we will run our activation after that.
			setTimeout( function() {

				$.ajax( {
					url: owpDemos.ajaxurl,
					type: 'POST',
					data: {
						action : 'owp_ajax_required_plugins_activate',
						_wpnonce: owpDemos.demo_plugins_activate_nonce,
						init   : $init,
					},
				} ).done( function( result ) {

					if ( result.success ) {

						$message.removeClass( 'button-primary install-now activate-now updating-message' )
							.attr( 'disabled', 'disabled' )
							.addClass( 'disabled' )
							.text( owpDemos.button_active );

					} else {
						$message.removeClass( 'updating-message' );
					}

				} );

			}, 1200 );
		},

		// Plugin installing.
		pluginInstalling: function( e, args ) {
			e.preventDefault();

			var $card = $( '.owp-plugin-' + args.slug ),
				$button = $card.find( '.button' );

			$button.addClass( 'updating-message' );
		},

		// Plugin install error.
		installError: function( e, response ) {
			e.preventDefault();

			var $card = $( '.owp-plugin-' + response.slug );

			$card.removeClass( 'button-primary' ).addClass( 'disabled' ).html( wp.updates.l10n.installFailedShort );
		}

	};

} ) ( jQuery );