/**
 * TemplatesPanelViewBackend provides the core template management interface for the backend editor.
 *
 * It handles template saving, loading, previewing, and deletion with AJAX operations.
 *
 * @since 4.4
 */

( function ( $ ) {
	'use strict';
	if ( _.isUndefined( window.vc ) ) {
		window.vc = {};
	}

	vc.TemplatesPanelViewBackend = vc.PanelView.extend({
		// new feature -> elements filtering
		$name: false,
		$list: false,
		template_load_action: 'vc_backend_load_template',
		templateLoadPreviewAction: 'vc_load_template_preview',
		save_template_action: 'vc_save_template',
		delete_template_action: 'vc_delete_template',
		appendedTemplateType: 'my_templates',
		appendedTemplateCategory: 'my_templates',
		appendedCategory: 'my_templates',
		appendedClass: 'my_templates',
		loadUrl: window.ajaxurl,
		events: $.extend( vc.PanelView.prototype.events, {
			'click .vc_template-save-btn': 'saveTemplate',
			'click [data-template_id] [data-template-handler]': 'loadTemplate',
			'click .vc_template-delete-icon': 'removeTemplate'
		}),
		initialize: function () {
			_.bindAll( this, 'checkInput', 'saveTemplate' );
			vc.TemplatesPanelViewBackend.__super__.initialize.call( this );
		},
		render: function () {
			this.$el.css( 'left', ( $( window ).width() - this.$el.width() ) / 2 );
			this.$name = this.$el.find( '[data-js-element="vc-templates-input"]' );
			this.$name.off( 'keypress' ).on( 'keypress', this.checkInput );
			this.$list = this.$el.find( '.vc_templates-list-my_templates' );
			return vc.TemplatesPanelViewBackend.__super__.render.call( this );
		},
		/**
		 * Save My Template
		 *
		 * @param e
		 * @return {boolean}
		 */
		saveTemplate: function ( e ) {
			if ( e && e.preventDefault ) {
				e.preventDefault();
			}
			var name, data, shortcodes, _this;
			name = this.$name.val();
			_this = this;
			shortcodes = this.getPostContent();
			if ( !shortcodes.trim().length ) {
				this.showMessage( window.i18nLocale.template_is_empty, 'error' );
				return false;
			}
			data = {
				action: this.save_template_action,
				template: shortcodes,
				template_name: name,
				vc_inline: true,
				_vcnonce: window.vcAdminNonce
			};
			this
				.setButtonMessage( undefined, undefined )
				.reloadTemplateList( data, function () {
					// success
					_this.$name.val( '' ).trigger( 'change' );
				}, function () {
					// error
					_this.showMessage( window.i18nLocale.template_save_error, 'error' );
					_this.clearButtonMessage();
				});
		},
		checkInput: function ( e ) {
			if ( 13 === e.which ) {
				this.saveTemplate();
				return false;
			}
		},
		/**
         * Remove template from server database.
         *
         * @param e - Event object
         */
		removeTemplate: function ( e ) {
			if ( e && e.preventDefault ) {
				e.preventDefault();
			}
			if ( e && e.stopPropagation ) {
				e.stopPropagation();
			}
			var $button = $( e.target );
			var $template = $button.closest( '[data-template_id]' );
			var templateName = $template.find( '[data-vc-ui-element="template-title"]' ).text();
			var answer = confirm( window.i18nLocale.confirm_deleting_template.replace( '{template_name}',
				templateName ) );
			if ( answer ) {
				var templateId = $template.data( 'template_id' );
				var templateType = $template.data( 'template_type' );
				var templateAction = $template.data( 'template_action' );
				$template.remove();
				$.ajax({
					type: 'POST',
					url: window.ajaxurl,
					data: {
						action: templateAction ? templateAction : this.delete_template_action,
						template_id: templateId,
						template_type: templateType,
						vc_inline: true,
						_vcnonce: window.vcAdminNonce
					},
					context: this
				}).done( function () {
					this.showMessage( window.i18nLocale.template_removed, 'success' );
					vc.events.trigger( 'templates:delete', {
						id: templateId,
						type: templateType
					});
				});
			}
		},
		reloadTemplateList: function ( data, successCallback, errorCallback ) {
			var _this = this;
			$.ajax({
				type: 'POST',
				url: window.ajaxurl,
				data: data,
				context: this
			}).done( function ( html ) {
				_this.filter = false; // reset current filter
				if ( !_this.$list ) {
					_this.$list = _this.$el.find( '.vc_templates-list-my_templates' );
				}
				_this.$list.prepend( $( html ) );
				if ( 'function' === typeof successCallback ) {
					successCallback( html );
				}
			}).fail( 'function' === typeof errorCallback ? errorCallback : function () {
			});
		},
		getPostContent: function () {
			return vc.shortcodes.stringify( 'template' );
		},
		loadTemplate: function ( e ) {
			if ( e && e.preventDefault ) {
				e.preventDefault();
			}
			if ( e && e.stopPropagation ) {
				e.stopPropagation();
			}
			var $template = $( e.target ).closest( '[data-template_id][data-template_type]' );
			$.ajax({
				type: 'POST',
				url: this.loadUrl,
				data: {
					action: this.template_load_action,
					template_unique_id: $template.data( 'template_id' ),
					template_type: $template.data( 'template_type' ),
					vc_inline: true,
					_vcnonce: window.vcAdminNonce
				},
				context: this
			}).done( this.renderTemplate );
		},
		renderTemplate: function ( html ) {
			var models;

			_.each( vc.filters.templates, function ( callback ) {
				html = callback( html );
			});
			models = vc.storage.parseContent({}, html );
			_.each( models, function ( model ) {
				vc.shortcodes.create( model );
				vc.latestAddedElement = vc.shortcodes.get( model.id );
			});
			vc.events.trigger( 'templateAdd' );
			vc.closeActivePanel();
		},
		buildTemplatePreview: function ( e ) {
			if ( e && e.preventDefault ) {
				e.preventDefault();
			}
			try {
				var url, $el = $( e.currentTarget );
				var $wrapper = $el.closest( '[data-template_id]' );
				if ( !$wrapper.hasClass( 'vc_active' ) && !$wrapper.hasClass( 'vc_loading' ) ) {
					var $localContent = $wrapper.find( '[data-js-content]' );
					var localContentChilds = $localContent.children().length > 0;
					this.$content = $localContent;
					if ( this.$content.find( 'iframe' ).length ) {
						$el.vcAccordion( 'collapseTemplate' );
						return true;
					}
					var _this = this;
					$el.vcAccordion( 'collapseTemplate', function () {
						var templateId = $wrapper.data( 'template_id' );
						var templateType = $wrapper.data( 'template_type' );
						if ( templateId && !localContentChilds ) {
							var question = '?';
							if ( window.ajaxurl.indexOf( '?' ) > - 1 ) {
								question = '&';
							}
							url = window.ajaxurl + question + $.param({
								action: _this.templateLoadPreviewAction,
								template_unique_id: templateId,
								template_type: templateType,
								vc_inline: true,
								post_id: window.vc_post_id, // set in the backend_editor.tpl.php
								_vcnonce: window.vcAdminNonce
							});
							$el.find( 'i' ).addClass( 'vc_ui-wp-spinner' );

							_this.$content.html( '<iframe style="width: 100%;" data-vc-template-preview-frame="' + templateId + '"></iframe>' );
							var $frame = _this.$content.find( '[data-vc-template-preview-frame]' );
							$frame.attr( 'src', url );
							$wrapper.addClass( 'vc_loading' );
							$frame.on( 'load', function () {
								$wrapper.removeClass( 'vc_loading' );
								$el.find( 'i' ).removeClass( 'vc_ui-wp-spinner' );
							});
						}
					});
				} else {
					$el.vcAccordion( 'collapseTemplate' );
				}
			} catch ( err ) {
				if ( window.console && window.console.warn ) {
					window.console.warn( 'buildTemplatePreview error', err );
				}
				this.showMessage( 'Failed to build preview', 'error' );
			}
		},
		/**
         * Set template iframe height
         * @param height (int) optional
         */
		setTemplatePreviewSize: function ( height ) {
			var iframe = this.$content.find( 'iframe' );
			if ( iframe.length > 0 ) {
				iframe = iframe[ 0 ];
				if ( undefined === height ) {
					iframe.height = iframe.contentWindow.document.body.offsetHeight;
					height = iframe.contentWindow.document.body.scrollHeight;
				}
				iframe.height = height + 'px';
			}
		}
	});

	window.vc.TemplateWindowUIPanelBackendEditor = vc.TemplatesPanelViewBackend
		.vcExtendUI( vc.HelperPanelViewHeaderFooter )
		.vcExtendUI( vc.HelperTemplatesPanelViewSearch )
		.extend({
			panelName: 'template_window',
			showMessageDisabled: false,
			initialize: function () {
				window.vc.TemplateWindowUIPanelBackendEditor.__super__.initialize.call( this );
				this.trigger( 'show', this.initTemplatesTabs, this );
			},
			show: function () {
				this.clearSearch();
				window.vc.TemplateWindowUIPanelBackendEditor.__super__.show.call( this );
			},
			initTemplatesTabs: function () {
				this.$el.find( '[data-vc-ui-element="panel-tabs-controls"]' ).vcTabsLine( 'moveTabs' );
			},
			showMessage: function ( text, type ) {
				var wrapperCssClasses;
				if ( this.showMessageDisabled ) {
					return false;
				}
				wrapperCssClasses = 'vc_col-xs-12 wpb_element_wrapper';
				if ( this.message_box_timeout ) {
					this.$el.find( '[data-vc-panel-message]' ).remove();
					window.clearTimeout( this.message_box_timeout );
				}
				this.message_box_timeout = false;
				var messageBoxTemplate = vc.template( '<div class="vc_message_box vc_message_box-standard vc_message_box-rounded vc_color-<%- color %>">' + '<div class="vc_message_box-icon"><i class="fa fa fa-<%- icon %>"></i></div><p><%- text %></p></div>' );
				var $messageBox;
				switch ( type ) {
					case 'error': {
						$messageBox = $( '<div class="' + wrapperCssClasses + '" data-vc-panel-message>' ).html( messageBoxTemplate({
							color: 'danger',
							icon: 'times',
							text: text
						}) );
						break;
					}
					case 'warning': {
						$messageBox = $( '<div class="' + wrapperCssClasses + '" data-vc-panel-message>' ).html( messageBoxTemplate({
							color: 'warning',
							icon: 'exclamation-triangle',
							text: text
						}) );
						break;
					}
					case 'success': {
						$messageBox = $( '<div class="' + wrapperCssClasses + '" data-vc-panel-message>' ).html( messageBoxTemplate({
							color: 'success',
							icon: 'check',
							text: text
						}) );
						break;
					}
				}
				$messageBox.prependTo( this.$el.find( '[data-vc-ui-element="panel-edit-element-tab"].vc_row.vc_active' ) );
				$messageBox.fadeIn();
				this.message_box_timeout = window.setTimeout( function () {
					$messageBox.remove();
				}, 6000 );
			},
			changeTab: function ( e ) {
				if ( e && e.preventDefault ) {
					e.preventDefault();
				}
				if ( e && !e.isClearSearch ) {
					this.clearSearch();
				}
				var $tab = $( e.currentTarget );
				if ( !$tab.parent().hasClass( 'vc_active' ) ) {
					this.$el.find( '[data-vc-ui-element="panel-tabs-controls"] .vc_active:not([data-vc-ui-element="panel-tabs-line-dropdown"])' ).removeClass( 'vc_active' );
					$tab.parent().addClass( 'vc_active' );
					this.$el.find( '[data-vc-ui-element="panel-edit-element-tab"].vc_active' ).removeClass( 'vc_active' );
					this.$el.find( $tab.data( 'vcUiElementTarget' ) ).addClass( 'vc_active' );
					if ( this.$tabsMenu ) {
						this.$tabsMenu.vcTabsLine( 'checkDropdownContainerActive' );
					}
				}
			},
			setPreviewFrameHeight: function ( templateID, height ) {
				if ( parseInt( height, 10 ) < 100 ) {
					height = 100;
				}
				$( 'data-vc-template-preview-frame="' + templateID + '"' ).height( height );
			}
		});

	window.vc.TemplateWindowUIPanelBackendEditor.prototype.events = $.extend( true,
		window.vc.TemplateWindowUIPanelBackendEditor.prototype.events,
		{
			// header footer
			'click [data-vc-ui-element="button-save"]': 'save', // need to save, hide into this code.
			'click [data-vc-ui-element="button-close"]': 'hide',
			'touchstart [data-vc-ui-element="button-close"]': 'hide',
			'click [data-vc-ui-element="button-minimize"]': 'toggleOpacity',
			// search
			'keyup [data-vc-templates-name-filter]': 'searchTemplate',
			'search [data-vc-templates-name-filter]': 'searchTemplate',
			// templates
			'click .vc_template-save-btn': 'saveTemplate',
			'click [data-template_id] [data-template-handler]': 'loadTemplate',
			'click [data-vc-container=".vc_ui-list-bar"][data-vc-preview-handler]': 'buildTemplatePreview',
			'click [data-vc-ui-delete="template-title"]': 'removeTemplate',
			'click [data-vc-ui-element="panel-tab-control"]': 'changeTab'
		});

})( window.jQuery );
