/* global fusionAllElements, FusionPageBuilderElements */
/* eslint no-unused-vars: 0 */

var FusionPageBuilder = FusionPageBuilder || {};

( function() {

	jQuery( document ).ready( function() {

		// Counter flip box view
		FusionPageBuilder.fusion_flip_box = FusionPageBuilder.ChildElementView.extend( {

			/**
			 * Runs during render() call.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			onRender: function() {

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

			/**
			 * Runs after view DOM is patched.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			afterPatch: function() {

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

				// 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 computedAtts;

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

				if ( atts.usingDynamicParent ) {
					atts.values.usingDynamicParent = true;
				}

				computedAtts = this.computeAtts( atts.values );

				atts.cid    = this.model.get( 'cid' );
				atts.parent = this.model.get( 'parent' );

				atts.flipBoxShortcodeBackBox  = computedAtts.flipBoxShortcodeBackBox;
				atts.flipBoxAttributes        = computedAtts.flipBoxAttributes;
				atts.flipBoxShortcodeFrontBox = computedAtts.flipBoxShortcodeFrontBox;
				atts.icon_output              = computedAtts.icon_output;
				atts.title_front_output       = computedAtts.title_front_output;
				atts.title_back_output        = computedAtts.title_back_output;
				atts.icon_output              = computedAtts.icon_output;


				return atts;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values.
			 * @return {Object}
			 */
			computeAtts: function( values ) {
				var parent                       = this.model.get( 'parent' ),
					parentModel                  = FusionPageBuilderElements.find( function( model ) {
						return model.get( 'cid' ) == parent;
					} ),
					parentValues                 = 'undefined' !== typeof parentModel ? jQuery.extend( true, {}, fusionAllElements.fusion_flip_boxes.defaults, _.fusionCleanParameters( parentModel.get( 'params' ) ) ) : {},
					params                       = this.model.get( 'params' ),
					style                        = '',
					flipBoxAttributes            = '',
					flipBoxShortcode,
					flipBoxShortcodeIcon         = {
						'aria-hidden': 'true'
					},
					iconOutput                   = '',
					animations                   = '',
					titleTag                     = '',
					flipBoxShortcodeGrafix       = '',
					flipBoxShortcodeHeadingFront = '',
					titleFrontOutput             = '',
					flipBoxShortcodeHeadingBack  = '',
					flipBoxShortcodeBackBox      = '',
					titleBackOutput              = '',
					frontInner                   = '',
					columns                      = '',
					flipBoxShortcodeFrontBox,
					atts,
					alpha;

				values.border_size   = _.fusionValidateAttrValue( values.border_size, 'px' );
				values.border_radius = _.fusionValidateAttrValue( values.border_radius, 'px' );

				// Case when image is set on parent element and icon on child element.
				if ( ( 'undefined' === typeof params.image || '' === params.image ) && ( 'undefined' !== typeof params.icon && '' !== params.icon ) ) {
					values.image = '';
				}

				// Backwards compatibility for when we had image width and height params.
				if ( 'undefined' !== typeof params.image_width && params.image_width ) {
					values.image_width = params.image_width;
				} else {
					values.image_width = values.image_max_width;
				}

				values.image_width  = _.fusionValidateAttrValue( values.image_width, '' );

				if ( 'undefined' !== typeof values.image && ( '' !== values.image || '' !== values.image_id ) ) {

					if ( -1 === parseInt( values.image_width ) ) {
						values.image_width = '35';
					}

					values.image_height = values.image_width;

				} else {
					values.image_width  = '' === values.image_width ? '35' : values.image_width;
					values.image_height = '35';
				}

				if ( 'round' === values.border_radius ) {
					values.border_radius = '50%';
				}

				style             = '';
				iconOutput        = '';
				titleFrontOutput  = '';
				titleBackOutput   = '';
				flipBoxAttributes = {
					class: 'fusion-flip-box',
					tabindex: 0
				};

				flipBoxAttributes[ 'class' ] += ' flip-' + values.flip_direction;

				if ( values.animation_type ) {
					flipBoxAttributes = _.fusionAnimations( values, flipBoxAttributes );
				}

				if ( values.image && '' !== values.image ) {

					iconOutput = '<img src="' + values.image + '" width="' + values.image_width + '" height="' + values.image_height + '" alt="' + values.alt + '" />';

				} else if ( values.icon ) {

					if ( values.image ) {
						flipBoxShortcodeIcon[ 'class' ] = 'image';
					} else if ( values.icon ) {
						flipBoxShortcodeIcon[ 'class' ] = _.fusionFontAwesome( values.icon );
					}

					if ( values.icon_flip ) {
						flipBoxShortcodeIcon[ 'class' ] += ' fa-flip-' + values.icon_flip;
					}

					if ( values.icon_rotate ) {
						flipBoxShortcodeIcon[ 'class' ] += ' fa-rotate-' + values.icon_rotate;
					}

					if ( 'yes' === values.icon_spin ) {
						flipBoxShortcodeIcon[ 'class' ] += ' fa-spin';
					}

					iconOutput = '<i ' + _.fusionGetAttributes( flipBoxShortcodeIcon ) + '></i>';

				}

				if ( '' !== iconOutput ) {

					flipBoxShortcodeGrafix = {
						class: 'flip-box-grafix'
					};

					if ( ! values.image ) {

						if ( 'yes' === values.circle ) {
							flipBoxShortcodeGrafix[ 'class' ] += ' flip-box-circle';
						} else {
							flipBoxShortcodeGrafix[ 'class' ] += ' flip-box-no-circle';
						}
					} else {
						flipBoxShortcodeGrafix[ 'class' ] += ' flip-box-image';
					}

					iconOutput = '<div ' + _.fusionGetAttributes( flipBoxShortcodeGrafix ) + '>' + iconOutput + '</div>';
				}

				let title_front = values.title_front;
				let title_back = values.title_back;

				if ( values.usingDynamicParent ) {
					title_front = 'Front Title';
					title_back = 'Back Title';
				}

				if ( '' !== title_front ) {
					flipBoxShortcodeHeadingFront = {
						class: 'flip-box-heading',
						style: this.getFrontHeadingStyleVars( values )
					};

					jQuery.each( _.fusionGetFontStyle( 'front_title_font', values, 'object' ), function( rule, value ) {
						flipBoxShortcodeHeadingFront.style += rule + ':' + value + ';';
					} );

					if ( ! values.text_front ) {
						flipBoxShortcodeHeadingFront[ 'class' ] += ' without-text';
					}

					titleTag = this.getTitleTag( values, 'front' );
					titleFrontOutput = '<' + titleTag + ' ' + _.fusionGetAttributes( flipBoxShortcodeHeadingFront ) + '>' + title_front + '</' + titleTag + '>';
				}

				if ( '' !== title_back ) {
					flipBoxShortcodeHeadingBack = {
						class: 'flip-box-heading-back',
						style: this.getBackHeadingStyleVars( values )
					};

					titleTag = this.getTitleTag( values, 'back' );
					titleBackOutput = '<' + titleTag + ' ' + _.fusionGetAttributes( flipBoxShortcodeHeadingBack ) + '>' + title_back + '</' + titleTag + '>';
				}

				frontInner = '<div class="flip-box-front-inner">' + iconOutput + titleFrontOutput + values.text_front + '</div>';

				// flipBoxShortcodeFrontBox Attributes.
				flipBoxShortcodeFrontBox = {
					class: 'flip-box-front',
					style: this.getChildStyleVars( values, 'front' )
				};

				// flipBoxShortcodeBackBox Attributes.
				flipBoxShortcodeBackBox = {
					class: 'flip-box-back',
					style: this.getChildStyleVars( values, 'back' )
				};

				// flipBoxShortcode Attributes.
				columns = 1;
				if ( parentValues.columns ) {
					columns = 12 / parseInt( parentValues.columns, 10 );
				}

				flipBoxShortcode = {
					class: 'fusion-flip-box-wrapper fusion-column col-lg-' + columns + ' col-md-' + columns + ' col-sm-' + columns
				};

				if ( 5 === parseInt( parentValues.columns, 10 ) ) {
					flipBoxShortcode[ 'class' ] = 'fusion-flip-box-wrapper col-lg-2 col-md-2 col-sm-2';
				}

				if ( '' !== values[ 'class' ] ) {
					flipBoxShortcode[ 'class' ] += ' ' + values[ 'class' ];
				}

				if ( '' !== values.id ) {
					flipBoxShortcode.id = values.id;
				}

				this.model.set( 'selectors', flipBoxShortcode );

				atts = {};

				atts.flipBoxShortcodeBackBox  = flipBoxShortcodeBackBox;
				atts.flipBoxAttributes        = flipBoxAttributes;
				atts.flipBoxShortcodeFrontBox = flipBoxShortcodeFrontBox;
				atts.icon_output              = iconOutput;
				atts.title_front_output       = titleFrontOutput;
				atts.title_back_output        = titleBackOutput;
				atts.icon_output              = iconOutput;

				return atts;
			},

			/**
			 * Get the style vars for a child element.
			 *
			 * @since 3.9
			 * @param {Object} values
			 * @param {string} childType
			 * @returns
			 */
			getChildStyleVars: function( values, childType ) {
				var cssVars = [ 'icon_color', 'border_color', 'border_size', 'border_radius' ],
					cssCustomVars = {},
					alpha;
				this.values = values;

				if ( ! values.image && values.circle ) {
					cssVars.push( 'circle_color' );
					cssVars.push( 'circle_border_color' );
				}

				if ( 'front' === childType ) {
					cssVars.push( 'background_color_front' );
					cssVars.push( 'title_front_color' );
					cssVars.push( 'text_front_color' );

					if ( values.background_image_front ) {
						cssCustomVars.background_image_front = 'url(\'' + values.background_image_front + '\')';
						if ( values.background_color_front ) {
							alpha = jQuery.AWB_Color( values.background_color_front ).alpha();
							if ( 1 > alpha && 0 !== alpha ) {
								cssCustomVars[ 'background-front-blend-mode' ] = 'overlay';
							}
						}
					}
				} else {
					cssVars.push( 'background_color_back' );
					cssVars.push( 'title_back_color' );
					cssVars.push( 'text_back_color' );

					if ( values.background_image_back ) {
						cssCustomVars.background_image_back = 'url(\'' + values.background_image_back + '\')';

						if ( values.background_color_back ) {
							alpha = jQuery.AWB_Color( values.background_color_back ).alpha();
							if ( 1 > alpha && 0 !== alpha ) {
								cssCustomVars[ 'background-back-blend-mode' ] = 'overlay';
							}
						}
					}
				}

				return this.getCssVarsForOptions( cssVars ) + this.getCustomCssVars( cssCustomVars );
			},

			/**
			 * Get the style vars for front heading.
			 *
			 * @since 3.9
			 * @param {Object} values
			 * @return string
			 */
			getFrontHeadingStyleVars: function( values ) {
				var titleTypography = _.fusionGetFontStyle( 'front_title_font', values, 'object' ),
					fontVarArgs,
					fontVars;

				fontVarArgs = {
					'font-family': ( titleTypography[ 'font-family' ] ? titleTypography[ 'font-family' ] : '' ),
					'font-weight': ( titleTypography[ 'font-weight' ] ? titleTypography[ 'font-weight' ] : '' ),
					'font-style': ( titleTypography[ 'font-style' ] ? titleTypography[ 'font-style' ] : '' ),
					'font-size': values.front_title_font_size,
					'letter-spacing': values.front_title_letter_spacing,
					'line-height': values.front_title_line_height,
					'text-transform': values.front_title_text_transform
				};

				fontVars = this.getHeadingFontVars( this.getTitleTag( values, 'front' ), fontVarArgs );

				return fontVars;
			},

			/**
			 * Get the style vars for back heading.
			 *
			 * @since 3.9
			 * @param {Object} values
			 * @return string
			 */
			getBackHeadingStyleVars: function( values ) {
				var titleTypography = _.fusionGetFontStyle( 'back_title_font', values, 'object' ),
					fontVarArgs,
					fontVars;

				fontVarArgs = {
					'font-family': ( titleTypography[ 'font-family' ] ? titleTypography[ 'font-family' ] : '' ),
					'font-weight': ( titleTypography[ 'font-weight' ] ? titleTypography[ 'font-weight' ] : '' ),
					'font-style': ( titleTypography[ 'font-style' ] ? titleTypography[ 'font-style' ] : '' ),
					'font-size': values.back_title_font_size,
					'letter-spacing': values.back_title_letter_spacing,
					'line-height': values.back_title_line_height,
					'text-transform': values.back_title_text_transform
				};

				fontVars = this.getHeadingFontVars( this.getTitleTag( values, 'back' ), fontVarArgs );

				return fontVars;
			},

			/**
			 * Get the title HTML tag.
			 *
			 * @param {Array} values
			 * @param {string} title 'front' or 'back' for title type.
			 * @returns
			 */
			getTitleTag: function( values, title ) {
			var title_value;
			if ( 'front' === title ) {
				title_value = values.front_title_size;
				if ( ! title_value ) {
					return 'h2';
				}
			} else {
				title_value = values.back_title_size;
				if ( ! title_value ) {
					return 'h3';
				}
			}

			if ( !isNaN( title_value ) && !isNaN( parseFloat( title_value ) ) ) {
				return 'h' + title_value;
			}

			return title_value;
		}

		} );
	} );
}( jQuery ) );