( function( $ ) {
	if ( 'undefined' != typeof elementor && 'undefined' !== elementorCommon ) {
		elementor.on( 'preview:loaded', function() {
			var $modal;
			var $buttons = $( '#tmpl-elementor-add-section' ), text = $buttons.text().replace(
    				'<div class="elementor-add-section-drag-title',
    				'<div class="elementor-add-section-area-button fox-library-modal-btn" title="Library of Predefined Elements">Fox Studio +</div><div class="elementor-add-section-drag-title'
    			);

			$buttons.text( text );
			// Call modal.
			$( elementor.$previewContents[0].body ).on( 'click', '.fox-library-modal-btn', function() {
				if ( $modal ) {
					$modal.show();
					return;
				}
				$modal = elementorCommon.dialogsManager.createWidget( 'lightbox', {
					id           : 'fox-library-modal',
					headerMessage: $( '#tmpl-elementor-fox-library-modal-header' ).html(),
					message      : $( '#tmpl-elementor-fox-library-modal' ).html(),
					className    : 'elementor-templates-modal',
					closeButton  : true,
					draggable    : false,
					hide         : { onOutsideClick: true, onEscKeyPress : true },
					position     : { my: 'center', at: 'center' }
				} );
				$modal.show();
				loadTemplateLibrary();
			} );

			// Load items.
			function loadTemplateLibrary() {
				showLoader();
				$.ajax( {
					url     : FOX_ELEMENTOR_LIB.list_url,
					method  : 'GET',
					dataType: 'json',
					success : function( response ) {
                        response.status = 'success'
                        response.defaultTab = 'tab-blocks'
						if ( response && response.status && ( 'success' == response.status ) && response.defaultTab ) {
							var itemTemplate = wp.template( 'elementor-fox-library-modal-item' ),
								itemTabTitleTemplate = wp.template( 'elementor-fox-library-tab-title-item' ),
								itemTabContentTemplate = wp.template( 'elementor-fox-library-tab-content' ),
								itemOrderTemplate = wp.template( 'elementor-fox-library-modal-order' );

                            $( itemTabTitleTemplate( response.tabs ) ).appendTo( $( '#fox-library-modal #elementor-template-library-header-menu' ) );
							$( itemTabContentTemplate( response.tabs ) ).appendTo( $( '#fox-library-modal #elementor-template-library-templates' ) );

							_.each( response.library, function( data, tab ) {
								data.elements = data.elements.reverse();
								$( itemTemplate( data ) ).appendTo( $( '#fox-library-modal .elementor-template-library-tab-content.elementor-template-library-' + tab + ' .elementor-template-library-templates-container' ) );
								$( itemOrderTemplate( data ) ).appendTo( $( '#fox-library-modal .elementor-template-library-tab-content.elementor-template-library-' + tab + ' .elementor-template-library-filter-toolbar-remote' ) );
							} );

							initElemenetsPosition( $( '#fox-library-modal #elementor-template-library-templates' ).children().first() );
							$( window ).resize( function() {
								var $tabs = $( '#fox-library-modal #elementor-template-library-templates' ).children(), $activeTab = $tabs.filter( '.show' ),
									$list = $activeTab.length ? $activeTab : $tabs.first();
								initElemenetsPosition( $list.find( '.elementor-template-library-templates-container' ).children() );
							} );
							$( '#fox-library-modal #elementor-template-library-templates img' ).on( 'load', function() {
								var $container = $( this ).closest( '.elementor-template-library-templates-container' ), cols = 3,
									$list = $container.children(), $current = $( this ).closest( '.elementor-template-library-template' ),
									length = $list.length, currentIndex = $list.index( $current ), start = Math.floor( currentIndex / 3 ) * 3;
								if ( $container.parent().hasClass( 'active-tab' ) ) {
									for ( var i = Math.max( start, 3 ); i < length; i++ ) {
										$list.eq( i ).css( 'margin-top', '' );
										setElementPosition( $list.eq( i ), $list.eq( i - cols ) );
									}
								}
							} );

							importTemplate();
							activeDefaultTab( response.defaultTab );
							hideLoader();
						} else {
							$( '<div>', { 'class': 'fox-notice fox-error', 'text': 'The library can\'t be loaded from the server.' } )
                                .prependTo( $( '#fox-library-modal #elementor-template-library-templates' ) );
							hideLoader();
						}
					},
					error: function() {
						$( '<div>', { 'class': 'fox-notice fox-error', 'text': 'The library can\'t be loaded from the server.' } )
                            .prependTo( $( '#fox-library-modal #elementor-template-library-templates' ) );
						hideLoader();
					}
				} );
			}

			// Change current elementor's position
			function setElementPosition( $elementCurrent, $elementAbove ) {
				if ( 'none' != $elementCurrent.css( 'display' ) ) {
					var marginTop = $elementAbove.offset().top + $elementAbove.outerHeight() + 30;
					$elementCurrent.css( 'margin-top', marginTop - $elementCurrent.offset().top );
				}
			}

			// Init elements
			function initElemenetsPosition( $list ) {
				$list = $list.css( 'margin-top', '' ).not( '.invisible-item' );
				var cols = 3, length = $list.length;
				$list.css( 'margin-top', '' );
				for ( var i = cols; i < length; i ++ ) {
					setElementPosition( $list.eq( i ), $list.eq( i - cols ) );
				}
			}

			// Loader
			function showLoader() {
				$( '#fox-library-modal #elementor-template-library-templates' ).hide();
				$( '#fox-library-modal .elementor-loader-wrapper' ).show();
			}

			function hideLoader() {
				$( '#fox-library-modal #elementor-template-library-templates' ).show();
				$( '#fox-library-modal .elementor-loader-wrapper' ).hide();
			}

			function activateUpdateButton() {
				$( '#elementor-panel-saver-button-publish' ).removeClass( 'elementor-disabled' );
				$( '#elementor-panel-saver-button-save-options' ).removeClass( 'elementor-disabled' );
			}

			// Import.
			function importTemplate() {
				$( '#fox-library-modal' ).on( 'click', '.elementor-template-library-template-insert', function() {
					showLoader();
                    var $message = $( '#fox-library-modal #elementor-template-library-templates .fox-notice' );
                    if ( $message.length ) {
                        $message.remove();
                    }
					return elementorCommon.ajax.addRequest( 'get_template_data', {
						data: {
							source: 'fox',
							edit_mode: true,
							display : true,
							template_id: $( this ).data( 'id' ),
							with_page_settings: false
						},
						success: function success( data ) {
							if ( data && data.content ) {
								elementor.getPreviewView().addChildModel( data.content );
								$modal.hide();
								setTimeout( function() {
									hideLoader();
								}, 2000 );
								activateUpdateButton();
							} else {
								$( '<div>', { 'class': 'fox-notice fox-error', 'text': 'The element can\'t be loaded from the server.' } )
                                    .prependTo( $( '#fox-library-modal #elementor-template-library-templates' ) );
								hideLoader();
							}
						},
						error: function() {
							$( '<div>', { 'class': 'fox-notice fox-error', 'text': 'The element can\'t be loaded from the server.' } )
                                .prependTo( $( '#fox-library-modal #elementor-template-library-templates' ) );
							hideLoader();
						}
					} );
				} ).on( 'click', '.elementor-templates-modal__header__close', function() {
					$modal.hide();
					hideLoader();
				} ).on( 'click', '.elementor-template-library-menu-item', function() {
					if ( ! $( this ).hasClass( 'elementor-active' ) ) {
						var $elem = $( '#fox-library-modal .elementor-template-library-tab-content' ).filter( '.' + $( this ).data( 'tab' ) );
						$( this ).siblings().removeClass( 'elementor-active' );
						$( this ).addClass( 'elementor-active' );
						$( '#fox-library-modal .elementor-template-library-tab-content' ).hide().removeClass( 'active-tab' )
							.filter( '.' + $( this ).data( 'tab' ) ).show().addClass( 'active-tab' );
						initElemenetsPosition( $elem.find( '.elementor-template-library-templates-container' ).children() );
					}
				} );

				// Search.
				$( '#fox-library-modal .elementor-template-library-filter-text-wrapper input' ).on( 'keyup', function() {
					var val = $( this ).val().toLowerCase(),
						$container = $( this ).closest( '.elementor-template-library-tab-content' ).first();
					$container.find( '.elementor-template-library-template-block' ).each( function() {
						var $this = $( this ), title = $this.data( 'title' ).toLowerCase(), slug = $this.data( 'slug' ).toLowerCase();
						( title.indexOf( val ) > -1 || slug.indexOf( val ) > -1 ) ? $this.show().removeClass( 'invisible-item' ) : $this.hide().addClass( 'invisible-item' );
					} );
					initElemenetsPosition( $container.find( '.elementor-template-library-template-block' ).not( '.invisible-item' ) );
				} );

				// Filters.
				$( '#fox-library-modal input[name="fox-block-cat"]' ).on( 'change', function() {
					var val = $( this ).val(),
						$container = $( this ).closest( '.elementor-template-library-tab-content' ).first();
                    
					$container.find( '.elementor-template-library-template-block' ).each( function() {
						var $this = $( this ), tag = $this.data( 'tag' ).toLowerCase();
						( 'all' === val || tag.indexOf( val ) > -1 ) ? $this.show().removeClass( 'invisible-item' ) : $this.hide().addClass( 'invisible-item' );
					} );
					initElemenetsPosition( $container.find( '.elementor-template-library-template-block' ).not( '.invisible-item' ) );
				} );
			}
			function activeDefaultTab( tabID ) {
				var $tabs = $( '#fox-library-modal .elementor-template-library-menu-item' );
				if ( $tabs.length ) {
					var $defaultTab = $tabs.filter( '[data-tab=elementor-template-library-' + tabID + ']' );
					$defaultTab.length ? $defaultTab.trigger( 'click' ) : $tabs.first().trigger( 'click' );
				}
			}
		} );
	}
} ) ( jQuery );
