/*
	Created by Michael Schuijff <michael@reglobe.nl>
	Copyright Lost Images, The Netherlands
	
	For more information, visit www.michaelschuijff.nl
*/

(function () {
	let backdrop = createElement('div', 'backdrop');
	
	backdrop.onclick = (e) => {
		if (e.target == backdrop) {
			router.register('back', null);
			hideGiphy();
		}
	}
	
	let container = createElement('div', 'giphy');
	
	let button = createElement('button', 'button-close');
	
	let label = createElement('label');
	
	let input = createElement('input');
	Object.assign(input, { type: 'text', spellcheck: false, placeholder: __('Search GIFs') });
	
	label.append(input);
	
	let list = createElement('div', 'list');
	
	let link = createElement('a', 'attribution');
	Object.assign(link, { href: 'https://giphy.com/', target: '_blank' });
	
	container.append(button, label, list, link);
	
	backdrop.append(container);
	
	let filter, page, more, req, timer;
	
	window.giphy = function (callback) {
		resetGiphy();
		
		button.onclick = () => {
			if (filter) {
				resetGiphy();
			} else {
				router.register('back', null);
				hideGiphy();
			}
		}
		
		input.onchange = () => {
			input.value = input.value.trim();
			
			if (!backdrop.parentNode) {
				return;
			}
			
			let value = input.value.toLowerCase();
			
			if (value == filter) {
				return;
			}
			
			filter = value, page = 0, more = false;
			
			list.innerHTML = '';
			
			fetchGiphy();
		}
		
		input.oninput = () => {
			clearTimeout(timer);
			timer = setTimeout(input.onchange, 500);
		}
		
		list.onscroll = () => {
			if (req || !more) {
				return;
			}
			
			if (list.scrollHeight - list.clientHeight - list.scrollTop < list.clientHeight / 2) {
				page ++;
				fetchGiphy();
			}
		}

		function resetGiphy () {
			filter = '', page = 0, more = false;
			
			input.value = '';
			
			list.innerHTML = '';
			
			fetchGiphy();
		}
		
		function fetchGiphy () {
			req = api.get({
				url: '/giphy',
				data: { q: filter, page: page },
				success: (result) => {
					for (let image of result.images) {
						let button = createElement('button', 'image');
						
						if (image.title) {
							button.title = image.title;
						}
						
						button.onclick = () => {
							if (callback) {
								callback(image.image);
							}
							
							router.register('back', null);
							hideGiphy();
						}

						let inner = createElement('span', 'inner');
						
						preload(image.thumbnail.url || image.image.url, (url) => inner.style.backgroundImage = 'url(' + url + ')');	
						
						button.append(inner);
						
						list.append(button);
					}
					
					more = result.more;
					
					if (more && list.clientHeight == list.scrollHeight) {
						setTimeout(() => {
							page ++;
							fetchGiphy();
						}, 0);
					}
				},
				complete: () => req = null
			});
			
			router.register('back', () => {
				if (filter) {
					resetGiphy();
				} else {
					hideGiphy();
				}
			});
		}
		
		document.body.append(backdrop);
		
		input.focus();
	}
	
	window.hideGiphy = function () {
		clearTimeout(timer);
		
		if (req) {
			req.abort();
		}
		
		backdrop.remove();
	}
	
	window.addEventListener('popstate', hideGiphy);
})();