/** --- SELECT2 PRE CONFIGS ----------------------------------- */

var select2Default = {width: '100%'};

var select2DefaultMultiple = {
	width: '100%',
	templateSelection: removableByOnclick,
	escapeMarkup: function(m) { return m; }
};

var tagsConfig = {
	minimumInputLength: 0,
	placeholder: 'Select tag / s',
	width: '100%',
	ajax: {
		url: "/app/api/getTags?keyValue=value",
		dataType: 'json',
		delay: 250,
		data: function (params) {
			return {
				tagName: params.term
			};
		},
		processResults: function (data) {
			return {
				results: data
			};
		}
	},
	templateSelection: removableByOnclick,
	escapeMarkup: function(m) { return m; }
};

/** --- DOCUMENT READY ---------------------------------------- */

$(document).ready(function(){

	$("body").on("initAfterLoad", function() {

		// make position li item select2
		menuPositions();

		// make funnels selection select2
		select2Funnels();

		// make change status (funnel) select2
		select2PositionChangeFunnel();

		// make candidate moving to funnel dropdown generated by select2
		select2CandidateDetailMoveToFunnel();

		// make all _select2-tags elements to select2
		select2Tags();

		// make all _select2-default elements to select2
		defaultSelect2Elements();

		// candidate overview tags adding / removing / view
		candidateOverviewTags();

		// overview tags adding / removing / view
        tagsList();

		// initialize minimalistics select2
		miniSelect2Elements();

		// import candidates page -> addnew position
		$('#choosePositionToImport').select2({
			width: '100%',
			minimumResultsForSearch: Infinity,
			theme: 'mini'
		}).on("select2:select", function(e) {
			var position = e.params.data;

			if ( $(position.element).attr('id') == 'createNewPosition' ) {
				// display modal
				$('#addPositionModal').modal().show();

				// reset select2 to make Create new clickable again
				$("._select2-positions").select2("val", "");
			}
		});

	});

});

/** --- OTHER FUNCTIONS --------------------------------------- */

function miniSelect2Elements() {

	$("._select2-mini").each(function() {

		var miniConfig = {
			width: '100%',
			minimumResultsForSearch: Infinity,
			theme: 'mini'
		};

		// allow clear data is set add it to config
		if ( $(this).data('allow-clear') ) {
			miniConfig.allowClear = $(this).data('allow-clear');
		}

		if ( $(this).data('allow-search') ) {
			miniConfig.minimumResultsForSearch = 0;
		}

		// set special placeholder defined in data-placeholder attribute of element
		if ( $(this).data('placeholder') ) {
			miniConfig.placeholder = $(this).data('placeholder');
		}

		if ( $(this).attr('multiple') ) {
			miniConfig.templateSelection = removableByOnclick;
			miniConfig.escapeMarkup = function(m) { return m; };

			// if select box is multiple we want make selected items removable by clicking on them -> this is set in select2DefaultMultiple config
			$(this).select2(miniConfig);
		} else {
			// else if selectbox is not multiple values we want to use default select2 config
			$(this).select2(miniConfig);
		}
	});

}

function defaultSelect2Elements() {

	$("._select2-default").each(function() {

		// set special placeholder defined in data-placeholder attribute of element
		select2Default.placeholder = $(this).attr('data-placeholder');

		if ( $(this).attr('multiple') ) {
			// if select box is multiple we want make selected items removable by clicking on them -> this is set in select2DefaultMultiple config
			$(this).select2(select2DefaultMultiple);
		} else {
			// else if selectbox is not multiple values we want to use default select2 config
			$(this).select2(select2Default);
		}
	});

}

/**
 * Function make all elements with _select2-tags class to be select2 getting available tags by ajax
 */
function select2Tags() {

	$("._select2-tags").each(function() {
		$(this).select2(tagsConfig);
	});

}

/**
 * Function defines that tag should be removed by clicking on it
 *
 * @param data
 * @returns {string}
 */
