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

router.register('/alerts', () => {
	if (!config.user) {
		if (!config.bot) {
			router.redirect('/login', { url: router.getURL() });
		} else {
			router.noIndex();
		}
		
		return;
	}
	
	let view = createView({
		menuState: 'alerts', titleBar: __('Alerts'), hideMainTitleBar: true, buttons: ['close', 'config'], urls: ['/alerts'], className: 'alerts-view', spinner: true, pullToRefresh: true
	});
	
	view.content.append(createElement('div'));
	
	let req, count = 20, step = count;
	
	function fetchAlerts () {
		req = api.get({
			url: '/alerts',
			data: { count: count },
			success: (result) => {
				let content = createElement('div'), seen = false;
				
				for (let alert of result.alerts) {
					content.append(renderAlert(alert));
					
					if (alert.seen || seen) {
						continue;
					}
					
					api.post({
						url: '/alert/' + alert.id,
						data: { state: 'seen' }
					});
					
					seen = true;
				}
				
				view.content.firstChild.replaceWith(content);
				
				view.hideSpinner();
				
				if (result.more) {
					view.enableInfiniteScrolling();
					
					if (view == window.activeView && view.content.offsetHeight < window.innerHeight) {
						setTimeout(fetchAlerts, 0);
						count += step;
					}
				} else {
					view.disableInfiniteScrolling();
				}
			},
			complete: () => {
				view.revertPullToRefresh();
				req = null;
			}
		});
	}
	
	function renderAlert (alert) {
		let link = createElement('a', 'alert');
		
		if (!alert.opened) {
			link.className += ' is-unopened';
		}

		link.href = alert.url;

		link.onclick = (e) => {
			e.preventDefault();
			e.stopPropagation();
			
			router.go(alert.url, { reset: true });
			
			if (!alert.opened) {
				link.classList.remove('is-unopened');
				
				api.post({
					url: '/alert/' + alert.id,
					data: { state: 'opened' },
					success: () => {
						setUserState(0);
					},
					error: false
				});
				
				alert.openend = true;
			}
		}
		
		if (alert.avatar) {
			let avatar = createElement('span', 'avatar');
			
			preload(alert.avatar, (url) => avatar.style.backgroundImage = 'url(' + url + ')');
			
			link.append(avatar);
		}
		
		let label = createElement('span', 'label');
		label.innerHTML = alert.message;
		
		link.append(label, renderDatetime(alert.created));
		
		return link;
	}
			
	view.register('load', () => {
		fetchAlerts();
	});

	view.register('resume', () => {
		if (req) {
			req.abort();
		}
		
		fetchAlerts();
	});
	
	view.register('load resume', () => {
		setUserState(0);
	});

	view.register('refresh', () => {
		count = step;
		
		if (req) {
			req.abort();
		}
		
		view.spinner()
		fetchAlerts();
	});

	view.register('infinite-scroll', () => {
		if (!req) {
			count += step;
			fetchAlerts();
		}
	});
	
	view.register('config', () => {
		router.go('/alerts/settings');
	});
	
	return view;		
});

router.register('/alerts/settings', () => {
	if (!config.user) {
		if (!config.bot) {
			router.redirect('/login', { url: router.getURL() });
		} else {
			router.noIndex();
		}

		return;
	}

	let view = createView({
		menuState: 'alerts', titleBar: __('Alert settings'), hideMainTitleBar: true, hideBottomMenu: true, buttons: ['close', 'confirm'], spinner: true
	});
	
	api.get({
		url: '/self/alerts',
		success: (result) => {
			let push = false, email = false;
			
			for (let alert of result.alerts) {
				push = push || alert.push, email = email || alert.email;
			}
			
			let content = view.content;
			
			content.append(renderOption({
				label: __('Enable/disable all your alerts'), push: push, email: email
			}));
			
			for (let alert of result.alerts) {
				content.append(renderOption(alert));
			}
			
			view.hideSpinner();
		}
	});

	function renderOption (alert) {
		let option = createElement('div', 'alert-option', createElement('div', 'label', alert.label));
		
		{
			let toggle = createElement('input', 'toggle push');
			Object.assign(toggle, { type: 'checkbox', checked: alert.push });
			
			if (alert.message) {
				toggle.name = alert.message + '_push';
			} else {
				toggle.className += ' main';
			}

			toggle.onchange = () => {
				let container = option.parentNode;
				
				if (alert.message) {
					let element = container.querySelector('.push');
					
					if (container.querySelectorAll('.push:not(.main):checked').length) {
						element.checked = true;
					} else {
						element.checked = false;
					}
					
					return;
				}
				
				let elements = container.querySelectorAll('.push');
				
				for (let element of elements) {
					element.checked = toggle.checked;
				}
			}
			
			option.append(toggle, createElement('span', 'label', __('Notification')));
		}
		
		{
			let toggle = createElement('input', 'toggle email');
			Object.assign(toggle, { type: 'checkbox', checked: alert.email });
			
			if (alert.message) {
				toggle.name = alert.message + '_email';
			} else {
				toggle.className += ' main';
			}
			
			toggle.onchange = () => {
				let container = option.parentNode;
				
				if (alert.message) {
					let element = container.querySelector('.email');
					
					if (container.querySelectorAll('.email:not(.main):checked').length) {
						element.checked = true;
					} else {
						element.checked = false;
					}
					
					return;
				}
				
				let elements = container.querySelectorAll('.email');
				
				for (let element of elements) {
					element.checked = toggle.checked;
				}
			}
			
			option.append(toggle, createElement('span', null, __('Email')));
		}
		
		return option;
	}
	
	view.register('confirm', () => {
		let elements = view.content.querySelectorAll('input[name]:checked'), values = {};
		
		for (let element of elements) {
			values[element.name] = 'true';
		}
		
		api.post({
			url: '/self/alerts',
			data: values,
			success: () => toast(__('Your preferenced have been saved.'))
		});
		
		router.back(false);
	});
	
	return view;
});