/* global _wpCustomizeNavMenusSettings, wpNavMenu, console */

( function( api, wp, $ ) {

	'use strict';

	/**

	 * Set up wpNavMenu for drag and drop.

	 */

	wpNavMenu.originalInit = wpNavMenu.init;

	wpNavMenu.options.menuItemDepthPerLevel = 20;

	wpNavMenu.options.sortableItems         = '> .customize-control-nav_menu_item';

	wpNavMenu.options.targetTolerance       = 10;

	wpNavMenu.init = function() {

		this.jQueryExtensions();

	};

	api.Menus = api.Menus || {};

	// Link settings.

	api.Menus.data = {

		itemTypes: [],

		l10n: {},

		settingTransport: 'refresh',

		phpIntMax: 0,

		defaultSettingValues: {

			nav_menu: {},

			nav_menu_item: {}

		},

		locationSlugMappedToName: {}

	};

	if ( 'undefined' !== typeof _wpCustomizeNavMenusSettings ) {

		$.extend( api.Menus.data, _wpCustomizeNavMenusSettings );

	}

	/**

	 * Newly-created Nav Menus and Nav Menu Items have negative integer IDs which

	 * serve as placeholders until Save & Publish happens.

	 *

	 * @return {number}

	 */

	api.Menus.generatePlaceholderAutoIncrementId = function() {

		return -Math.ceil( api.Menus.data.phpIntMax * Math.random() );

	};

	/**

	 * wp.customize.Menus.AvailableItemModel

	 *

	 * A single available menu item model. See PHP's WP_Customize_Nav_Menu_Item_Setting class.

	 *

	 * @constructor

	 * @augments Backbone.Model

	 */

	api.Menus.AvailableItemModel = Backbone.Model.extend( $.extend(

		{

			id: null // This is only used by Backbone.

		},

		api.Menus.data.defaultSettingValues.nav_menu_item

	) );

	/**

	 * wp.customize.Menus.AvailableItemCollection

	 *

	 * Collection for available menu item models.

	 *

	 * @constructor

	 * @augments Backbone.Model

	 */

	api.Menus.AvailableItemCollection = Backbone.Collection.extend({

		model: api.Menus.AvailableItemModel,

		sort_key: 'order',

		comparator: function( item ) {

			return -item.get( this.sort_key );

		},

		sortByField: function( fieldName ) {

			this.sort_key = fieldName;

			this.sort();

		}

	});

	api.Menus.availableMenuItems = new api.Menus.AvailableItemCollection( api.Menus.data.availableMenuItems );

	/**

	 * Insert a new `auto-draft` post.

	 *

	 * @since 4.7.0

	 * @access public

	 *

	 * @param {object} params - Parameters for the draft post to create.

	 * @param {string} params.post_type - Post type to add.

	 * @param {string} params.post_title - Post title to use.

	 * @return {jQuery.promise} Promise resolved with the added post.

	 */

	api.Menus.insertAutoDraftPost = function insertAutoDraftPost( params ) {

		var request, deferred = $.Deferred();

		request = wp.ajax.post( 'customize-nav-menus-insert-auto-draft', {

			'customize-menus-nonce': api.settings.nonce['customize-menus'],

			'wp_customize': 'on',

			'customize_changeset_uuid': api.settings.changeset.uuid,

			'params': params

		} );

		request.done( function( response ) {

			if ( response.post_id ) {

				api( 'nav_menus_created_posts' ).set(

					api( 'nav_menus_created_posts' ).get().concat( [ response.post_id ] )

				);

				if ( 'page' === params.post_type ) {

					// Activate static front page controls as this could be the first page created.

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

						api.section( 'static_front_page' ).activate();

					}

					// Add new page to dropdown-pages controls.

					api.control.each( function( control ) {

						var select;

						if ( 'dropdown-pages' === control.params.type ) {

							select = control.container.find( 'select[name^="_customize-dropdown-pages-"]' );

							select.append( new Option( params.post_title, response.post_id ) );

						}

					} );

				}

				deferred.resolve( response );

			}

		} );

		request.fail( function( response ) {

			var error = response || '';

			if ( 'undefined' !== typeof response.message ) {

				error = response.message;

			}

			console.error( error );

			deferred.rejectWith( error );

		} );

		return deferred.promise();

	};

	/**

	 * wp.customize.Menus.AvailableMenuItemsPanelView

	 *

	 * View class for the available menu items panel.

	 *

	 * @constructor

	 * @augments wp.Backbone.View

	 * @augments Backbone.View

	 */

	api.Menus.AvailableMenuItemsPanelView = wp.Backbone.View.extend({

		el: '#available-menu-items',

		events: {

			'input #menu-items-search': 'debounceSearch',

			'keyup #menu-items-search': 'debounceSearch',

			'focus .menu-item-tpl': 'focus',

			'click .menu-item-tpl': '_submit',

			'click #custom-menu-item-submit': '_submitLink',

			'keypress #custom-menu-item-name': '_submitLink',

			'click .new-content-item .add-content': '_submitNew',

			'keypress .create-item-input': '_submitNew',

			'keydown': 'keyboardAccessible'

		},

		// Cache current selected menu item.

		selected: null,

		// Cache menu control that opened the panel.

		currentMenuControl: null,

		debounceSearch: null,

		$search: null,

		$clearResults: null,

		searchTerm: '',

		rendered: false,

		pages: {},

		sectionContent: '',

		loading: false,

		addingNew: false,

		initialize: function() {

			var self = this;

			if ( ! api.panel.has( 'nav_menus' ) ) {

				return;

			}

			this.$search = $( '#menu-items-search' );

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

			this.sectionContent = this.$el.find( '.available-menu-items-list' );

			this.debounceSearch = _.debounce( self.search, 500 );

			_.bindAll( this, 'close' );

			// If the available menu items panel is open and the customize controls are

			// interacted with (other than an item being deleted), then close the

			// available menu items panel. Also close on back button click.

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

				var isDeleteBtn = $( e.target ).is( '.item-delete, .item-delete *' ),

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

				if ( $( 'body' ).hasClass( 'adding-menu-items' ) && ! isDeleteBtn && ! 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' );

			} );

			this.$el.on( 'input', '#custom-menu-item-name.invalid, #custom-menu-item-url.invalid', function() {

				$( this ).removeClass( 'invalid' );

			});

			// Load available items if it looks like we'll need them.

			api.panel( 'nav_menus' ).container.bind( 'expanded', function() {

				if ( ! self.rendered ) {

					self.initList();

					self.rendered = true;

				}

			});

			// Load more items.

			this.sectionContent.scroll( function() {

				var totalHeight = self.$el.find( '.accordion-section.open .available-menu-items-list' ).prop( 'scrollHeight' ),

					visibleHeight = self.$el.find( '.accordion-section.open' ).height();

				if ( ! self.loading && $( this ).scrollTop() > 3 / 4 * totalHeight - visibleHeight ) {

					var type = $( this ).data( 'type' ),

						object = $( this ).data( 'object' );

					if ( 'search' === type ) {

						if ( self.searchTerm ) {

							self.doSearch( self.pages.search );

						}

					} else {

						self.loadItems( [

							{ type: type, object: object }

						] );

					}

				}

			});

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

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

			self.delegateEvents();

		},

		// Search input change handler.

		search: function( event ) {

			var $searchSection = $( '#available-menu-items-search' ),

				$otherSections = $( '#available-menu-items .accordion-section' ).not( $searchSection );

			if ( ! event ) {

				return;

			}

			if ( this.searchTerm === event.target.value ) {

				return;

			}

			if ( '' !== event.target.value && ! $searchSection.hasClass( 'open' ) ) {

				$otherSections.fadeOut( 100 );

				$searchSection.find( '.accordion-section-content' ).slideDown( 'fast' );

				$searchSection.addClass( 'open' );

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

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

				$searchSection.removeClass( 'open' );

				$otherSections.show();

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

			}

			this.searchTerm = event.target.value;

			this.pages.search = 1;

			this.doSearch( 1 );

		},

		// Get search results.

		doSearch: function( page ) {

			var self = this, params,

				$section = $( '#available-menu-items-search' ),

				$content = $section.find( '.accordion-section-content' ),

				itemTemplate = wp.template( 'available-menu-item' );

			if ( self.currentRequest ) {

				self.currentRequest.abort();

			}

			if ( page < 0 ) {

				return;

			} else if ( page > 1 ) {

				$section.addClass( 'loading-more' );

				$content.attr( 'aria-busy', 'true' );

				wp.a11y.speak( api.Menus.data.l10n.itemsLoadingMore );

			} else if ( '' === self.searchTerm ) {

				$content.html( '' );

				wp.a11y.speak( '' );

				return;

			}

			$section.addClass( 'loading' );

			self.loading = true;

			params = api.previewer.query( { excludeCustomizedSaved: true } );

			_.extend( params, {

				'customize-menus-nonce': api.settings.nonce['customize-menus'],

				'wp_customize': 'on',

				'search': self.searchTerm,

				'page': page

			} );

			self.currentRequest = wp.ajax.post( 'search-available-menu-items-customizer', params );

			self.currentRequest.done(function( data ) {

				var items;

				if ( 1 === page ) {

					// Clear previous results as it's a new search.

					$content.empty();

				}

				$section.removeClass( 'loading loading-more' );

				$content.attr( 'aria-busy', 'false' );

				$section.addClass( 'open' );

				self.loading = false;

				items = new api.Menus.AvailableItemCollection( data.items );

				self.collection.add( items.models );

				items.each( function( menuItem ) {

					$content.append( itemTemplate( menuItem.attributes ) );

				} );

				if ( 20 > items.length ) {

					self.pages.search = -1; // Up to 20 posts and 20 terms in results, if <20, no more results for either.

				} else {

					self.pages.search = self.pages.search + 1;

				}

				if ( items && page > 1 ) {

					wp.a11y.speak( api.Menus.data.l10n.itemsFoundMore.replace( '%d', items.length ) );

				} else if ( items && page === 1 ) {

					wp.a11y.speak( api.Menus.data.l10n.itemsFound.replace( '%d', items.length ) );

				}

			});

			self.currentRequest.fail(function( data ) {

				// data.message may be undefined, for example when typing slow and the request is aborted.

				if ( data.message ) {

					$content.empty().append( $( '<li class="nothing-found"></li>' ).text( data.message ) );

					wp.a11y.speak( data.message );

				}

				self.pages.search = -1;

			});

			self.currentRequest.always(function() {

				$section.removeClass( 'loading loading-more' );

				$content.attr( 'aria-busy', 'false' );

				self.loading = false;

				self.currentRequest = null;

			});

		},

		// Render the individual items.

		initList: function() {

			var self = this;

			// Render the template for each item by type.

			_.each( api.Menus.data.itemTypes, function( itemType ) {

				self.pages[ itemType.type + ':' + itemType.object ] = 0;

			} );

			self.loadItems( api.Menus.data.itemTypes );

		},

		/**

		 * Load available nav menu items.

		 *

		 * @since 4.3.0

		 * @since 4.7.0 Changed function signature to take list of item types instead of single type/object.

		 * @access private

		 *

		 * @param {Array.<object>} itemTypes List of objects containing type and key.

		 * @param {string} deprecated Formerly the object parameter.

		 * @returns {void}

		 */

		loadItems: function( itemTypes, deprecated ) {

			var self = this, _itemTypes, requestItemTypes = [], params, request, itemTemplate, availableMenuItemContainers = {};

			itemTemplate = wp.template( 'available-menu-item' );

			if ( _.isString( itemTypes ) && _.isString( deprecated ) ) {

				_itemTypes = [ { type: itemTypes, object: deprecated } ];

			} else {

				_itemTypes = itemTypes;

			}

			_.each( _itemTypes, function( itemType ) {

				var container, name = itemType.type + ':' + itemType.object;

				if ( -1 === self.pages[ name ] ) {

					return; // Skip types for which there are no more results.

				}

				container = $( '#available-menu-items-' + itemType.type + '-' + itemType.object );

				container.find( '.accordion-section-title' ).addClass( 'loading' );

				availableMenuItemContainers[ name ] = container;

				requestItemTypes.push( {

					object: itemType.object,

					type: itemType.type,

					page: self.pages[ name ]

				} );

			} );

			if ( 0 === requestItemTypes.length ) {

				return;

			}

			self.loading = true;

			params = api.previewer.query( { excludeCustomizedSaved: true } );

			_.extend( params, {

				'customize-menus-nonce': api.settings.nonce['customize-menus'],

				'wp_customize': 'on',

				'item_types': requestItemTypes

			} );

			request = wp.ajax.post( 'load-available-menu-items-customizer', params );

			request.done(function( data ) {

				var typeInner;

				_.each( data.items, function( typeItems, name ) {

					if ( 0 === typeItems.length ) {

						if ( 0 === self.pages[ name ] ) {

							availableMenuItemContainers[ name ].find( '.accordion-section-title' )

								.addClass( 'cannot-expand' )

								.removeClass( 'loading' )

								.find( '.accordion-section-title > button' )

								.prop( 'tabIndex', -1 );

						}

						self.pages[ name ] = -1;

						return;

					} else if ( ( 'post_type:page' === name ) && ( ! availableMenuItemContainers[ name ].hasClass( 'open' ) ) ) {

						availableMenuItemContainers[ name ].find( '.accordion-section-title > button' ).click();

					}

					typeItems = new api.Menus.AvailableItemCollection( typeItems ); // @todo Why is this collection created and then thrown away?

					self.collection.add( typeItems.models );

					typeInner = availableMenuItemContainers[ name ].find( '.available-menu-items-list' );

					typeItems.each( function( menuItem ) {

						typeInner.append( itemTemplate( menuItem.attributes ) );

					} );

					self.pages[ name ] += 1;

				});

			});

			request.fail(function( data ) {

				if ( typeof console !== 'undefined' && console.error ) {

					console.error( data );

				}

			});

			request.always(function() {

				_.each( availableMenuItemContainers, function( container ) {

					container.find( '.accordion-section-title' ).removeClass( 'loading' );

				} );

				self.loading = false;

			});

		},

		// Adjust the height of each section of items to fit the screen.

		itemSectionHeight: function() {

			var sections, lists, totalHeight, accordionHeight, diff;

			totalHeight = window.innerHeight;

			sections = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .accordion-section-content' );

			lists = this.$el.find( '.accordion-section:not( #available-menu-items-search ) .available-menu-items-list:not(":only-child")' );

			accordionHeight =  46 * ( 1 + sections.length ) + 14; // Magic numbers.

			diff = totalHeight - accordionHeight;

			if ( 120 < diff && 290 > diff ) {

				sections.css( 'max-height', diff );

				lists.css( 'max-height', ( diff - 60 ) );

			}

		},

		// Highlights a menu item.

		select: function( menuitemTpl ) {

			this.selected = $( menuitemTpl );

			this.selected.siblings( '.menu-item-tpl' ).removeClass( 'selected' );

			this.selected.addClass( 'selected' );

		},

		// Highlights a menu item on focus.

		focus: function( event ) {

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

		},

		// Submit handler for keypress and click on menu item.

		_submit: function( event ) {

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

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

				return;

			}

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

		},

		// Adds a selected menu item to the menu.

		submit: function( menuitemTpl ) {

			var menuitemId, menu_item;

			if ( ! menuitemTpl ) {

				menuitemTpl = this.selected;

			}

			if ( ! menuitemTpl || ! this.currentMenuControl ) {

				return;

			}

			this.select( menuitemTpl );

			menuitemId = $( this.selected ).data( 'menu-item-id' );

			menu_item = this.collection.findWhere( { id: menuitemId } );

			if ( ! menu_item ) {

				return;

			}

			this.currentMenuControl.addItemToMenu( menu_item.attributes );

			$( menuitemTpl ).find( '.menu-item-handle' ).addClass( 'item-added' );

		},

		// Submit handler for keypress and click on custom menu item.

		_submitLink: function( event ) {

			// Only proceed with keypress if it is Enter.

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

				return;