/* global _wpWidgetCustomizerPreviewSettings */

wp.customize.widgetsPreview = wp.customize.WidgetCustomizerPreview = (function( $, _, wp, api ) {

	var self;

	self = {

		renderedSidebars: {},

		renderedWidgets: {},

		registeredSidebars: [],

		registeredWidgets: {},

		widgetSelectors: [],

		preview: null,

		l10n: {

			widgetTooltip: ''

		},

		selectiveRefreshableWidgets: {}

	};

	/**

	 *

	 * @since 4.5.0

	 */

	self.init = function() {

		var self = this;

		self.preview = api.preview;

		if ( ! _.isEmpty( self.selectiveRefreshableWidgets ) ) {

			self.addPartials();

		}

		self.buildWidgetSelectors();

		self.highlightControls();

		self.preview.bind( 'highlight-widget', self.highlightWidget );

		api.preview.bind( 'active', function() {

			self.highlightControls();

		} );

		/*

		 * Refresh a partial when the controls pane requests it. This is used currently just by the

		 * Gallery widget so that when an attachment's caption is updated in the media modal,

		 * the widget in the preview will then be refreshed to show the change. Normally doing this

		 * would not be necessary because all of the state should be contained inside the changeset,

		 * as everything done in the Customizer should not make a change to the site unless the

		 * changeset itself is published. Attachments are a current exception to this rule.

		 * For a proposal to include attachments in the customized state, see #37887.

		 */

		api.preview.bind( 'refresh-widget-partial', function( widgetId ) {

			var partialId = 'widget[' + widgetId + ']';

			if ( api.selectiveRefresh.partial.has( partialId ) ) {

				api.selectiveRefresh.partial( partialId ).refresh();

			} else if ( self.renderedWidgets[ widgetId ] ) {

				api.preview.send( 'refresh' ); // Fallback in case theme does not support 'customize-selective-refresh-widgets'.

			}

		} );

	};

	self.WidgetPartial = api.selectiveRefresh.Partial.extend(/** @lends wp.customize.widgetsPreview.WidgetPartial.prototype */{

		/**

		 *

		 * @since 4.5.0

		 */

		initialize: function( id, options ) {

			var partial = this, matches;

			matches = id.match( /^widget\[(.+)]$/ );

			if ( ! matches ) {

				throw new Error( 'Illegal id for widget partial.' );

			}

			partial.widgetId = matches[1];

			partial.widgetIdParts = self.parseWidgetId( partial.widgetId );

			options = options || {};

			options.params = _.extend(

				{

					settings: [ self.getWidgetSettingId( partial.widgetId ) ],

					containerInclusive: true

				},

				options.params || {}

			);

			api.selectiveRefresh.Partial.prototype.initialize.call( partial, id, options );

		},

		/**

		 *

		 */

		refresh: function() {

			var partial = this, refreshDeferred;

			if ( ! self.selectiveRefreshableWidgets[ partial.widgetIdParts.idBase ] ) {

				refreshDeferred = $.Deferred();

				refreshDeferred.reject();

				partial.fallback();

				return refreshDeferred.promise();

			} else {

				return api.selectiveRefresh.Partial.prototype.refresh.call( partial );

			}

		},

		/**

		 *

		 */

		renderContent: function( placement ) {

			var partial = this;

			if ( api.selectiveRefresh.Partial.prototype.renderContent.call( partial, placement ) ) {

				api.preview.send( 'widget-updated', partial.widgetId );

				api.selectiveRefresh.trigger( 'widget-updated', partial );

			}

		}

	});

	self.SidebarPartial = api.selectiveRefresh.Partial.extend(/** @lends wp.customize.widgetsPreview.SidebarPartial.prototype */{

		/**

		 *

		 * @since 4.5.0

		 */

		initialize: function( id, options ) {

			var partial = this, matches;

			matches = id.match( /^sidebar\[(.+)]$/ );

			if ( ! matches ) {

				throw new Error( 'Illegal id for sidebar partial.' );

			}

			partial.sidebarId = matches[1];

			options = options || {};

			options.params = _.extend(

				{

					settings: [ 'sidebars_widgets[' + partial.sidebarId + ']' ]

				},

				options.params || {}

			);

			api.selectiveRefresh.Partial.prototype.initialize.call( partial, id, options );

			if ( ! partial.params.sidebarArgs ) {

				throw new Error( 'The sidebarArgs param was not provided.' );

			}

			if ( partial.params.settings.length > 1 ) {

				throw new Error( 'Expected SidebarPartial to only have one associated setting' );

			}

		},

		/**

		 *

		 * @since 4.5.0

		 */

		ready: function() {

			var sidebarPartial = this;

			// Watch for changes to the sidebar_widgets setting.

			_.each( sidebarPartial.settings(), function( settingId ) {

				api( settingId ).bind( _.bind( sidebarPartial.handleSettingChange, sidebarPartial ) );

			} );

			// Trigger an event for this sidebar being updated whenever a widget inside is rendered.

			api.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {

				var isAssignedWidgetPartial = (

					placement.partial.extended( self.WidgetPartial ) &&

					( -1 !== _.indexOf( sidebarPartial.getWidgetIds(), placement.partial.widgetId ) )

				);

				if ( isAssignedWidgetPartial ) {

					api.selectiveRefresh.trigger( 'sidebar-updated', sidebarPartial );

				}

			} );

			// Make sure that a widget partial has a container in the DOM prior to a refresh.

			api.bind( 'change', function( widgetSetting ) {

				var widgetId, parsedId;

				parsedId = self.parseWidgetSettingId( widgetSetting.id );

				if ( ! parsedId ) {

					return;

				}

				widgetId = parsedId.idBase;

				if ( parsedId.number ) {

					widgetId += '-' + String( parsedId.number );

				}

				if ( -1 !== _.indexOf( sidebarPartial.getWidgetIds(), widgetId ) ) {

					sidebarPartial.ensureWidgetPlacementContainers( widgetId );

				}

			} );

		},

		/**

		 *

		 * Note that TreeWalker is not implemented in IE8.

		 *

		 * @since 4.5.0

		 * @returns {Array.<{before: Comment, after: Comment, instanceNumber: number}>}

		 */

		findDynamicSidebarBoundaryNodes: function() {

			var partial = this, regExp, boundaryNodes = {}, recursiveCommentTraversal;

			regExp = /^(dynamic_sidebar_before|dynamic_sidebar_after):(.+):(\d+)$/;

			recursiveCommentTraversal = function( childNodes ) {

				_.each( childNodes, function( node ) {

					var matches;

					if ( 8 === node.nodeType ) {

						matches = node.nodeValue.match( regExp );

						if ( ! matches || matches[2] !== partial.sidebarId ) {

							return;

						}

						if ( _.isUndefined( boundaryNodes[ matches[3] ] ) ) {

							boundaryNodes[ matches[3] ] = {

								before: null,

								after: null,

								instanceNumber: parseInt( matches[3], 10 )

							};

						}

						if ( 'dynamic_sidebar_before' === matches[1] ) {

							boundaryNodes[ matches[3] ].before = node;

						} else {

							boundaryNodes[ matches[3] ].after = node;

						}

					} else if ( 1 === node.nodeType ) {

						recursiveCommentTraversal( node.childNodes );

					}

				} );

			};

			recursiveCommentTraversal( document.body.childNodes );

			return _.values( boundaryNodes );

		},

		/**

		 *

		 * @since 4.5.0

		 */

		placements: function() {

			var partial = this;

			return _.map( partial.findDynamicSidebarBoundaryNodes(), function( boundaryNodes ) {

				return new api.selectiveRefresh.Placement( {

					partial: partial,

					container: null,

					startNode: boundaryNodes.before,

					endNode: boundaryNodes.after,

					context: {

						instanceNumber: boundaryNodes.instanceNumber

					}

				} );

			} );

		},

		/**

		 * Get the list of widget IDs associated with this widget area.

		 *

		 * @since 4.5.0

		 *

		 */

		getWidgetIds: function() {

			var sidebarPartial = this, settingId, widgetIds;

			settingId = sidebarPartial.settings()[0];

			if ( ! settingId ) {

				throw new Error( 'Missing associated setting.' );

			}

			if ( ! api.has( settingId ) ) {

				throw new Error( 'Setting does not exist.' );

			}

			widgetIds = api( settingId ).get();

			if ( ! _.isArray( widgetIds ) ) {

				throw new Error( 'Expected setting to be array of widget IDs' );

			}

			return widgetIds.slice( 0 );

		},

		/**

		 *

		 * @since 4.5.0

		 *

		 */

		reflowWidgets: function() {

			var sidebarPartial = this, sidebarPlacements, widgetIds, widgetPartials, sortedSidebarContainers = [];

			widgetIds = sidebarPartial.getWidgetIds();

			sidebarPlacements = sidebarPartial.placements();

			widgetPartials = {};

			_.each( widgetIds, function( widgetId ) {

				var widgetPartial = api.selectiveRefresh.partial( 'widget[' + widgetId + ']' );

				if ( widgetPartial ) {

					widgetPartials[ widgetId ] = widgetPartial;

				}

			} );

			_.each( sidebarPlacements, function( sidebarPlacement ) {