function removableByOnclick (data) {

	return '<a class="select2-selection__choice__remove">' + data.text + '</a>';

}

function withParam(state) {
	var originalOption = state.element;
	return $(originalOption).data('param');
}

/**
 * Function makes candidate's tags on overview page
 */
function menuPositions() {

	var menuPositions = $('._select2-positions').select2({
		minimumInputLength: 0,
		placeholder: 'Positions',
		width: '300px',
		theme: 'menuPositions',
		allowClear: true,
		minimumResultsForSearch: 3 // 3 because 1 is empty, last is create one and in the middle we need at least 1 position
	}).on("select2:select", function(e) {
		var position = e.params.data;

		if ( $(position.element).attr('id') == 'createNewPosition' ) {
			// display modal
			$('#addPositionModal').modal().show();

			// reset select2 to make Create new clickable again
			$("._select2-positions").select2("val", "");
		} else {
			window.location.href = position.id;
		}
	}).on('select2:close', function(e) {
		$('._open-positions-select').removeClass('opened');
	});

	// open select2 results by clicking on menu item
	$('body').off('click', '._open-positions-select');
	$('body').on('click', '._open-positions-select', function (e) {
		e.preventDefault();

		// open / close select2 results
		if ( $(this).hasClass('opened') ) {
			menuPositions.select2("close");
			$(this).removeClass('opened');
		} else {
			menuPositions.select2("open");
			$(this).addClass('opened');
		}

		// set height of result one half of window viewport
		var maxHeight = ( $(window).height() / 2 ) + 'px';
		$('.select2-container--menuPositions').find('.select2-results').css('max-height', maxHeight);
		getMaxHeightOfSelectResults('._select2-positions', '.select2-container--menuPositions');

		return false;

	});

}

/**
 * Function makes funnels in stages select2
 */
function select2Funnels() {
	var funnels = [];

	$('._select2-funnels').each(function() {
		// key from select element like all / not hired / new ...
		var key = $(this).data('key');

		funnels[key] = $(this).select2({
			minimumInputLength: 0,
			width: '204px',
			theme: 'funnels'
		}).on("select2:select", function(e) {
			var funnel = e.params.data;
			window.location.href = funnel.id;
		});

		// open select2 results by clicking on menu item
		$('body').off('click', '._open-funnels-select');
		$('body').on('click', '._open-funnels-select', function (e) {
			e.preventDefault();

			key = $(this).data('key');
			funnels[key].select2("open");

			return false;
		});
		
	});
}

/**
 * Function makes change status in position detail by select2 and call ajax function to move candidate to funnel
 */
function select2PositionChangeFunnel() {

	var changeFunnel = $('._select2-change-status').select2({
		minimumInputLength: 0,
		width: '160px',
		theme: 'funnels'
	}).on("select2:select", function(e) {

        var candidateIds = getCandidateIds(),
            url = $(e.params.data.element).data('url');

        if(candidateIds) {
			$.ajax({
				type: "GET",
				url: url,
				data: {
                    candidate: candidateIds.join(','),
                    funnel: e.params.data.id
                },
				dataType: 'json'
			}).done(function (response) {
				reloadContent();
			});
		}
	});

	// open select2 results by clicking on menu item
	$('body').off('click', '._open-change-status-select');
	$('body').on('click', '._open-change-status-select', function (e) {
		e.preventDefault();

		changeFunnel.select2("open");
		getMaxHeightOfSelectResults('.select2-change-status', '.select2-container--funnels');

		return false;
	});

}

/**
 * Function makes candidate's move to funnel dropdown generated by select2 and call ajax function to move this candidate to particular funnel
 */
