var ActionSelector: ActionSelector = {
	elements: {
		actiondialog: document.querySelector('.actiondialog')
	},

	fadeTimeout: null,

	maps: {
		integrationNames: {},
		actionNames: {}
	},

	init() {
		ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
			var integrationID = item.getAttribute('integrationID');
			var actionID = item.getAttribute('actionID');
			var integrationName = (<HTMLDivElement>item.querySelector('.integration')).innerText.trim();
			var actionName = (<HTMLDivElement>item.querySelector('.action')).innerText.trim();

			if (ActionSelector.maps.integrationNames[integrationID] == undefined)
				ActionSelector.maps.integrationNames[integrationID] = integrationName;
			if (ActionSelector.maps.actionNames[actionID] == undefined)
				ActionSelector.maps.actionNames[actionID] = actionName;
		});
	},

	register(input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) {
		input.onfocus = () => ActionSelector.show(input, callback);
		input.onblur = () => setTimeout(ActionSelector.hide, 200);
		input.oninput = () => ActionSelector.search(input.value);
	},

	show(input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) {
		clearTimeout(ActionSelector.fadeTimeout);

		ActionSelector.search('');

		var boundingbox = input.getBoundingClientRect();

		ActionSelector.elements.actiondialog.style.top = `${boundingbox.top - 31}px`;
		ActionSelector.elements.actiondialog.style.left = `${boundingbox.left - 10}px`;
		ActionSelector.elements.actiondialog.style.width = `${boundingbox.width - 4}px`;
		ActionSelector.elements.actiondialog.style.maxHeight = `${Math.min(
			window.innerHeight - boundingbox.top,
			200
		)}px`;

		ActionSelector.elements.actiondialog.style.display = 'flex';
		ActionSelector.elements.actiondialog.style.transitionDuration = '.3s';
		ActionSelector.elements.actiondialog.style.opacity = '1';
		ActionSelector.elements.actiondialog.style.pointerEvents = 'auto';

		ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
			item.onclick = () => {
				var integrationID = item.getAttribute('integrationID');
				var actionID = item.getAttribute('actionID');
				callback(integrationID, actionID);

				input.value = '';
			};
		});
	},

	hide() {
		ActionSelector.elements.actiondialog.style.transitionDuration = '.3s';
		ActionSelector.elements.actiondialog.style.opacity = '0';
		ActionSelector.elements.actiondialog.style.pointerEvents = 'none';

		clearTimeout(ActionSelector.fadeTimeout);
		ActionSelector.fadeTimeout = setTimeout(() => {
			ActionSelector.elements.actiondialog.style.display = 'none';
		}, 300);
	},

	search(query: string) {
		ActionSelector.elements.actiondialog.querySelectorAll('.item').forEach((item: HTMLDivElement) => {
			var integration: HTMLDivElement = item.querySelector('.integration');
			var action: HTMLDivElement = item.querySelector('.action');

			var interactionQuery = integration.innerText.toLowerCase();
			var actionQuery = action.innerText.toLowerCase();

			query = query.toLowerCase();

			if (interactionQuery.includes(query) || actionQuery.includes(query) || query.length == 0)
				item.classList.remove('hidden');
			else item.classList.add('hidden');
		});
	}
};
ActionSelector.init();

interface ActionSelector {
	elements: {
		actiondialog: HTMLDivElement;
	};

	fadeTimeout: any;

	maps: {
		integrationNames: { [integrationID: string]: string };
		actionNames: { [actionID: string]: string };
	};

	init: () => void;
	register: (input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) => void;
	show: (input: HTMLInputElement, callback: (integrationID: string, actionID: string) => void) => void;
	hide: () => void;
	search: (query: string) => void;
}