(function( $ ) {

	'use strict';

	var JetListings = {

		editorControl: null,
		editButton: null,
		editXHR: null,

		onEditorCreateClick: function( control ) {
			this.openPopup();
			this.editorControl = control;
		},

		init: function() {

			var self      = this,
				$document = $( document );

			$document
				.on( 'click.JetListings', '.page-title-action', self.openPopup )
				.on( 'click.JetListings', '.jet-engine-listing-edit-settings', self.loadEditPopup )
				.on( 'click.JetListings', '.jet-engine-listing-save', self.saveListingSettings )
				.on( 'click.JetListings', '.jet-engine-listing-cancel', self.closePopup )
				.on( 'click.JetListings', '.jet-listings-popup__overlay, .jet-listings-popup__close', self.closePopup );

			if ( window.JetListingsSettings.isAjax ) {
				$document.on( 'submit.JetListings', '#templates_type_form', self.ajaxSubmit );
			}

			if ( window.JetListingsSettings.addNewComponent ) {
				$( '.page-title-action' ).after( window.JetListingsSettings.addNewComponent );
			}

			$( 'body' ).on( 'change', '#listing_source', self.switchListingSources );

			self.applyCustomOptions();

			if ( window.location.hash.includes( '#add_new' ) ) {
				let source      = window.location.hash.replace( '#add_new', '' );
				let defaultArgs = {};

				if ( source ) {
					defaultArgs.listing_source = source.replace( '__', '' );
				}

				self.openPopup( false, defaultArgs );
			}

		},

		applyCustomOptions: function() {

			var $popup = $( '.jet-listings-popup' );

			if ( window.JetListingsSettings.exclude ) {
				for ( var i = 0; i < window.JetListingsSettings.exclude.length; i++ ) {
					$popup.find( '*[name="' + window.JetListingsSettings.exclude[ i ] + '"]' ).closest( '.jet-listings-popup__form-row' ).hide();
				}
			}

			if ( window.JetListingsSettings.button && window.JetListingsSettings.button.css_class ) {
				$popup.find( '#templates_type_submit' ).addClass( window.JetListingsSettings.button.css_class );
			}

		},

		ajaxSubmit: function( event ) {

			event.preventDefault();

			let self = JetListings;

			let formEl = document.getElementById( 'templates_type_form' );
			let formData = new FormData( formEl );

			self.setSubmitLoadingState( formEl, true );

			const values = {};

			for( var data of formData.entries() ) {
				values[ data[0] ] = data[1];
			}

			values['_is_ajax_form'] = true;

			$.ajax( {
				url: formEl.action,
				type: 'POST',
				dataType: 'json',
				data: values,
			} ).done( function( response ) {

				if ( response.success && self.editorControl ) {

					let options = self.editorControl.model.get( 'options' );
					let listingID = response.data.id;

					options[ listingID ] = response.data.title;
					self.editorControl.model.set( 'options', options );
					self.editorControl.setValue( listingID );

					let onElementorAjaxComplete = function( event, xhr, settings ) {

						if (
							! settings.data
							|| ! settings.data.includes( 'action=elementor_ajax' )
							|| ! settings.data.includes( 'render_widget' )
						) {
							return;
						}

						$( document )
							.off( 'ajaxComplete.JetListings', onElementorAjaxComplete )
							.off( 'ajaxError.JetListings', onElementorAjaxComplete );

						self.setSubmitLoadingState( formEl, false );
						self.closePopup();

					};

					// Wait for Elementor to finish re-rendering the Listing Grid widget after the new listing ID is set.
					$( document )
						.on( 'ajaxComplete.JetListings', onElementorAjaxComplete )
						.on( 'ajaxError.JetListings', onElementorAjaxComplete );

					self.editorControl.render();

					let previewWindow = window.elementor.$preview[0].contentWindow;

					previewWindow.elementorCommon.api.internal( 'panel/state-loading' );
					previewWindow.elementorCommon.api.run( 'editor/documents/switch', {
						id: listingID
					} ).then( function() {
						return previewWindow.elementorCommon.api.internal( 'panel/state-ready' );
					} );

				} else {
					self.setSubmitLoadingState( formEl, false );
				}

			} ).fail( function() {
				self.setSubmitLoadingState( formEl, false );
			} );

		},

		setSubmitLoadingState: function( formEl, isLoading ) {

			let $submit = $( formEl ).find( '#templates_type_submit' );

			$submit
				.toggleClass( 'jet-listings-popup__submit--is-loading', isLoading )
				.attr( 'disabled', isLoading ? 'disabled' : false );

		},

		switchListingSources: function( event ) {

			var $this = $( this );
			JetListings.switchFieldsVisibility( $this );

		},

		switchFieldsVisibility: function( $source ) {

			let val  = $source.find( 'option:selected' ).val();
			let $row = $source.closest( '.jet-listings-popup__form-row' );

			$row.siblings( '.jet-template-listing' ).removeClass( 'jet-template-act' );
			$row.siblings( '.jet-template-' + val ).addClass( 'jet-template-act' );
		},

		saveListingSettings: function() {

			let $this    = $( this );
			let formEl   = $this.closest( 'form' )[0];

			if ( window.JetPlugins ) {
				formEl = window.JetPlugins.hooks.applyFilters( 'jetEngine.listing.formEl', formEl, $this );
			}

			const formData = new FormData( formEl );
			const values   = {};

			for( var data of formData.entries() ) {
				values[ data[0] ] = data[1];
			}

			values._listing_id  = $this.data( 'listing-id' );
			values._open_editor = $this.hasClass( 'open-editor' );
			values.action       = 'jet_engine_save_listing_settings';
			values._nonce       = window.JetListingsSettings._nonce;

			$this.attr( 'disabled', 'disabled' );
			$this.siblings().attr( 'disabled', 'disabled' );

			$.ajax( {
				url: ajaxurl,
				type: 'POST',
				dataType: 'json',
				data: values
			} ).done( function( response ) {

				if ( response.success && response.data.redirect ) {
					window.location = response.data.redirect;
				} else {
					window.location.reload();
				}

			} ).fail( function() {
				$this.attr( 'disabled', false );
				$this.siblings().attr( 'disabled', false );
			} );

		},

		loadEditPopup: function( event ) {

			if ( JetListings.editButton ) {
				JetListings.editButton.removeClass( 'jet-engine-listing-edit-settings--is-loading' );
			}

			if ( JetListings.editXHR ) {
				JetListings.editXHR.abort();
			}

			JetListings.editButton = $( this );

			JetListings.editButton.addClass( 'jet-engine-listing-edit-settings--is-loading' );

			JetListings.editXHR = $.ajax( {
				url: ajaxurl,
				type: 'POST',
				dataType: 'json',
				data: {
					action: 'jet_engine_get_edit_listing_popup',
					listing_id: JetListings.editButton.data( 'listing-id' ),
					_nonce: window.JetListingsSettings._nonce,
				}
			} ).done( function( response ) {

				if ( response.success ) {
					let $popup = $( response.data );
					$popup.addClass( 'jet-listings-popup-active' );
					JetListings.switchFieldsVisibility( $popup.find( '#listing_source' ) );
					$( 'body' ).append( $popup );
				}

				JetListings.editButton.removeClass( 'jet-engine-listing-edit-settings--is-loading' );
				JetListings.editXHR = null;
				JetListings.editButton = null;

			} );

		},

		openPopup: function( event, defaultArgs ) {

			if ( event ) {
				event.preventDefault();
			}

			let $popup = $( '.jet-listings-popup.jet-listings-popup--new' );

			if ( window.JetPlugins ) {
				$popup = window.JetPlugins.hooks.applyFilters( 'jetEngine.listing.popup', $popup, event, defaultArgs );
			}

			$popup.first().addClass( 'jet-listings-popup-active' );

			if ( defaultArgs ) {
				for ( const arg in defaultArgs ) {
					$( '#' + arg ).val( defaultArgs[ arg ] ).trigger( 'change' );
				}
			}

		},

		closePopup: function() {

			let $this = $( this );
			let $popup = $this.closest( '.jet-listings-popup' );

			if ( ! $popup.length ) {
				$popup = $( '.jet-listings-popup' );
			}

			// Reset the submit button state in case the popup was closed while loading
			// or reused without a full page reload.
			JetListings.setSubmitLoadingState(
				$popup.first().find( '#templates_type_form' )[0],
				false
			);

			if ( $popup.hasClass( 'jet-listings-popup--new' )
				|| $popup.hasClass( 'jet-listings-popup--keep-alive' )
			) {
				$popup.removeClass( 'jet-listings-popup-active' );
				window.history.pushState( "", document.title, window.location.pathname + window.location.search );
			} else {
				$popup.remove();
			}

		}

	};

	JetListings.init();

	window.JetListings = JetListings;

})( jQuery );
