let container;
let trigger;
let arrow;
let selectedText;
let optionsList;
let options;
let hiddenField;
let isExpanded = false;

window.addEventListener('DOMContentLoaded', function (e) {
	container = document.querySelector('.custom-select');
	trigger = document.querySelector('.custom-select .trigger');
	arrow = document.querySelector('.custom-select .icon');
	selectedText = document.getElementById('selected-text');
	optionsList = document.querySelector('.custom-select .options');
	options = document.querySelectorAll('.custom-select .options li');
	hiddenField = document.getElementById('hidden-field');

	// Handle keyboard and mouse interactions on the trigger bar
	if (trigger) {
		trigger.addEventListener('keydown', handleTriggerKeypresses);
		trigger.addEventListener('click', handleTriggerClick);

		// Select options when they are clicked
		options.forEach(function (option) {
			option.addEventListener('click', function (e) {
				unselectAllOptions();
				selectOption(e.target);
				collapseOptions();
				trigger.focus();
			});
		});

		// Collapse the dropdown when the user clicks off
		document.addEventListener('click', handleBodyClick);
	}
});


/**
  Event handlers
 */
function handleTriggerKeypresses (e) {
	switch (e.key) {
		case 'ArrowUp':
			e.preventDefault();

			if (isExpanded) {
				selectPreviousOption();
			} else {
				expandOptions();
			}

			break;

		case 'ArrowDown':
			e.preventDefault();

			if (isExpanded) {
				selectNextOption();
			} else {
				expandOptions();
				selectFirstOption();
			}

			break;

		case 'Home':
			if (isExpanded) {
				selectFirstOption();
			}

			break;

		case 'End':
			if (isExpanded) {
				selectLastOption();
			}

			break;

		case 'Tab':
			collapseOptions();
			break;

		case 'Escape':
		case 'Enter':

			if (isExpanded) {
				e.preventDefault();
				collapseOptions(e);
			}

			break;
	}
}

function handleBodyClick (e) {
	if (!container.contains(e.target) && isExpanded) {
		collapseOptions();
	}
}

function handleTriggerClick () {
	if (isExpanded) {
		collapseOptions();
		trigger.focus();
	} else {
		expandOptions();
	}
}

/**
 * Toggle arrow position
 */
function toggleArrowPosition (shouldToggle) {
	if (shouldToggle) {
		arrow.classList.add('expanded');
	} else {
		arrow.classList.remove('expanded');
	}
}


/**
  Show/hide option list
 */
function collapseOptions (e = null) {
	trigger.setAttribute('aria-expanded', false);
	optionsList.classList.remove('is-visible');
	isExpanded = false;
	toggleArrowPosition(false);

	if (e) {
		let currentOption = document.getElementById(trigger.getAttribute('aria-activedescendant'));

		if (currentOption !== undefined && e.key == 'Enter') {
			let currentOptionIndex = Array.prototype.slice.call(options).indexOf(currentOption);

			options[currentOptionIndex].click();
		}
	}
}

function expandOptions () {
	trigger.setAttribute('aria-expanded', true);
	optionsList.classList.add('is-visible');
	isExpanded = true;
	toggleArrowPosition(true);
}

/**
  Option selection
 */
function selectFirstOption () {
	let firstOption = options[0];
	selectOption(firstOption);
}

function selectLastOption () {
	let lastOption = options[options.length - 1];
	selectOption(lastOption);
}

function selectNextOption () {
	let currentOption = document.getElementById(trigger.getAttribute('aria-activedescendant'));

	if (currentOption !== undefined) {
		let currentOptionIndex = Array.prototype.slice.call(options).indexOf(currentOption);

		if (currentOptionIndex + 1 < options.length) {
			let nextOption = options[currentOptionIndex + 1];
			selectOption(nextOption);
		}
	}
}

function selectPreviousOption () {
	let currentOption = document.getElementById(trigger.getAttribute('aria-activedescendant'));

	if (currentOption !== undefined) {
		let currentOptionIndex = Array.prototype.slice.call(options).indexOf(currentOption);

		if (currentOptionIndex - 1 >= 0) {
			let previousOption = options[currentOptionIndex - 1];
			selectOption(previousOption);
		}
	}
}

function selectOption (option) {
	unselectAllOptions();
	option.setAttribute('aria-selected', true);
	trigger.setAttribute('aria-activedescendant', option.getAttribute('id'));
	selectedText.innerHTML = option.innerHTML;

	// Update the hidden field
	hiddenField.value = option.innerHTML;
}

function unselectAllOptions () {
	options.forEach(function (option) {
		option.removeAttribute('aria-selected');
	});
}