/* global jQuery, soWidgets */

( function( $ ) {

	var iconWidgetCache = {};

	$(document).on( 'sowsetupformfield', '.siteorigin-widget-field-type-icon', function(e) {
		var $$ = $(this),
			$is = $$.find('.siteorigin-widget-icon-selector'),
			$v = $is.find('.siteorigin-widget-icon-icon'),
			$b = $$.find('.siteorigin-widget-icon-selector-current'),
			$remove = $$.find( '.so-icon-remove' ),
			$search = $$.find( '.siteorigin-widget-icon-search' );

		if ( $$.data( 'initialized' ) ) {
			return;
		}

		// Clicking on the button should display the icon selector
		$b.click( function(){
			$is.slideToggle();
			$search.val( '' );
			searchIcons();
		} );

		// Clicking on the remove button
		$remove.click( function( e ){
			e.preventDefault();

			// Trigger a click on the existing icon to remove it.
			$$.find('.siteorigin-widget-active').click();
		} );

		var searchIcons = function(){
			var q = $search.val().toLowerCase();
			if( q === '' ) {
				$is.find('.siteorigin-widget-icon-icons-icon').show();
			}
			else {
				$is.find('.siteorigin-widget-icon-icons-icon').each( function(){
					var $$ = $( this ),
						value = $$.attr( 'data-value' );

					value = value.replace( /-/, ' ' );
					if( value.indexOf( q ) === -1 ) {
						$$.hide();
					}
					else {
						$$.show();
					}
				} );
			}
		};

		$search.keyup( searchIcons ).change( searchIcons );

		var rerenderIcons = function() {
			var family = $is.find('select.siteorigin-widget-icon-family').val();
			var container = $is.find('.siteorigin-widget-icon-icons');

			if(typeof iconWidgetCache[family] === 'undefined') {
				return;
			}

			container.empty();

			if( $('#'+'siteorigin-widget-font-'+family).length === 0) {

				$("<link rel='stylesheet' type='text/css'>")
					.attr('id', 'siteorigin-widget-font-' + family)
					.attr('href', iconWidgetCache[family].style_uri)
					.appendTo('head');
			}

			for ( var i in iconWidgetCache[family].icons ) {

				var icon = $('<div data-sow-icon="' + iconWidgetCache[family].icons[i] +  '"/>')
					.attr('data-value', family + '-' + i)
					.addClass( 'sow-icon-' + family )
					.addClass( 'siteorigin-widget-icon-icons-icon' )
					.click(function(){
						var $$ = $(this);

						if( $$.hasClass('siteorigin-widget-active') ) {
							// This is being unselected
							$$.removeClass('siteorigin-widget-active');
							$v.val( '' );

							// Hide the button icon
							$b.find('span').hide();

							$remove.hide();
						}
						else {
							// This is being selected
							container.find('.siteorigin-widget-icon-icons-icon').removeClass('siteorigin-widget-active');
							$$.addClass('siteorigin-widget-active');
							$v.val( $$.data('value') );

							// Also add this to the button
							$b.find('span')
								.show()
								.attr( 'data-sow-icon', $$.attr('data-sow-icon') )
								.attr( 'class', '' )
								.addClass( 'sow-icon-' + family );

							$remove.show();
						}

						$v.trigger( 'change', { isRendering: true });

						// Hide the icon selector
						$is.slideUp();
					});

				container.append(icon);

				if( $v.val() === family + '-' + i ) {
					// Add selected icon to the button.
					$b.find('span')
						.show()
						.attr( 'data-sow-icon', icon.attr('data-sow-icon') )
						.attr( 'class', '' )
						.addClass( 'sow-icon-' + family );
					icon.addClass('siteorigin-widget-active');
				}
			}

			// Move a selected item to the first position
			container.prepend( container.find('.siteorigin-widget-active') );

			searchIcons();
		};

		// Create the function for changing the icon family and call it once
		var changeIconFamily = function(){
			// Fetch the family icons from the server
			var family = $is.find('select.siteorigin-widget-icon-family').val();

			var dataIcons = $is.find('select.siteorigin-widget-icon-family option:selected' ).data('icons');
			if( dataIcons !== null ) {
				iconWidgetCache[family] = dataIcons;
			}


			if(typeof family === 'undefined' || family === '') {
				return;
			}

			if(typeof iconWidgetCache[family] === 'undefined') {
				$.getJSON(
					soWidgets.ajaxurl,
					{
						'action' : 'siteorigin_widgets_get_icons',
						'family' :  $is.find('select.siteorigin-widget-icon-family').val()
					},
					function(data) {
						iconWidgetCache[family] = data;
						rerenderIcons();
					}
				);
			}
			else {
				rerenderIcons();
			}
		};
		changeIconFamily();

		$is.find('select.siteorigin-widget-icon-family').change(function(){
			$is.find('.siteorigin-widget-icon-icons').empty();
			changeIconFamily();
		});

		$v.change( function ( event, data ) {
			if ( ! ( data && data.isRendering ) ) {
				rerenderIcons();
			}
		} );

		$$.data( 'initialized', true );
	} );

} )( jQuery );