/* global _wpCustomizeWidgetsSettings */

(function( wp, $ ){

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

	// Set up our namespace...

	var api = wp.customize,

		l10n;

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

	// Link settings

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

	l10n = api.Widgets.data.l10n;

	delete api.Widgets.data.l10n;

	/**

	 * wp.customize.Widgets.WidgetModel

	 *

	 * A single widget model.

	 *

	 * @constructor

	 * @augments Backbone.Model

	 */

	api.Widgets.WidgetModel = Backbone.Model.extend({

		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: 'refresh',

		params: [],

		width: null,

		height: null,

		search_matched: true

	});

	/**

	 * wp.customize.Widgets.WidgetCollection

	 *

	 * Collection for widget models.

	 *

	 * @constructor

	 * @augments Backbone.Model

	 */

	api.Widgets.WidgetCollection = Backbone.Collection.extend({

		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, show all themes

			// Useful for resetting the views when you clean the input

			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.

	 *

	 * @constructor

	 * @augments Backbone.Model

	 */

	api.Widgets.SidebarModel = Backbone.Model.extend({

		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.

	 *

	 * @constructor

	 * @augments Backbone.Collection

	 */

	api.Widgets.SidebarCollection = Backbone.Collection.extend({

		model: api.Widgets.SidebarModel

	});

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

	/**

	 * wp.customize.Widgets.AvailableWidgetsPanelView

	 *

	 * View class for the available widgets panel.

	 *

	 * @constructor

	 * @augments wp.Backbone.View

	 * @augments Backbone.View

	 */

	api.Widgets.AvailableWidgetsPanelView = wp.Backbone.View.extend({

		el: '#available-widgets',

		events: {

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

			'keyup #widgets-search': 'search',

			'change #widgets-search': 'search',

			'search #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,

		initialize: function() {

			var self = this;

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

			_.bindAll( this, 'close' );

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

			this.updateList();

			// 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.

			$( '#customize-controls, .customize-overlay-close' ).on( 'click keydown', function( e ) {

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

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

					self.close();

				}

			} );

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

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

		},

		// Performs a search and handles selected widget

		search: function( event ) {

			var firstVisible;

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

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

				}

			}

		},

		// Changes visibility of available widgets

		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;

				}

			} );

		},

		// Highlights a widget

		select: function( widgetTpl ) {

			this.selected = $( widgetTpl );

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

			this.selected.addClass( 'selected' );

		},

		// Highlights a widget on focus

		focus: function( event ) {

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

		},

		// Submit handler for keypress and click on widget

		_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 ) );

		},

		// Adds a selected widget to the sidebar

		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();

		},

		// Opens the panel

		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();

				}

			} );

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

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

			// Reset search

			this.collection.doSearch( '' );

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

				this.$search.focus();

			}

		},

		// Closes the panel

		close: function( options ) {

			options = options || {};

			if ( options.returnFocus && this.currentSidebarControl ) {

				this.currentSidebarControl.container.find( '.add-new-widget' ).focus();

			}

			this.currentSidebarControl = null;

			this.selected = null;

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

			this.$search.val( '' );

		},

		// Add keyboard accessiblity to the panel

		keyboardAccessible: function( event ) {

			var isEnter = ( event.which === 13 ),

				isEsc = ( event.which === 27 ),

				isDown = ( event.which === 40 ),

				isUp = ( event.which === 38 ),

				isTab = ( event.which === 9 ),

				isShift = ( event.shiftKey ),

				selected = null,

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

				lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),

				isSearchFocused = $( event.target ).is( this.$search ),

				isLastWidgetFocused = $( event.target ).is( '.widget-tpl:visible:last' );

			if ( isDown || isUp ) {

				if ( isDown ) {

					if ( isSearchFocused ) {

						selected = firstVisible;

					} else if ( this.selected && this.selected.nextAll( '.widget-tpl:visible' ).length !== 0 ) {

						selected = this.selected.nextAll( '.widget-tpl:visible:first' );

					}

				} else if ( isUp ) {

					if ( isSearchFocused ) {

						selected = lastVisible;

					} else if ( this.selected && this.selected.prevAll( '.widget-tpl:visible' ).length !== 0 ) {

						selected = this.selected.prevAll( '.widget-tpl:visible:first' );

					}

				}

				this.select( selected );

				if ( selected ) {

					selected.focus();

				} else {

					this.$search.focus();

				}

				return;

			}

			// If enter pressed but nothing entered, don't do anything

			if ( isEnter && ! this.$search.val() ) {

				return;

			}

			if ( isEnter ) {

				this.submit();

			} else if ( isEsc ) {

				this.close( { returnFocus: true } );

			}