/* global wp, jQuery */
wp.customize.controlConstructor['kirki-fontawesome'] = wp.customize.kirkiDynamicControl.extend({

	initKirkiControl: function( control ) {
		var self = this;
		
		control.container.on( 'click', '.kirki-fontawesome-picker-btn', function( e ) {
			e.preventDefault();
			self.togglePicker( control );
		});

		control.container.on( 'click', '.kirki-fontawesome-tab', function( e ) {
			e.preventDefault();
			self.switchTab( control, jQuery( this ).data( 'tab' ) );
		});

		control.container.on( 'click', '.kirki-fontawesome-icons-container i', function( e ) {
			e.preventDefault();
			self.selectIcon( control, jQuery( this ).data( 'icon' ) );
		});

		control.container.on( 'input', '.kirki-fontawesome-search', function( e ) {
			self.searchIcons( control, jQuery( this ).val() );
		});

		control.container.on( 'input change', '.kirki-fontawesome-input', function( e ) {
			self.updatePreview( control, jQuery( this ).val() );
		});

		// Close picker when clicking outside
		jQuery( document ).on( 'click', function( e ) {
			if ( ! jQuery( e.target ).closest( '.kirki-fontawesome-control' ).length ) {
				self.closePicker( control );
			}
		});

		// Initialize preview
		self.updatePreview( control, control.setting.get() );
	},

	togglePicker: function( control ) {
		var picker = control.container.find( '.kirki-fontawesome-picker-popover' );
		picker.toggleClass( 'active' );
	},

	closePicker: function( control ) {
		var picker = control.container.find( '.kirki-fontawesome-picker-popover' );
		picker.removeClass( 'active' );
	},

	switchTab: function( control, tab ) {
		// Update tab buttons
		control.container.find( '.kirki-fontawesome-tab' ).removeClass( 'active' );
		control.container.find( '.kirki-fontawesome-tab[data-tab="' + tab + '"]' ).addClass( 'active' );

		// Update tab content
		control.container.find( '.kirki-fontawesome-icons-tab' ).removeClass( 'active' );
		control.container.find( '.kirki-fontawesome-icons-' + tab ).addClass( 'active' );
	},

	selectIcon: function( control, icon ) {
		var input = control.container.find( '.kirki-fontawesome-input' );
		input.val( icon ).trigger( 'change' );
		this.updatePreview( control, icon );
		this.closePicker( control );
	},

	updatePreview: function( control, icon ) {
		var preview = control.container.find( '.kirki-fontawesome-preview i' );
		preview.attr( 'class', 'fa ' + icon );
		
		// Hide preview if no icon selected
		if ( ! icon || icon === '' ) {
			preview.hide();
		} else {
			preview.show();
		}
	},

	searchIcons: function( control, searchTerm ) {
		var activeTab = control.container.find( '.kirki-fontawesome-icons-tab.active' );
		var icons = activeTab.find( 'i' );
		
		if ( searchTerm === '' ) {
			icons.show();
			return;
		}

		searchTerm = searchTerm.toLowerCase();
		
		icons.each( function() {
			var icon = jQuery( this );
			var iconName = icon.data( 'icon' ).toLowerCase();
			
			if ( iconName.indexOf( searchTerm ) !== -1 ) {
				icon.show();
			} else {
				icon.hide();
			}
		});
	}

});

// Support for repeater fields
jQuery( document ).ready( function( $ ) {
	
	// Initialize FontAwesome controls in repeater
	$( document ).on( 'kirki-repeater-row-added', function( e, row ) {
		initializeFontAwesomeInRow( row );
	});

	function initializeFontAwesomeInRow( row ) {
		var fontAwesomeControls = row.find( '.kirki-fontawesome-control' );
		
		fontAwesomeControls.each( function() {
			var control = $( this );
			
			// Picker toggle
			control.on( 'click', '.kirki-fontawesome-picker-btn', function( e ) {
				e.preventDefault();
				togglePickerInRow( control );
			});

			// Tab switching
			control.on( 'click', '.kirki-fontawesome-tab', function( e ) {
				e.preventDefault();
				switchTabInRow( control, $( this ).data( 'tab' ) );
			});

			// Icon selection
			control.on( 'click', '.kirki-fontawesome-icons-container i', function( e ) {
				e.preventDefault();
				selectIconInRow( control, $( this ).data( 'icon' ) );
			});

			// Search
			control.on( 'input', '.kirki-fontawesome-search', function( e ) {
				searchIconsInRow( control, $( this ).val() );
			});

			// Input change
			control.on( 'input change', '.kirki-fontawesome-input', function( e ) {
				updatePreviewInRow( control, $( this ).val() );
			});
		});
	}

	function togglePickerInRow( control ) {
		var picker = control.find( '.kirki-fontawesome-picker-popover' );
		picker.toggleClass( 'active' );
	}

	function switchTabInRow( control, tab ) {
		control.find( '.kirki-fontawesome-tab' ).removeClass( 'active' );
		control.find( '.kirki-fontawesome-tab[data-tab="' + tab + '"]' ).addClass( 'active' );
		control.find( '.kirki-fontawesome-icons-tab' ).removeClass( 'active' );
		control.find( '.kirki-fontawesome-icons-' + tab ).addClass( 'active' );
	}

	function selectIconInRow( control, icon ) {
		var input = control.find( '.kirki-fontawesome-input' );
		input.val( icon ).trigger( 'change' );
		updatePreviewInRow( control, icon );
		control.find( '.kirki-fontawesome-picker-popover' ).removeClass( 'active' );
	}

	function updatePreviewInRow( control, icon ) {
		var preview = control.find( '.kirki-fontawesome-preview i' );
		preview.attr( 'class', 'fa ' + icon );
		
		if ( ! icon || icon === '' ) {
			preview.hide();
		} else {
			preview.show();
		}
	}

	function searchIconsInRow( control, searchTerm ) {
		var activeTab = control.find( '.kirki-fontawesome-icons-tab.active' );
		var icons = activeTab.find( 'i' );
		
		if ( searchTerm === '' ) {
			icons.show();
			return;
		}

		searchTerm = searchTerm.toLowerCase();
		
		icons.each( function() {
			var icon = $( this );
			var iconName = icon.data( 'icon' ).toLowerCase();
			
			if ( iconName.indexOf( searchTerm ) !== -1 ) {
				icon.show();
			} else {
				icon.hide();
			}
		});
	}

	// Close picker when clicking outside
	$( document ).on( 'click', function( e ) {
		if ( ! $( e.target ).closest( '.kirki-fontawesome-control' ).length ) {
			$( '.kirki-fontawesome-picker-popover' ).removeClass( 'active' );
		}
	});

});
