/* global _wpCustomizeWidgetsSettings */

(function( wp, $ ){

	if ( ! wp || ! wp.customize ) { return; }

	// Set up our namespace...

	var api = wp.customize,

		l10n;

	api.Widgets = api.Widgets || {};

	api.Widgets.savedWidgetIds = {};

	// Link settings

	api.Widgets.data = _wpCustomizeWidgetsSettings || {};

	l10n = api.Widgets.data.l10n;

	/**

	 * wp.customize.Widgets.WidgetModel

	 *

	 * A single widget model.

	 *

	 * @augments Backbone.Model

	 */

		id: null,

		temp_id: null,

		classname: null,

		control_tpl: null,

		description: null,

		is_disabled: null,

		is_multi: null,

		multi_number: null,

		name: null,

		id_base: null,

		transport: null,

		params: [],

		width: null,

		height: null,

		search_matched: true

	});

	/**

	 * wp.customize.Widgets.WidgetCollection

	 *

	 * Collection for widget models.

	 *

	 */

		model: api.Widgets.WidgetModel,

		// Controls searching on the current widget collection

		// and triggers an update event

		doSearch: function( value ) {

			// Don't do anything if we've already done this search

			// Useful because the search handler fires multiple times per keystroke

			if ( this.terms === value ) {

				return;

			}

			// Updates terms with the value passed

			this.terms = value;

			// If we have terms, run a search...

			if ( this.terms.length > 0 ) {

				this.search( this.terms );

			}

			// If search is blank, set all the widgets as they matched the search to reset the views.

			if ( this.terms === '' ) {

				this.each( function ( widget ) {

					widget.set( 'search_matched', true );

				} );

			}

		},

		// Performs a search within the collection

		// @uses RegExp

		search: function( term ) {

			var match, haystack;

			// Escape the term string for RegExp meta characters

			term = term.replace( /[-\/\\^$*+?.()|[\]{}]/g, '\\$&' );

			// Consider spaces as word delimiters and match the whole string

			// so matching terms can be combined

			term = term.replace( / /g, ')(?=.*' );

			match = new RegExp( '^(?=.*' + term + ').+', 'i' );

			this.each( function ( data ) {

				haystack = [ data.get( 'name' ), data.get( 'id' ), data.get( 'description' ) ].join( ' ' );

				data.set( 'search_matched', match.test( haystack ) );

			} );

		}

	});

	api.Widgets.availableWidgets = new api.Widgets.WidgetCollection( api.Widgets.data.availableWidgets );

	/**

	 * wp.customize.Widgets.SidebarModel

	 *

	 * A single sidebar model.

	 *

	 * @augments Backbone.Model

	 */

		after_title: null,

		after_widget: null,

		before_title: null,

		before_widget: null,

		'class': null,

		description: null,

		id: null,

		name: null,

		is_rendered: false

	});

	/**

	 * wp.customize.Widgets.SidebarCollection

	 *

	 * Collection for sidebar models.

	 *

	 * @augments Backbone.Collection

	 */

		model: api.Widgets.SidebarModel

	});

	api.Widgets.registeredSidebars = new api.Widgets.SidebarCollection( api.Widgets.data.registeredSidebars );

		el: '#available-widgets',

		events: {

			'input #widgets-search': 'search',

			'focus .widget-tpl' : 'focus',

			'click .widget-tpl' : '_submit',

			'keypress .widget-tpl' : '_submit',

			'keydown' : 'keyboardAccessible'

		},

		// Cache current selected widget

		selected: null,

		// Cache sidebar control which has opened panel

		currentSidebarControl: null,

		$search: null,

		$clearResults: null,

		searchMatchesCount: null,

		initialize: function() {

			var self = this;

			this.$search = $( '#widgets-search' );

			this.$clearResults = this.$el.find( '.clear-results' );

			_.bindAll( this, 'close' );

			this.listenTo( this.collection, 'change', this.updateList );

			this.updateList();

			// Set the initial search count to the number of available widgets.

			this.searchMatchesCount = this.collection.length;

			// If the available widgets panel is open and the customize controls are

			// interacted with (i.e. available widgets panel is blurred) then close the

			// available widgets panel. Also close on back button click.

			$( '#customize-controls, #available-widgets .customize-section-title' ).on( 'click keydown', function( e ) {

				var isAddNewBtn = $( e.target ).is( '.add-new-widget, .add-new-widget *' );

				if ( $( 'body' ).hasClass( 'adding-widget' ) && ! isAddNewBtn ) {

					self.close();

				}

			} );

			// Clear the search results and trigger a `keyup` event to fire a new search.

			this.$clearResults.on( 'click', function() {

				self.$search.val( '' ).focus().trigger( 'keyup' );

			} );

			// Close the panel if the URL in the preview changes

			api.previewer.bind( 'url', this.close );

		},

			var firstVisible;

			this.collection.doSearch( event.target.value );

			// Update the search matches count.

			this.updateSearchMatchesCount();

			// Announce how many search results.

			this.announceSearchMatches();

			// Remove a widget from being selected if it is no longer visible

			if ( this.selected && ! this.selected.is( ':visible' ) ) {

				this.selected.removeClass( 'selected' );

				this.selected = null;

			}

			// If a widget was selected but the filter value has been cleared out, clear selection

			if ( this.selected && ! event.target.value ) {

				this.selected.removeClass( 'selected' );

				this.selected = null;

			}

			// If a filter has been entered and a widget hasn't been selected, select the first one shown

			if ( ! this.selected && event.target.value ) {

				firstVisible = this.$el.find( '> .widget-tpl:visible:first' );

				if ( firstVisible.length ) {

					this.select( firstVisible );

				}

			}

			// Toggle the clear search results button.

			if ( '' !== event.target.value ) {

				this.$clearResults.addClass( 'is-visible' );

			} else if ( '' === event.target.value ) {

				this.$clearResults.removeClass( 'is-visible' );

			}

			// Set a CSS class on the search container when there are no search results.

			if ( ! this.searchMatchesCount ) {

				this.$el.addClass( 'no-widgets-found' );

			} else {

				this.$el.removeClass( 'no-widgets-found' );

			}

		updateSearchMatchesCount: function() {

			this.searchMatchesCount = this.collection.where({ search_matched: true }).length;

		},

			var message = l10n.widgetsFound.replace( '%d', this.searchMatchesCount ) ;

			if ( ! this.searchMatchesCount ) {

				message = l10n.noWidgetsFound;

			}

			wp.a11y.speak( message );

		updateList: function() {

			this.collection.each( function( widget ) {

				var widgetTpl = $( '#widget-tpl-' + widget.id );

				widgetTpl.toggle( widget.get( 'search_matched' ) && ! widget.get( 'is_disabled' ) );

				if ( widget.get( 'is_disabled' ) && widgetTpl.is( this.selected ) ) {

					this.selected = null;

				}

			} );

		},

		select: function( widgetTpl ) {

			this.selected = $( widgetTpl );

			this.selected.siblings( '.widget-tpl' ).removeClass( 'selected' );

			this.selected.addClass( 'selected' );

		},

		focus: function( event ) {

			this.select( $( event.currentTarget ) );

		},

		_submit: function( event ) {

			// Only proceed with keypress if it is Enter or Spacebar

			if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {

				return;

			}

			this.submit( $( event.currentTarget ) );

		},

		submit: function( widgetTpl ) {

			var widgetId, widget, widgetFormControl;

			if ( ! widgetTpl ) {

				widgetTpl = this.selected;

			}

			if ( ! widgetTpl || ! this.currentSidebarControl ) {

				return;

			}

			this.select( widgetTpl );

			widgetId = $( this.selected ).data( 'widget-id' );

			widget = this.collection.findWhere( { id: widgetId } );

			if ( ! widget ) {

				return;

			}

			widgetFormControl = this.currentSidebarControl.addWidget( widget.get( 'id_base' ) );

			if ( widgetFormControl ) {

				widgetFormControl.focus();

			}

			this.close();

		},

		open: function( sidebarControl ) {

			this.currentSidebarControl = sidebarControl;

			// Wide widget controls appear over the preview, and so they need to be collapsed when the panel opens

			_( this.currentSidebarControl.getWidgetFormControls() ).each( function( control ) {

				if ( control.params.is_wide ) {

					control.collapseForm();

				}

			} );

			if ( api.section.has( 'publish_settings' ) ) {

				api.section( 'publish_settings' ).collapse();

			}

			$( 'body' ).addClass( 'adding-widget' );

			this.$el.find( '.selected' ).removeClass( 'selected' );

			// Reset search

			this.collection.doSearch( '' );

			if ( ! api.settings.browser.mobile ) {

				this.$search.focus();

			}

		},