/* global FusionPageBuilderViewManager */
var FusionPageBuilder = FusionPageBuilder || {};

( function() {

	jQuery( document ).ready( function() {

		// Image Carousel Child View.
		FusionPageBuilder.fusion_image = FusionPageBuilder.ChildElementView.extend( {

			/**
			 * Runs during render() call.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			onRender: function() {
				var parentView,
					queryData = this.model.get( 'query_data' );

				if ( 'undefined' !== typeof this.model.attributes.selectors ) {
					this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
					this.setElementAttributes( this.$el, this.model.attributes.selectors );
				}

				// Update the parent image map with latest query data images.
				if ( 'undefined' !== typeof queryData ) {
					parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
					parentView.updateImageMap( queryData );
				}
			},

			/**
			 * Runs after view DOM is patched.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			beforePatch: function() {
				var parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
					queryData = this.model.get( 'query_data' );

				if ( true === parentView.model.attributes.showPlaceholder && 'undefined' !== typeof this.model.attributes.params.image && '' !== this.model.attributes.params.image ) {
					this.$el.closest( '.fusion-image-carousel' ).removeClass( 'fusion-show-placeholder' );
					parentView.model.attributes.showPlaceholder = false;
				}

				// Update the parent image map with latest query data images.
				if ( 'undefined' !== typeof queryData ) {
					parentView.updateImageMap( queryData );
				}

			},

			/**
			 * Runs before element is removed.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			beforeRemove: function() {
				var parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );

				if ( false === parentView.model.attributes.showPlaceholder && 1 === parentView.model.children.length ) {
					this.$el.closest( '.fusion-image-carousel' ).addClass( 'fusion-show-placeholder' );
					parentView.model.attributes.showPlaceholder = true;
				}
			},

			/**
			 * Runs after view DOM is patched.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			afterPatch: function() {
				var parentCid = this.model.get( 'parent' ),
					parentView,
					queryData = this.model.get( 'query_data' );

				if ( 'undefined' !== typeof this.model.attributes.selectors ) {
					this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
					this.setElementAttributes( this.$el, this.model.attributes.selectors );
				}

				// Force re-render for child option changes.
				setTimeout( function() {
					jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).trigger( 'fusion-element-render-fusion_images', parentCid );
				}, 10 );

				// Update the parent image map with latest query data images.
				if ( 'undefined' !== typeof queryData ) {
					parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
					parentView.updateImageMap( queryData );
				}

				// Using non debounced version for smoothness.
				this.refreshJs();
			},

			/**
			 * Modify template attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			filterTemplateAtts: function( atts ) {
				var attributes = {};

				// Validate values.
				this.validateValues( atts.values );
				this.buildAttr( atts.values );
				this.extras = atts.extras;

				// Set selectors.
				this.wrapperSelector();

				// Create attribute objects
				attributes.attrCarouselLink = this.buildCarouselLinkAttr( atts );
				attributes.attrImageWrapper = this.buildImageWrapperAttr( atts );
				attributes.attrItemWrapper  = this.buildItemWrapperAttr( atts );
				attributes.imageElement     = this.buildImageElement( atts );
				attributes.parentValues     = atts.parentValues;
				attributes.captionHtml      = this.generateCaption( atts.parentValues, atts.values, atts.query_data );

				// Any extras that need passed on.
				attributes.cid         = this.model.get( 'cid' );
				attributes.parent      = this.model.get( 'parent' );
				attributes.output      = atts.values.element_content;
				attributes.mouseScroll = atts.values.mouse_scroll;
				attributes.link        = atts.values.link;
				attributes.lightbox    = atts.parentValues.lightbox;

				attributes.usingDynamicParent = this.isParentHasDynamicContent( atts.parentValues );

				return attributes;
			},

			/**
			 * Modifies the values.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {void}
			 */
			validateValues: function( values ) {

				// Make sure the title text is not wrapped with an unattributed p tag.
				if ( 'undefined' !== typeof values.element_content ) {
					values.element_content = values.element_content.trim();
					values.element_content = values.element_content.replace( /(<p[^>]+?>|<p>|<\/p>)/img, '' );
				}
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @return {Object}
			 */
			buildAttr: function() {
				var attr = {
					class: 'swiper-slide'
				};

				this.model.set( 'selectors', attr );
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildItemWrapperAttr: function( atts ) {
				var attr = {
						class: 'fusion-carousel-item-wrapper'
					},
					parentValues = atts.parentValues;

				if ( -1 !== jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
					attr[ 'class' ] +=  ' awb-imageframe-style awb-imageframe-style-' + parentValues.caption_style;
				}

				return attr;
			},

			/**
			 * Set image element.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildImageElement: function( atts ) {
				var html         = '',
					imageSize    = 'full',
					values       = atts.values,
					parentValues = atts.parentValues,
					queryData    = atts.query_data,
					parentView   = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );

				if ( 'fixed' === parentValues.picture_size ) {
					imageSize = 'portfolio-two';
					if ( '6' === parentValues.columns || '5' === parentValues.columns || '4' === parentValues.columns ) {
						imageSize = 'blog-medium';
					}
				}

				if ( 'undefined' !== typeof queryData && 'undefined' !== typeof queryData[ values.image ] ) {
					html = queryData[ values.image ][ imageSize ];
				} else if ( 'undefined' !== typeof parentView.imageMap[ values.image ] ) {
					html = parentView.imageMap[ values.image ][ imageSize ];
				} else {
					html = '<img src="' + values.image + '" alt="' + values.alt + '"/>';
				}

				if ( -1 === jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
					html += this.generateCaption( parentValues, values, queryData );
				}

				return html;
			},

			/**
			 * Set selectors.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			wrapperSelector: function() {
				var wrapperSelector = {
					class: 'swiper-slide'
				};

				this.model.set( 'selectors', wrapperSelector );
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildCarouselLinkAttr: function( atts ) {
				var attr         = {},
					values       = atts.values,
					parentValues = atts.parentValues,
					queryData    = atts.query_data;

				if ( 'yes' === parentValues.lightbox ) {

					if ( ! values.link || null === values.link ) {
						values.link = values.image;
					}

					attr[ 'data-rel' ] = 'iLightbox[image_carousel_' + this.model.get( 'parent' ) + ']';

					if ( 'undefined' !== typeof queryData && 'undefined' !== typeof queryData.image_data ) {
						attr[ 'data-caption' ] = queryData.image_data.caption;
						attr[ 'data-title' ]   = queryData.image_data.title;
						attr[ 'aria-label' ]   = queryData.image_data.title;
					}
				}

				attr.href = values.link;

				attr.target = values.linktarget;
				if ( '_blank' === values.linktarget ) {
					attr.rel = 'noopener noreferrer';
				}

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildImageWrapperAttr: function( atts ) {
				var attr     = {
						class: 'fusion-image-wrapper'
					},
					parentValues = atts.parentValues;

				if ( parentValues.hover_type && -1 !== jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
					attr[ 'class' ] += ' hover-type-' + parentValues.hover_type;
				}

				// Caption style.
				if ( -1 === jQuery.inArray( parentValues.caption_style, [ 'off', 'above', 'below' ] ) ) {
					attr[ 'class' ] += ' awb-imageframe-style awb-imageframe-style-' + parentValues.caption_style;
				}

				return attr;
			},

			/**
			 * Generate caption markup.
			 *
			 * @since 3.5
			 * @param {string} values - The values object.
			 * @return {string}
			 */
			generateCaption: function( values, childValues, queryData ) { // eslint-disable-line no-unused-vars
				var content = '<div class="awb-imageframe-caption-container"><div class="awb-imageframe-caption">',
					parentView,
					image,
					title = '',
					caption = '',
					title_tag = '';

				if ( 'off' === values.caption_style ) {
					return '';
				}

				parentView = FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
				image      = parentView.imageMap[ childValues.image ];

				if ( 'undefined' === typeof image || 'undefined' === typeof image.image_data ) {
					return '';
				}

				// from image data.
				if ( image.image_data.title ) {
					title = image.image_data.title;
				}
				if ( image.image_data.caption ) {
					caption = image.image_data.caption;
				}

				// from element data.
				if ( '' !== childValues.image_title ) {
					title = childValues.image_title;
				}
				if ( '' !== childValues.image_caption ) {
					caption = childValues.image_caption;
				}

				if ( '' !== title ) {
					title_tag = 'div' === values.caption_title_tag ? 'div' : 'h' + values.caption_title_tag;
					content += '<' + title_tag + ' class="awb-imageframe-caption-title">' + title + '</' + title_tag + '>';
				}

				if ( '' !== caption ) {
					content += '<p class="awb-imageframe-caption-text">' + caption + '</p>';
				}
				content += '</div></div>';

				return content;
			}
		} );
	} );
}( jQuery ) );