function select2CandidateDetailMoveToFunnel() {

	// default theme to move into positions is gree-see but in some cases we have to have possibility to change this theme -> we can do it by data-theme
	var theme = $('._select2-move-to-funnel').data('theme');
	if ( theme === undefined ) { theme = 'green-see'; }

	var moveToFunnel = $('._select2-move-to-funnel').select2({
		minimumInputLength: 0,
		width: '180px',
		theme: theme
	}).on("select2:select", function(e) {

		var data = {
			candidate: $(e.params.data.element).data('candidate-id'),
			funnel: e.params.data.id
		};

		var url = $(e.params.data.element).data('url');

		if (data.candidate) {
			$.ajax({
				type: "GET",
				url: url,
				data: data,
				dataType: 'json'
			}).done(function (response) {
				location.reload();
			});
		}

	});

	// open select2 results by clicking on menu item
	$('body').off('click', '._open-move-to-funnel-select');
	$('body').on('click', '._open-move-to-funnel-select', function (e) {
		e.preventDefault();

		moveToFunnel.select2("open");
		getMaxHeightOfSelectResults('.select2-move-to-funnel', '.select2-container--green-see');

		return false;
	});

}

/**
 * Function makes candidate's tags on overview page
 */
function candidateOverviewTags() {

	$('._candidate-overview-tags').select2({
		minimumInputLength: 0,
		width: '100%',
		placeholder: 'Select tag / s',
		tags: true,
		templateSelection: removableByOnclick,
		escapeMarkup: function(m) { return m; },
		ajax: {
			url: "/app/api/getTags?keyValue=value",
			dataType: 'json',
			delay: 250,
			data: function (params) {
				return {
					tagName: params.term
				};
			},
			processResults: function (data) {
				return {
					results: data
				};
			}
		},
		createTag: function (tag) {
			return {
				id: tag.term,
				text: tag.term,
				isNew : true
			};
		}
	}).on("select2:select", function(e) {
		var tag = e.params.data;
		var candidateId = $(this).data('candidate-id');

		$.ajax({
			method: "POST",
			url: "/app/api/saveCandidateTag",
			data: {text: tag.text, candidateId: candidateId}
		}).done(function (result) {
			result = JSON.parse(result);

			if ( result.status != 200 ) {
				$('.select2-selection__choice[title="' + tag.text + '"]').addClass('tag-error');
			}
		});

	}).on("select2:unselect", function(e) {
		var tag = e.params.data;
		var candidateId = $(this).data('candidate-id');

		$.ajax({
			method: "POST",
			url: "/app/api/removeCandidateTag",
			data: {text: tag.text, candidateId: candidateId}
		});
	});
}

/**
 * Function give a list of tags
 */
function tagsList() {

	$('._tags-list').select2({
		minimumInputLength: 0,
		width: '100%',
		placeholder: 'Select tag / s',
		tags: true,
		templateSelection: removableByOnclick,
		escapeMarkup: function(m) { return m; },
		ajax: {
			url: "/app/api/getTags?keyValue=value",
			dataType: 'json',
			delay: 250,
			data: function (params) {
				return {
					tagName: params.term
				};
			},
			processResults: function (data) {
				return {
					results: data
				};
			}
		},
		createTag: function (tag) {
			return {
				id: tag.term,
				text: tag.term,
				isNew : true
			};
		}
	});
}

/**
 * Function set select2 results to max height calculated from position of element in window and window height
 *
 * @param select
 * @param themeSelector
 */
function getMaxHeightOfSelectResults(select, themeSelector) {
	var windowHeight = $(window).height();

	var selectTop = $(select).offset().top;
	var selectBottom = windowHeight - selectTop;

	// if element is to close to window end select2 will make dropdown result above not below so:
	if ( selectBottom - 150 > 0 ) {
		// if select is not so close to end of window, make small dropdown below select2
		var maxHeight = Math.round((windowHeight - selectTop) * 0.7) + 'px';
	} else {
		// if select is so close to end of window, make bigger dropdown above select2
		var maxHeight = Math.round((windowHeight - selectBottom) * 0.7) + 'px';
	}

	$(themeSelector).find('.select2-results').css('max-height', maxHeight);
}