/* global FusionPageBuilderApp, fusionBuilderText */
var FusionPageBuilder = FusionPageBuilder || {};

( function() {

	jQuery( document ).ready( function() {

		// Chart View.
		FusionPageBuilder.fusion_chart = FusionPageBuilder.ParentElementView.extend( {

			/**
			 * Chart Datasets.
			 */
			chartDatasets: [],

			/**
			 * Runs after view DOM is patched.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			beforePatch: function() {
				this.$el.find( 'canvas' ).replaceWith( '<canvas width="100" height="100"></canvas>' );
			},

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

				// TODO: save DOM and apply instead of generating
				this.generateChildElements();

				this._refreshJs();
			},

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

				this.chartDatasets = FusionPageBuilderApp.findShortcodeMatches( atts.params.element_content, 'fusion_chart_dataset' );

				attributes.showPlaceholder = 0 === this.chartDatasets.length ? true : false;

				if ( ! attributes.showPlaceholder ) {

					// Validate values.
					this.validateValues( atts.values );
				} else {

					// Set placeholder values;
					atts.values.type                                = 'bar';
					this.model.attributes.params.type               = 'bar';
					atts.values.x_axis_labels                       = 'Val 1|Val 2|Val 3';
					this.model.attributes.params.x_axis_labels      = 'Val 1|Val 2|Val 3';
					atts.values.legend_text_colors                  = '#ffffff|#ffffff|#ffffff';
					this.model.attributes.params.legend_text_colors = '#ffffff|#ffffff|#ffffff';
					atts.values.bg_colors                           = '#03a9f4|#8bc34a|#ff9800';
					this.model.attributes.params.bg_colors          = '#03a9f4|#8bc34a|#ff9800';
					atts.values.border_colors                       = '#03a9f4|#8bc34a|#ff9800';
					this.model.attributes.params.border_colors      = '#03a9f4|#8bc34a|#ff9800';

					this.model.attributes.params.element_content = '[fusion_chart_dataset title="Data Set 1" legend_text_color="#ffffff" background_color="#00bcd4" border_color="#00bcd4" values="5|7|9"][/fusion_chart_dataset]';
				}

				// Create attribute objects.
				attributes.chartShortcode      = this.buildChartAttr( atts.values );
				attributes.styles              = this.buildStyles( atts.values );
				attributes.title               = atts.values.title;
				attributes.chartLegendPosition = atts.values.chart_legend_position;

				return attributes;
			},

			/**
			 * Modify values.
			 *
			 * @since 2.0
			 * @param {Object} values - The values.
			 * @return {void}
			 */
			validateValues: function( values ) {
				if ( '' === values.chart_type ) {
					values.chart_type = 'bar';
				}

				// validate bg_colors.
				if ( values.bg_colors ) {
					values.bg_colors = this.validateGlobalColors( values.bg_colors );
				}

				// validate border_colors.
				if ( values.border_colors ) {
					values.border_colors = this.validateGlobalColors( values.border_colors );
				}

				values.margin_bottom = _.fusionValidateAttrValue( values.margin_bottom, 'px' );
				values.margin_left   = _.fusionValidateAttrValue( values.margin_left, 'px' );
				values.margin_right  = _.fusionValidateAttrValue( values.margin_right, 'px' );
				values.margin_top    = _.fusionValidateAttrValue( values.margin_top, 'px' );
			},

			/**
			 * Validate global color variable.
			 *
			 * @since 3.6
			 * @param {String} value - The value.
			 * @return {Object|String}
			 */
			validateGlobalColors: function( value ) {
				var colors    = value.split( '|' ),
					newColors = [];

				if ( colors ) {
					_.each( colors, function( v ) {
						var newValue = '' !== v ? jQuery.AWB_Color( v ).toRgbaString() : '';
						newColors.push( newValue );
					} );
					return newColors.join( '|' );
				}
				return value;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {Object}
			 */
			buildChartAttr: function( values ) {
				var chartShortcode = _.fusionVisibilityAtts(
					values.hide_on_mobile, {
						id: 'fusion-chart-cid' + this.model.get( 'cid' ),
						class: 'fusion-chart fusion-child-element',
						style: this.getStyleVars( values )
					}
				);

				if ( values.chart_type && -1 !== [ 'bar', 'horizontalBar',  'line', 'pie', 'doughnut', 'radar', 'polarArea' ].indexOf( values.chart_type ) ) {
					chartShortcode[ 'data-type' ] = values.chart_type;
				} else {
					chartShortcode[ 'data-type' ] = this.$el.find( '#' + chartShortcode.id ).data( 'type' );
				}

				if ( '' !== values.chart_legend_position && 'off' !== values.chart_legend_position ) {
					chartShortcode[ 'class' ] += ' legend-' + values.chart_legend_position;

					chartShortcode[ 'data-chart_legend_position' ] = values.chart_legend_position;
				}

				if ( '' !== values.x_axis_labels ) {
					chartShortcode[ 'data-x_axis_labels' ] = values.x_axis_labels;
				}

				if ( '' !== values.x_axis_label ) {
					chartShortcode[ 'data-x_axis_label' ] = values.x_axis_label;
				}

				if ( '' !== values.y_axis_label ) {
					chartShortcode[ 'data-y_axis_label' ] = values.y_axis_label;
				}

				if ( '' !== values.show_tooltips ) {
					chartShortcode[ 'data-show_tooltips' ] = values.show_tooltips;
				}

				if ( '' !== values.bg_colors ) {
					chartShortcode[ 'data-bg_colors' ] = values.bg_colors;
				}

				if ( '' !== values.border_colors ) {
					chartShortcode[ 'data-border_colors' ] = values.border_colors;
				}

				if ( '' !== values.legend_labels ) {
					chartShortcode[ 'data-legend_labels' ] = values.legend_labels;
				}

				if ( '' !== values.chart_border_size ) {
					chartShortcode[ 'data-border_size' ] = values.chart_border_size;
				}

				if ( '' !== values.chart_border_type ) {
					chartShortcode[ 'data-border_type' ] = values.chart_border_type;
				}

				if ( '' !== values.chart_fill ) {
					chartShortcode[ 'data-chart_fill' ] = values.chart_fill;
				}

				if ( '' !== values.chart_point_style ) {
					chartShortcode[ 'data-chart_point_style' ] = values.chart_point_style;
				}

				if ( '' !== values.chart_point_size ) {
					chartShortcode[ 'data-chart_point_size' ] = values.chart_point_size;
				}

				if ( '' !== values.chart_point_bg_color ) {
					chartShortcode[ 'data-chart_point_bg_color' ] = jQuery.AWB_Color( values.chart_point_bg_color ).toRgbaString();
				}

				if ( '' !== values.chart_point_border_color ) {
					chartShortcode[ 'data-chart_point_border_color' ] = jQuery.AWB_Color( values.chart_point_border_color ).toRgbaString();
				}

				if ( '' !== values.chart_axis_text_color ) {
					chartShortcode[ 'data-chart_axis_text_color' ] = jQuery.AWB_Color( values.chart_axis_text_color ).toRgbaString();
				}

				if ( '' !== values.chart_gridline_color ) {
					chartShortcode[ 'data-chart_gridline_color' ] = jQuery.AWB_Color( values.chart_gridline_color ).toRgbaString();
				}

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

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

				return chartShortcode;
			},

			getStyleVars: function( values ) {
				var cssVars   = [
					'chart_bg_color',
					'margin_top',
					'margin_right',
					'margin_bottom',
					'margin_left',
					'padding_top',
					'padding_right',
					'padding_bottom',
					'padding_left'
				];

				this.values = values;

				return this.getCssVarsForOptions( cssVars );
			},

			/**
			 * Builds the styles.
			 *
			 * @since 2.0
			 * @param {Object} values - The values object.
			 * @return {string}
			 */
			buildStyles: function( values ) {
				var styles                = '',
					childrenCount         = 0,
					childLegendTextColors = [],
					cid                   = this.model.get( 'cid' ),
					colors,
					colorCount,
					i,
					chartDatasetElement,
					chartDatasetAtts;

				if ( 'undefined' !== typeof this.model && 'undefined' !== typeof this.model.children ) {
					childrenCount = this.model.children.length;

					if ( childrenCount ) {
						_.each( this.model.children.models, function( child, key ) {
							childLegendTextColors[ key ] = child.attributes.params.legend_text_color;
						} );
					} else if ( 'undefined' !== typeof this.model.attributes.params.element_content ) {

						// Render on page load, children are not generated yet.
						_.each( this.chartDatasets, function( chartDataset ) {
							chartDatasetElement = chartDataset.match( FusionPageBuilderApp.regExpShortcode( 'fusion_chart_dataset' ) );
							chartDatasetAtts    = '' !== chartDatasetElement[ 3 ] ? window.wp.shortcode.attrs( chartDatasetElement[ 3 ] ) : '';

							childLegendTextColors.push( chartDatasetAtts.named.legend_text_color );
						} );

						childrenCount = this.chartDatasets.length;
					}
				}

				if ( '' !== values.legend_text_colors ) {
					if ( 'pie' === values.chart_type || 'doughnut' === values.chart_type || 'polarArea' === values.chart_type || ( ( 'bar' === values.chart_type || 'horizontalBar' === values.chart_type ) && 1 === childrenCount ) ) {
						colors = values.legend_text_colors.split( '|' );
					} else {
						colors = childLegendTextColors;
					}

					colorCount = colors.length;
					for ( i = 0; i < colorCount; i++ ) {
						if ( '' !== colors[ i ] ) {
							styles += '#fusion-chart-cid' + cid + ' .fusion-chart-legend-wrap li:nth-child(' + ( i + 1 ) + ') span{color: ' + colors[ i ] + ';}';
						}
					}
				}

				return styles;
			}

		} );
	} );

	_.extend( FusionPageBuilder.Callback.prototype, {
		chartShortcodeFilter: function( name, value, args, view ) {

			var shortcode        = '',
				table            = false,
				labels           = [],
				bgColors         = [],
				borderColors     = [],
				legendTextColors = [],
				params           = {},
				changes          = [];

			if ( ! view ) {
				return;
			}

			table  = jQuery( '[data-cid="' + view.model.get( 'cid' ) + '"] .fusion-table-builder' );
			params = jQuery.extend( true, {}, view.model.get( 'params' ) );

			// Table head (X axis labels).
			table.find( 'thead tr:first-child th' ).each( function( i ) {
				var val = jQuery( this ).find( 'input' ).val();

				if ( 1 < i ) {
					labels.push( val );
				}
			} );

			if ( params.x_axis_labels !== labels.join( '|' ) ) {
				changes.push( { id: 'x_axis_labels', value: labels.join( '|' ), label: fusionBuilderText.x_axis_label } );
			}

			// Table head (label text colors).
			table.find( 'thead tr:nth-child(2) th' ).each( function( i ) {

				if ( 3 < i ) {
					legendTextColors.push( jQuery( this ).find( '.fusion-builder-option:first-child input' ).val() );
					bgColors.push( jQuery( this ).find( '.fusion-builder-option:nth-child(2) input' ).val() );
					borderColors.push( jQuery( this ).find( '.fusion-builder-option:nth-child(3) input' ).val() );
				}
			} );

			if ( 'undefined' !== typeof params.legend_text_colors && params.legend_text_colors !== legendTextColors.join( '|' ) ) {
				changes.push( { id: 'legend_text_colors', value: legendTextColors.join( '|' ), label: fusionBuilderText.legend_text_color } );
			}
			if ( 'undefined' !== typeof params.bg_colors && params.bg_colors !== bgColors.join( '|' ) ) {
				changes.push( { id: 'bg_colors', value: bgColors.join( '|' ), label: fusionBuilderText.background_color } );
			}
			if ( 'undefined' !== typeof params.border_colors && params.border_colors !== borderColors.join( '|' ) ) {
				changes.push( { id: 'border_colors', value: borderColors.join( '|' ), label: fusionBuilderText.border_color } );
			}

			// Table body (each row is data set).
			table.find( 'tbody tr' ).each( function() {
				var $thisTr = jQuery( this ),
					values  = [];

				shortcode += '[fusion_chart_dataset';

				// Table rows (data set title, colors, values).
				$thisTr.find( 'td' ).each( function( i ) {
					var $thisRow = jQuery( this ),
						val      = $thisRow.find( 'input' ).val();

					switch ( i ) {
					case 0:
						shortcode += ' title="' + val + '"';
						break;
					case 1:
						shortcode += ' legend_text_color="' + val + '"';
						break;
					case 2:
						shortcode += ' background_color="' + val + '"';
						break;
					case 3:
						shortcode += ' border_color="' + val + '"';
						break;
					default:
						values.push( val );
					}
				} );

				shortcode += ' values="' + values.join( '|' ) + '" /]';
			} );

			if ( params.element_content.trim() !== shortcode.trim() ) {
				changes.push( { id: 'element_content', value: shortcode, label: fusionBuilderText.chart_dataset } );
			}

			_.each( changes, function( change ) {
				view.changeParam( change.id, change.value, change.label );
			} );

			return {
				render: true
			};
		}
	} );
}( jQuery ) );
