/// <reference path="../jquery.d.ts" />
/// <reference path="jquery.tmpl.d.ts" />
/// <reference path="../../lib/localize.d.ts" />
interface JQuery {
	advancedSelect: any;
}

interface AdvancedSelectOptions {
	onChange: () => void;
	selected?: number;
	placeholder?: string;
	numbersOnly?: boolean;
}

(function ($: JQueryStatic) {

	$.fn.advancedSelect = function (options: AdvancedSelectOptions) {

		let $select = $(this);
		$select.hide();
		$select.on('change', options.onChange);

		let selected = options.selected || $select.find('option').first().text();
		if (selected == 1000000) { // tslint:disable-line
			selected = $.localize('All', '~/Views/Page/Overlay/Sort.cshtml');
		}

		$select.val(selected);

		let $dropdown = $.tmpl('Tmpl-knoema-overlay-advanced-select', {
			selected: selected,
			placeholder: options.placeholder || 'Enter option'
		});

		let $ulDropdownMenu = $dropdown.find('ul.dropdown-menu');
		let $inputHolder = $dropdown.find('.custom-value-input-holder');

		$dropdown.on('click', (e): void => {
			if (!$(e.target).is($inputHolder) && !$(e.target).is($inputHolder.find('input'))) {
				$dropdown.toggleClass('open');
			}
		})

		$select.find('option').each(function(): void {
			let value = $(this).val();
			let valueToDisplay = $(this).text();
			$ulDropdownMenu.append($(`<li><a href="#" data-display-value="${valueToDisplay}" data-value="${value}">${valueToDisplay}</a></li>`));
		});
		$dropdown.insertAfter($select);

		$ulDropdownMenu.find('a').on('click', function(): boolean {
			$select.val($(this).data('value'));
			$dropdown.find('.selected-value').text($(this).data('display-value'));
			$dropdown.removeClass('open');
			$select.trigger('change');
			return false;
		});

		// tslint:disable-next-line
		$inputHolder.on('keydown blur', 'input', function(event: JQueryEventObject) {
			let $input = $(event.target);

			if (
				//prevent second change event after $input.val('')
				event.type === 'blur' ||

				//backspace, delete, tab, escape preseed
				//event.keyCode==46||event.keyCode==8||event.keyCode==9||event.keyCode==27||
				[46, 8, 9, 27].indexOf(event.keyCode) > -1 ||

				//ctrl + A pressed
				(event.keyCode === 65 && event.ctrlKey) ||

				//home, end, left, right pressed
				(event.keyCode >= 35 && event.keyCode <= 39)
				) {

				return;

			} else {
				//numbers
				if (options.numbersOnly && event.keyCode !== 13 && (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
					event.preventDefault();
				}
				if (event.keyCode === 13 || event.type === 'blur') {
					let newValue = $input.val() || $select.find('option').first().text();

					$select.append(`<option>${newValue}</option>`);
					$select.val(newValue);
					$dropdown.find('.selected-value').text(newValue);
					$dropdown.removeClass('open');
					$select.trigger('change');
					setTimeout((): void => {
						$input.val('');
					}, 100);
				}
			}
		});

		return this;
	};

})(jQuery);