(function() {
	var wrap, backdrop, results, search, submitBtn, selectedFid, editor;

	function esc(str) {
		var el = document.createElement('span');
		el.textContent = str;
		return el.innerHTML;
	}

	function buildModal() {
		if (wrap) return;

		var data = window.accua_forms_shortcode || {};
		var forms = data.forms || [];
		var i18n = data.i18n || {};

		var html = '<div id="accua-form-backdrop" style="display:none"></div>';
		html += '<div id="accua-form-wrap" class="wp-core-ui" style="display:none" role="dialog" aria-modal="true" aria-labelledby="accua-form-modal-title">';
		html += '<form tabindex="-1">';
		html += '<h1 class="accua-form-modal-title" id="accua-form-modal-title">' + esc(i18n.title || 'Insert Contact Form') + '</h1>';
		html += '<button type="button" class="accua-form-close"><span class="screen-reader-text">' + esc(i18n.close || 'Close') + '</span></button>';
		html += '<div class="accua-form-body">';
		html += '<div class="search-wrapper"><label><span class="search-label">' + esc(i18n.search || 'Search forms') + '</span>';
		html += '<input type="search" id="accua-form-search" class="link-search-field" autocomplete="off" /></label></div>';
		html += '<div id="accua-form-results" class="query-results" tabindex="0"><ul>';
		for (var i = 0; i < forms.length; i++) {
			html += '<li data-fid="' + esc(forms[i].value) + '"><span class="item-title">' + esc(forms[i].text) + '</span><span class="item-info">ID ' + esc(forms[i].value) + '</span></li>';
		}
		html += '</ul><div class="no-results" style="display:none">' + esc(i18n.no_results || 'No forms found.') + '</div></div></div>';
		html += '<div class="submitbox">';
		html += '<div class="cancel"><button type="button" class="button">' + esc(i18n.cancel || 'Cancel') + '</button></div>';
		html += '<div class="submit"><button type="button" class="button button-primary" id="accua-form-submit" disabled>' + esc(i18n.insert || 'Insert') + '</button></div>';
		html += '</div></form></div>';

		document.body.insertAdjacentHTML('beforeend', html);

		backdrop = document.getElementById('accua-form-backdrop');
		wrap = document.getElementById('accua-form-wrap');
		results = document.getElementById('accua-form-results');
		search = document.getElementById('accua-form-search');
		submitBtn = document.getElementById('accua-form-submit');

		backdrop.addEventListener('click', close);
		wrap.querySelector('.accua-form-close').addEventListener('click', close);
		wrap.querySelector('.cancel button').addEventListener('click', close);
		submitBtn.addEventListener('click', insert);

		wrap.addEventListener('keydown', function(e) {
			if (e.key === 'Escape') close();
		});

		search.addEventListener('input', function() {
			var q = this.value.toLowerCase();
			var items = results.querySelectorAll('li');
			var any = false;
			for (var j = 0; j < items.length; j++) {
				var match = items[j].querySelector('.item-title').textContent.toLowerCase().indexOf(q) !== -1 || items[j].getAttribute('data-fid').indexOf(q) !== -1;
				items[j].style.display = match ? '' : 'none';
				if (match) any = true;
			}
			results.querySelector('.no-results').style.display = any ? 'none' : '';
		});

		results.addEventListener('click', function(e) {
			var li = e.target.closest('li');
			if (li) selectItem(li);
		});

		results.addEventListener('dblclick', function(e) {
			var li = e.target.closest('li');
			if (!li) return;
			selectItem(li);
			insert();
		});

		results.addEventListener('keydown', function(e) {
			if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
				e.preventDefault();
				var sel = results.querySelector('li.selected');
				var visible = [];
				var items = results.querySelectorAll('li');
				for (var j = 0; j < items.length; j++) {
					if (items[j].style.display !== 'none') visible.push(items[j]);
				}
				if (!visible.length) return;
				var idx = sel ? visible.indexOf(sel) : -1;
				var next = e.key === 'ArrowDown' ? idx + 1 : idx - 1;
				if (next >= 0 && next < visible.length) selectItem(visible[next]);
			} else if (e.key === 'Enter' && selectedFid) {
				e.preventDefault();
				insert();
			}
		});
	}

	function selectItem(li) {
		var prev = results.querySelector('li.selected');
		if (prev) prev.className = '';
		li.className = 'selected';
		selectedFid = li.getAttribute('data-fid');
		submitBtn.disabled = false;
	}

	function open(ed) {
		editor = ed;
		buildModal();
		selectedFid = '';
		submitBtn.disabled = true;
		var items = results.querySelectorAll('li');
		for (var j = 0; j < items.length; j++) {
			items[j].className = '';
			items[j].style.display = '';
		}
		results.querySelector('.no-results').style.display = 'none';
		search.value = '';
		backdrop.style.display = '';
		wrap.style.display = '';
		search.focus();
	}

	function close() {
		backdrop.style.display = 'none';
		wrap.style.display = 'none';
	}

	function insert() {
		if (!selectedFid) return;
		editor.insertContent('[accua-form fid="' + selectedFid + '"]');
		close();
	}

	tinymce.PluginManager.add('accua_fancy_button', function(ed, url) {
		ed.addCommand('mcebutton', function() { open(ed); });
		ed.addButton('accua_fancy_button', {
			title: 'Contact Forms by Cimatti',
			cmd: 'mcebutton',
			image: url + '/../../img/accua-contacts-forms.svg'
		});
	});
})();