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

( function() {

	jQuery( document ).ready( function() {

		// Button Element View.
		FusionPageBuilder.fusion_button = FusionPageBuilder.ElementView.extend( {

			/**
			 * Migrate params to new format.
			 *
			 * @since 3.5
			 * @return {void}
			 */
			onInit: function() {
				var params = this.model.get( 'params' );

				// Check for newer margin params.  If unset but regular is, copy from there.
				if ( 'object' === typeof params ) {

					// Split border width into 4.
					if ( 'undefined' === typeof params.border_top && 'undefined' !== typeof params.border_width && '' !== params.border_width ) {
						params.border_top    = parseInt( params.border_width ) + 'px';
						params.border_right  = params.border_top;
						params.border_bottom = params.border_top;
						params.border_left   = params.border_top;
						delete params.border_width;
					}

					// Split border radius into 4.
					if ( 'undefined' === typeof params.border_radius_top_left && 'undefined' !== typeof params.border_radius && '' !== params.border_radius ) {
						params.border_radius_top_left     = parseInt( params.border_radius ) + 'px';
						params.border_radius_top_right    = params.border_radius_top_left;
						params.border_radius_bottom_right = params.border_radius_top_left;
						params.border_radius_bottom_left  = params.border_radius_top_left;
						delete params.border_radius;
					}
					this.model.set( 'params', params );
				}
			},

			/**
			 * Runs on render.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			onRender: function() {
				this.afterPatch();
			},

			/**
			 * Runs after view DOM is patched.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			afterPatch: function() {
				var item    = jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( this.$el.find( '[rel="iLightbox"]' ) ),
					params  = this.model.get( 'params' ),
					stretch = params.stretch;

				if ( 'default' === stretch || '' == stretch ) {
					stretch = fusionAllElements.fusion_button.defaults.stretch;
				}

				this.$el.removeClass( 'fusion-element-alignment-right fusion-element-alignment-left fusion-element-alignment-block fusion-element-alignment-textflow' );

				if ( 'yes' !== stretch && ! this.flexDisplay() ) {
					if ( 'undefined' !== typeof params.alignment && '' !== params.alignment ) {
						this.$el.addClass( 'fusion-element-alignment-' + params.alignment );
					} else if ( ! jQuery( 'body.rtl' ).length ) {
						this.$el.addClass( 'fusion-element-alignment-left fusion-element-alignment-textflow' );
					} else {
						this.$el.addClass( 'fusion-element-alignment-right fusion-element-alignment-textflow' );
					}
				} else {
					this.$el.addClass( 'fusion-element-alignment-block' );
				}

				if ( 'object' === typeof jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaLightBox ) {
					if ( 'undefined' !== typeof this.iLightbox ) {
						this.iLightbox.destroy();
					}

					if ( item.length ) {
						this.iLightbox = item.iLightBox( jQuery( '#fb-preview' )[ 0 ].contentWindow.avadaLightBox.prepare_options( 'single' ) );
					}
				}
			},

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

				this.isFlex = this.flexDisplay();
				this.values = atts.values;
				this.extras = atts.extras;

				// Validate values.
				this.validateArgs();

				// Create attribute objects.
				attributes.wrapperAttr    = this.buildWrapperAttr( atts.values );
				attributes.attr           = this.buildAttr( atts.values );
				attributes.IconAttr       = this.buildIconAttr( atts.values );
				attributes.textAttr       = this.buildTextAttr( atts.values );

				// Any extras that need passed on.
				attributes.values = atts.values;

				return attributes;
			},

			/**
			 * Modify template attributes.
			 *
			 * @since 3.5
			 * @return {void}
			 */
			validateArgs: function() {
				// variables into current scope
				var params, border_radius;

				params = this.model.get( 'params' );

				this.values.default_size = false;
				if ( ( 'undefined' !== typeof params.size && '' === params.size ) || 'undefined' === typeof params.size ) {
					this.values.default_size = true;
				}

				this.values.default_stretch = false;
				if ( ( 'undefined' !== typeof params.stretch && '' === params.stretch ) || 'undefined' === typeof params.stretch ) {
					this.values.default_stretch = true;
				}

				this.values.default_type = false;
				if ( ( 'undefined' !== typeof params.type && ( '' === params.type || 'default' === params.type ) ) || 'undefined' === typeof params.type ) {
					this.values.default_type = true;
				}

				this.values.margin_bottom = _.fusionGetValueWithUnit( this.values.margin_bottom );
				this.values.margin_left   = _.fusionGetValueWithUnit( this.values.margin_left );
				this.values.margin_right  = _.fusionGetValueWithUnit( this.values.margin_right );
				this.values.margin_top    = _.fusionGetValueWithUnit( this.values.margin_top );

				if ( 'undefined' === typeof this.values.gradient_colors || '' === this.values.gradient_colors ) {
					this.values.gradient_colors = this.values.button_gradient_top_color.toLowerCase() + '|' + this.values.button_gradient_bottom_color.toLowerCase();
				}

				if ( 'undefined' === typeof this.values.gradient_hover_colors || '' === this.values.gradient_hover_colors ) {
					this.values.gradient_hover_colors = this.values.button_gradient_top_color_hover.toLowerCase() + '|' + this.values.button_gradient_bottom_color_hover.toLowerCase();
				}

				this.values.old_text_color   = ( 'undefined' !== typeof this.values.text_color && '' !== this.values.text_color ) ? this.values.text_color : false;
				this.values.text_color       = this.values.accent_color;
				this.values.icon_color       = this.values.text_color;
				this.values.text_hover_color = this.values.accent_hover_color;
				this.values.icon_hover_color = this.values.text_hover_color;

				if ( 'undefined' !== typeof this.values.old_text_color && '' !== this.values.old_text_color ) {
					this.values.text_color = this.values.old_text_color;
				}

				if ( this.values.modal ) {
					this.values.link = '#';
				}

				this.values.type = 'string' === typeof this.values.type ? this.values.type.toLowerCase() : 'flat';

				// BC compatibility for button shape.
				if ( 'undefined' !== typeof params.shape && '' !== params.shape && 'undefined' === typeof params.border_radius && 'undefined' === typeof params.border_radius_top_left ) {
					border_radius = '0';
					if ( 'square' === this.values.shape ) {
						border_radius = '0';
					} else if ( 'round' === this.values.shape ) {
						border_radius = '2';

						if ( '3d' === this.values.type.toLowerCase() ) {
							border_radius = '4';
						}
					} else if ( 'pill' === this.values.shape ) {
						border_radius = '25';
					}

					this.values.border_radius_top_left     = _.fusionGetValueWithUnit( border_radius );
					this.values.border_radius_top_right    = this.values.border_radius_top_left;
					this.values.border_radius_bottom_right = this.values.border_radius_top_left;
					this.values.border_radius_bottom_left  = this.values.border_radius_top_left;
				} else if ( 'undefined' !== typeof params.border_radius && 'undefined' === typeof params.border_radius_top_left && '' !== params.border_radius ) {
					this.values.border_radius_top_left     = params.border_radius;
					this.values.border_radius_top_right    = this.values.border_radius_top_left;
					this.values.border_radius_bottom_right = this.values.border_radius_top_left;
					this.values.border_radius_bottom_left  = this.values.border_radius_top_left;
				}

				this.values.border_radius_top_left     = _.isEmpty( this.values.border_radius_top_left ) ? '0' : _.fusionGetValueWithUnit( this.values.border_radius_top_left );
				this.values.border_radius_top_right    = _.isEmpty( this.values.border_radius_top_right ) ? '0' : _.fusionGetValueWithUnit( this.values.border_radius_top_right );
				this.values.border_radius_bottom_right = _.isEmpty( this.values.border_radius_bottom_right ) ? '0' : _.fusionGetValueWithUnit( this.values.border_radius_bottom_right );
				this.values.border_radius_bottom_left  = _.isEmpty( this.values.border_radius_bottom_left ) ? '0' : _.fusionGetValueWithUnit( this.values.border_radius_bottom_left );
				this.values.border_radius              = this.values.border_radius_top_left + ' ' +  this.values.border_radius_top_right + ' ' + this.values.border_radius_bottom_right + ' ' +  this.values.border_radius_bottom_left;

				// Legacy single border support.
				if ( 'undefined' !== params.border_width && '' !== params.border_width && 'undefined' === params.border_top ) {
					this.values.border_top    = params.border_width;
					this.values.border_right  = this.values.border_top;
					this.values.border_bottom = this.values.border_top;
					this.values.border_left   = this.values.border_top;
				}

				this.values.default_border_width = false;
				if ( '' === this.values.border_top && '' === this.values.border_right && '' === this.values.border_bottom && '' === this.values.border_left ) {
					this.values.default_border_width = true;
				} else {

					// Not using default, ensure values for each.
					this.values.border_top    = ( '' === this.values.border_top ) ? this.extras.border_top : this.values.border_top;
					this.values.border_right  = ( '' === this.values.border_right ) ? this.extras.border_right : this.values.border_right;
					this.values.border_bottom = ( '' === this.values.border_bottom ) ? this.extras.border_bottom : this.values.border_bottom;
					this.values.border_left   = ( '' === this.values.border_left ) ? this.extras.border_left : this.values.border_left;
				}

				this.values.border_top    = _.isEmpty( this.values.border_top ) ? '0' : _.fusionGetValueWithUnit( this.values.border_top );
				this.values.border_right  = _.isEmpty( this.values.border_right ) ? '0' : _.fusionGetValueWithUnit( this.values.border_right );
				this.values.border_bottom = _.isEmpty( this.values.border_bottom ) ? '0' : _.fusionGetValueWithUnit( this.values.border_bottom );
				this.values.border_left   = _.isEmpty( this.values.border_left ) ? '0' : _.fusionGetValueWithUnit( this.values.border_left );
				this.values.border_width  = this.values.border_top + ' ' +  this.values.border_right + ' ' + this.values.border_bottom + ' ' +  this.values.border_left;

				if ( 'undefined' === typeof this.values.size ) {
					this.values.size = '';
				}
			},

			/**
			 * Builds the wrapper attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildWrapperAttr: function( values ) {
				var attr 		= {
					class: '',
					style: ''
				},
				isDefaultStretch = ( 'undefined' !== typeof values.stretch && ( '' === values.stretch || 'default' === values.stretch ) ) || 'undefined' === typeof values.stretch;

				if ( this.isFlex ) {
					if ( values.alignment ) {
						attr.style += 'text-align:' + values.alignment + ';';
					}
					if ( values.alignment_medium && values.alignment !== values.alignment_medium ) {
						attr[ 'class' ] += ' md-text-align-' + values.alignment_medium;
					}

					if ( values.alignment_small && values.alignment !== values.alignment_small ) {
						attr[ 'class' ] += ' sm-text-align-' + values.alignment_small;
					}
				} else {
					attr[ 'class' ] += 'fusion-button-wrapper';
					// Add wrapper to the button for alignment and scoped styling.
					if ( ( ( ! isDefaultStretch && 'yes' === values.stretch ) || ( isDefaultStretch && 'yes' === fusionAllElements.fusion_button.defaults.stretch ) ) ) {
						attr[ 'class' ] += ' fusion-align-block';
					} else if ( values.alignment ) {
						attr[ 'class' ] += ' fusion-align' + values.alignment;
					}
				}

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildAttr: function( values ) {
				var params           = this.model.get( 'params' ),
					attr             = _.fusionVisibilityAtts( values.hide_on_mobile, {
						class: 'fusion-button button-' + values.type + ' button-' + values.color + ' button-cid' + this.model.get( 'cid' ),
						style: this.getStyleVars()
					} ),
					sizeClass        = 'button-' + values.size,
					stretchClass     = 'fusion-button-span-' + values.stretch,
					typeClass        = '',
					colorType;

				attr[ 'class' ] += _.fusionGetStickyClass( values.sticky_display );

				if ( ( 'undefined' !== typeof params.size && '' === params.size ) || 'undefined' === typeof params.size ) {
					sizeClass = 'fusion-button-default-size';
				}

				if ( ( 'undefined' !== typeof params.stretch && ( '' === params.stretch || 'default' === params.stretch ) ) || 'undefined' === typeof params.stretch ) {
					stretchClass = 'fusion-button-default-span';
				}

				if ( ( 'undefined' !== typeof params.type && ( '' === params.type || 'default' === params.type ) ) || 'undefined' === typeof params.type ) {
					typeClass = 'fusion-button-default-type';
				}

				colorType = this.values.color;
				if ( 'custom' === this.values.color ) {
					colorType = 'default';
				}

				attr[ 'class' ] += ' ' + sizeClass + ' ' + stretchClass + ' ' + typeClass + ' fusion-button-' + colorType;

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

				if ( 'none' !== this.values.hover_transition ) {
					attr[ 'data-hover ' ] = this.values.hover_transition;

					if ( 'icon_position' === this.values.hover_transition && this.values.icon ) {
						attr[ 'class' ] += ' awb-b-icon-pos-' + this.values.icon_position;
					}
				}

				attr =  _.fusionLinkAttributes( attr, values );

				attr.title = values.title;
				attr.href  = values.link;

				if ( '' !== values.modal ) {
					attr.data_toggle = 'modal';
					attr.data_target =  '.fusion-modal.' + values.modal;
				}

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

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

				attr = _.fusionAnimations( values, attr );

				if ( 'undefined' !== typeof this.values.has_gradient && this.values.has_gradient ) {
					attr[ 'class' ] += ' fusion-has-button-gradient';
				}

				return attr;
			},

			/**
			 * Builds icon attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildIconAttr: function( values ) {
				var buttonShortcodeIcon = {
					class: _.fusionFontAwesome( values.icon ),
					'aria-hidden': 'true'
				};

				if ( 'yes' !== values.icon_divider ) {
					buttonShortcodeIcon[ 'class' ] += ' button-icon-' + values.icon_position;
				}

				if ( values.icon_color && values.icon_color !== values.accent_color ) {
					buttonShortcodeIcon.style = 'color:' + values.icon_color + ';';
				}

				return buttonShortcodeIcon;
			},

			/**
			 * Builds text attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildTextAttr: function( values ) {
				var buttonTextAttr = {
					class: 'fusion-button-text'
				};
				if ( '' !== values.icon && 'yes' === values.icon_divider ) {
					buttonTextAttr[ 'class' ] += ' fusion-button-text-' + values.icon_position;
				}
				buttonTextAttr = _.fusionInlineEditor( {
					cid: this.model.get( 'cid' ),
					'disable-return': true,
					'disable-extra-spaces': true,
					toolbar: 'simple'
				}, buttonTextAttr );

				return buttonTextAttr;
			},

			/**
			 * Builds the styles.
			 *
			 * @since 3.5
			 * @return {void}
			 */
			getStyleVars: function() {
				var customVars = [],
					grad_colors,
					grad_hover_colors,
					text_styles;

				this.values.has_gradient = false;

				// If its custom, default or a custom color scheme.
				if ( 'custom' ===  this.values.color || 'default' ===  this.values.color || false !==  this.values.color.includes( 'scheme-' ) ) {

					if ( ! this.isDefault( 'bevel_color' ) ) {
						customVars.button_bevel_color = this.values.bevel_color;
					}
					if ( ! this.isDefault( 'bevel_color_hover' ) ) {
						customVars.button_bevel_color_hover = this.values.bevel_color_hover;
					}

					if ( 'default' !==  this.values.color ) {
						customVars.button_accent_color = this.values.accent_color;
						if ( '' !== this.values.border_color && ! this.isDefault( 'border_color' ) ) {
							customVars.button_border_color = this.values.border_color;
						}

						if ( 'string' === typeof this.values.old_text_color && '' !== this.values.old_text_color ) {
							customVars.button_accent_hover_color = this.values.old_text_color;
						} else if ( '' !== this.values.accent_hover_color ) {
							customVars.button_accent_hover_color = this.values.accent_hover_color;
						} else if ( '' !== this.values.accent_color && ! this.isDefault( 'accent_color' ) ) {
							customVars.button_accent_hover_color = this.values.accent_color;
						}

						if ( '' !== this.values.border_hover_color ) {
							customVars.button_border_hover_color = this.values.border_hover_color;
						} else if ( '' !== this.values.accent_color ) {
							customVars.button_border_hover_color = this.values.accent_color;
						}
					}

					if ( '' !==  this.values.border_width && 'custom' === this.values.color && ! this.values.default_border_width ) {
						customVars[ 'button_border_width-top' ]    = this.values.border_top;
						customVars[ 'button_border_width-right' ]  = this.values.border_right;
						customVars[ 'button_border_width-bottom' ] = this.values.border_bottom;
						customVars[ 'button_border_width-left' ]   = this.values.border_left;
					}

					if ( ! this.isDefault( 'border_radius_top_left' ) ) {
						customVars[ 'button-border-radius-top-left' ]  = this.values.border_radius_top_left;
					}
					if ( ! this.isDefault( 'border_radius_top_right' ) ) {
						customVars[ 'button-border-radius-top-right' ]    = this.values.border_radius_top_right;
					}
					if ( ! this.isDefault( 'border_radius_bottom_right' ) ) {
						customVars[ 'button-border-radius-bottom-right' ] = this.values.border_radius_bottom_right;
					}
					if ( ! this.isDefault( 'border_radius_bottom_left' ) ) {
						customVars[ 'button-border-radius-bottom-left' ] = this.values.border_radius_bottom_left;
					}

					if ( 'default' !== this.values.color ) {
						if ( ! this.isDefault( 'linear_angle' ) ) {
							customVars.button_gradient_angle = parseFloat( this.values.linear_angle ) + 'deg';
						}
						if ( ! this.isDefault( 'gradient_start_position' ) ) {
							customVars.button_gradient_start = parseFloat( this.values.gradient_start_position ) + '%';
						}
						if ( ! this.isDefault( 'gradient_end_position' ) ) {
							customVars.button_gradient_end = parseFloat( this.values.gradient_end_position ) + '%';
						}

						if ( 'string' === typeof this.values.gradient_colors && '' !== this.values.gradient_colors ) {
							// Checking for deprecated separators.
							if ( this.values.gradient_colors.includes( ';' ) ) {
								grad_colors = this.values.gradient_colors.split( ';' );
							} else {
								grad_colors = this.values.gradient_colors.split( '|' );
							}

							// Only one, just use that as background color, no gradient.
							if ( 1 === grad_colors.length || '' === grad_colors[ 1 ] || grad_colors[ 0 ] === grad_colors[ 1 ] ) {
								customVars.button_gradient_top_color    = grad_colors[ 0 ];
								customVars.button_gradient_bottom_color = grad_colors[ 0 ];
							} else {
								customVars.button_gradient_top_color    = grad_colors[ 0 ];
								customVars.button_gradient_bottom_color = grad_colors[ 1 ];
								this.values.has_gradient                   = true;

								if ( 'linear' !==  this.values.gradient_type ) {
									customVars.button_gradient = 'radial-gradient(circle at ' + this.values.radial_direction + ',' + grad_colors[ 0 ] + ' ' + this.values.gradient_start_position + '%,' + grad_colors[ 1 ] + ' ' + this.values.gradient_end_position + '%)';
								}
							}
						}

						if ( 'string' === typeof this.values.gradient_hover_colors && '' !== this.values.gradient_hover_colors ) {

							// Checking for deprecated separators.
							if ( this.values.gradient_hover_colors.includes( ';' ) ) {
								grad_hover_colors = this.values.gradient_hover_colors.split( ';' );
							} else {
								grad_hover_colors = this.values.gradient_hover_colors.split( '|' );
							}

							if ( 1 === grad_hover_colors.length || '' === grad_hover_colors[ 1 ] || grad_hover_colors[ 0 ] === grad_hover_colors[ 1 ] ) {
								customVars.button_gradient_top_color_hover    = grad_hover_colors[ 0 ];
								customVars.button_gradient_bottom_color_hover = grad_hover_colors[ 0 ];
							} else {
								customVars.button_gradient_top_color_hover    = grad_hover_colors[ 0 ];
								customVars.button_gradient_bottom_color_hover = grad_hover_colors[ 1 ];
								this.values.has_gradient                         = true;

								if ( 'linear' !==  this.values.gradient_type ) {
									customVars.button_gradient_hover = 'radial-gradient(circle at ' +  this.values.radial_direction + ',' + grad_hover_colors[ 0 ] + ' ' +  this.values.gradient_start_position + '%,' + grad_hover_colors[ 1 ] + ' ' +  this.values.gradient_end_position + '%)';
								}
							}
						}
					}
				}

				if ( !this.isDefault( 'text_transform' ) && '' !==  this.values.text_transform ) {
					customVars.button_text_transform = this.values.text_transform;
				}

				if ( '' === this.values.size ) {
					if ( ! this.isDefault( 'font_size' ) ) {
						customVars.button_font_size =  _.fusionGetValueWithUnit( this.values.font_size );
					}

					if ( ! this.isDefault( 'line_height' ) ) {
						customVars.button_line_height = this.values.line_height;
					}

					if ( ! this.isDefault( 'padding_top' ) ) {
						customVars[ 'button_padding-top' ] =  _.fusionGetValueWithUnit( this.values.padding_top );
					}
					if ( ! this.isDefault( 'padding_right' ) ) {
						customVars[ 'button_padding-right' ] =  _.fusionGetValueWithUnit( this.values.padding_right );
					}
					if ( ! this.isDefault( 'padding_bottom' ) ) {
						customVars[ 'button_padding-bottom' ] =  _.fusionGetValueWithUnit( this.values.padding_bottom );
					}
					if ( ! this.isDefault( 'padding_left' ) ) {
						customVars[ 'button_padding-left' ] =  _.fusionGetValueWithUnit( this.values.padding_left );
					}
				}

				if ( ! this.isDefault( 'letter_spacing' ) ) {
					customVars[ 'button_typography-letter-spacing' ] = _.fusionGetValueWithUnit( this.values.letter_spacing );
				}

				text_styles = _.fusionGetFontStyle( 'button_font', this.values, 'object' );
				jQuery.each( text_styles, function( rule, value ) {
					customVars[ 'button_typography-' + rule ] = value;
				} );

				if ( ! this.isDefault( 'margin_top' ) ) {
					customVars[ 'button_margin-top' ] = _.fusionGetValueWithUnit( this.values.margin_top );
				}
				if ( ! this.isDefault( 'margin_right' ) ) {
					customVars[ 'button_margin-right' ] = _.fusionGetValueWithUnit( this.values.margin_right );
				}
				if ( ! this.isDefault( 'margin_bottom' ) ) {
					customVars[ 'button_margin-bottom' ] = _.fusionGetValueWithUnit( this.values.margin_bottom );
				}
				if ( ! this.isDefault( 'margin_left' ) ) {
					customVars[ 'button_margin-left' ] = _.fusionGetValueWithUnit( this.values.margin_left );
				}

				return this.getCustomCssVars( customVars, false );

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