/**
 * Dashicons Picker
 *
 * Based on: https://github.com/contactjavas/jquery-icon-picker/
 */

(function ($) {

	/**
	 *
	 * @returns {void}
	 */
	$.fn.iconPicker = function () {

		/**
		 * Icons
		 *
		 * @type Array
		 */
		var icons = iconPickerIcons ? iconPickerIcons : [];

		return this.each(function () {

			var eventType = this.tagName.toLowerCase() === "button" ? "click" : "focus";

      $(this).on(eventType, function (e) {
        createPopup(this);
      });


			function createPopup(field) {

				var boxWidth = field.dataset.width;

				var popup = $('<div class="icon-picker-container"> \
						<div class="icon-picker-control" /> \
						<ul class="icon-picker-list" /> \
					</div>' ),
					list = popup.find('.icon-picker-list');

				// if (boxWidth) popup.width(boxWidth);

				for (var i in icons) {
					list.append('<li data-icon="' + icons[i] + '"><a href="#" title="' + icons[i] + '"><span class="' + icons[i] + '"></span></a></li>');
				};

				$('a', list).click(function (e) {
					e.preventDefault();
					var title = $(this).attr('title');
					field.dataset.icon = title;

					if (field.tagName.toLowerCase() === "input") {
						var prevVal = field.value;
						field.value = '' + title;
						if (field.value !== prevVal) field.dispatchEvent(new Event('change'));
					}

					$(document).trigger('iconPicker:selected', [field, title]);

					field.blur();
					removePopup();
				});

				var control = popup.find('.icon-picker-control');

				control.prepend('<a data-direction="back" href="#"> \
					<span class="dashicons dashicons-arrow-left-alt2"></span></a> \
					<span class="icon-picker--search-wrapper"><input type="text" class="" placeholder="Search" /></span> \
					<a data-direction="forward" href="#"><span class="dashicons dashicons-arrow-right-alt2"></span></a>'
				);

				$('a', control).click(function (e) {
					e.preventDefault();
					if ($(this).data('direction') === 'back') {
						$('li:gt(' + (icons.length - 26) + ')', list).prependTo(list);
					} else {
						$('li:lt(25)', list).appendTo(list);
					}
				});

				popup.appendTo(field.parentNode).show();

				$('input', control).on('keyup', function (e) {
					var search = $(this).val();
					if (search === '') {
						$('li:lt(25)', list).show();
					} else {
						$('li', list).each(function () {
							if ($(this).data('icon').toLowerCase().indexOf(search.toLowerCase()) !== -1) {
								$(this).show();
							} else {
								$(this).hide();
							}
						});
					}
				});

				$(document).bind('mouseup.icon-picker', function (e) {
					if (e.target !== field && !popup.is(e.target) && popup.has(e.target).length === 0) {
						removePopup();
					}
				});
			}

			function removePopup() {
				$('.icon-picker-container').remove();
				$(document).unbind('.icon-picker');
			}
		});
	};

	$(function () {
		$('.icon-picker').iconPicker();
	});

}(jQuery));
