/**
 * Displays contextual info after input element.
 *
 * @package Contextual Info
 */

( function( $ ) {

	/**
	 * Contextual info jQuery plugin
	 *
	 * @param settings
	 * @returns {*}
	 */
	$.fn.contextualInfo = function( settings ) {
		let config = $.extend(
			{
				'id': '',
				'phrases': [],
				'info_html': '',
			},
			settings
		);

		return this.each(
			function() {
				let $element = $( this );
				createInfoHTMLElement( $element );
				toggleInfoElement( $element );
				$element.keyup(
					function() {
						toggleInfoElement( $element );
					}
				);
			}
		);

		/**
		 * .
		 *
		 * @param $element
		 * @returns {string}
		 */
		function prepareInfoElementId( $element ) {
			return $element.attr( 'id' ) + "_" + config.id;
		}

		/**
		 * Create HTML info element.
		 *
		 * @param $element
		 */
		function createInfoHTMLElement( $element ) {
			$( $element ).after(
				function() {
					return '<p class="description" id="' + prepareInfoElementId( $element ) + '" style="display: none;">' + config.info_html + "</p>";
				}
			);
		}

		/**
		 * Toggle info element: show when element contains one or more phrases.
		 *
		 * @param $element
		 */
		function toggleInfoElement($element) {
			let element_value = $element.val().toLowerCase();
			let show_info     = false;
			$( config.phrases ).each(
				function( index, value ) {
					let phrase_value = value.toLowerCase();
					show_info        = show_info || element_value.indexOf( phrase_value ) !== -1;
				}
			);
			$( '#' + $element.attr( 'id' ) + "_" + config.id ).toggle( show_info );
		}
	}
})( jQuery );