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

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

		return;
	}
	
	let view = createView({
		titleBar: __('Create new profile'), hideMainTitleBar: true, hideBottomMenu: true, buttons: ['close', 'confirm']
	});
			
	let form = createElement('form');
	form.autocomplete = 'off';
	
	let html;
	
	html  = '<p>' + _e('You can create additional profiles to post content on behalf of a specific company, club, museum, station, vehicle, model railways etc.') + '</p>';
	html += '<p>' + _e('It is') + ' <strong>' + _e('not allowed') + '</strong> ' + _e('to create profiles to impersonate others or to act on behalf of entities you\'re not affiliated with') + '.</p>';
	
	form.innerHTML = html;
	
	let labelUsername = createElement('label', null, createElement('span', null, __('Username')));
	
	let inputUsername = createElement('input');
	Object.assign(inputUsername, { type: 'text', maxLength: 50, spellcheck: false, placeholder: __('@nigelgresley') });
	
	labelUsername.append(inputUsername);
	
	inputUsername.onblur = () => {
		inputUsername.value = inputUsername.value.trim();

		if (inputUsername.nextSibling) {
			inputUsername.nextSibling.remove();
		}
		
		let username = inputUsername.value;

		if (username[0] == '@') {
			username = username.substr(1);
		}
		
		if (!username) {
			labelUsername.append(createElement('span', 'error', __('username is required')));
			return;
		}
		
		if (!isValidUsername(username)) {
			labelUsername.append(createElement('span', 'error', __('this username is invalid')));
			return;
		}
		
		api.post({
			url: '/validate',
			data: { username: username },
			error: (error) => {
				inputUsername.nextSibling || labelUsername.append(createElement('span', 'error', error));
			}
		});
	}
	
	let labelName = createElement('label', null, createElement('span', null, __('Your name')));
	
	let inputName = createElement('input');
	Object.assign(inputName, { type: 'text', maxLength: 100, spellcheck: false, placeholder: __('e.g. Nigel Gresley') });

	labelName.append(inputName);
	
	inputName.onblur = () => {
		inputName.value = inputName.value.trim();

		if (inputName.nextSibling) {
			inputName.nextSibling.remove();
		}
		
		if (!inputName.value) {
			labelName.append(createElement('span', 'error', __('a name is required')));
		}
	}
	
	let labelCategory = createElement('label', null, createElement('span', null, __('Type of profile')));
	
	let inputCategory = createElement('select');
	
	for (let category of config.categories) {
		let option = createElement('option', null, __(category.label));
		option.value = category.id;
		
		inputCategory.append(option);
	}
	
	labelCategory.append(inputCategory);
	
	form.append(labelUsername, labelName, labelCategory);
	
	view.content.append(form);
	
	view.register('load', () => {
		if (config.user.username) {
			inputUsername.focus();	
		} else {
			view.spinner();
			api.alert(__('You must first set a username for your own profile.'),router.back);
		}
	});
	
	view.register('confirm', () => {
		inputName.focus();
		inputName.blur();
		
		if (inputUsername.nextSibling || inputName.nextSibling) {
			api.alert(__('You cannot create a new profile yet, there are one or more errors.'));
			return;
		}
		
		toast(__('Creating profile...'));

		let data = {
			username: inputUsername.value, name: inputName.value, category_id: inputCategory.value
		};
		
		if (data.username[0] == '@') {
			data.username = data.username.substr(1);
		}
		
		api.post({
			url: '/user/create',
			data: data,
			success: (result) => switchToUser(result.user.id)
		});
	});
	
	return view;
});

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

		return;
	}

	let view = createView({
		titleBar: __('Switch profile'), hideMainTitleBar: true, hideBottomMenu: true,  buttons: ['close'], spinner: true
	});
	
	api.get({
		url: '/self/moderating',
		success: (result) => {
			let content = createElement('div', 'user-list feature-switch');
			
			for (let user of result.users) {
				content.append(renderSwitchUser(user));
			}
			
			let button = createElement('button', 'button button-create-profile', __('Create new profile'));
			
			button.onclick = () => {
				router.go('/profile/create');
			}
			
			content.append(button);
			
			view.content.append(content);
			
			view.hideSpinner();
		}
	});
	
	function renderSwitchUser (user) {
		let element = createElement('div', 'user user-' + user.id);
		
		if (user.role == 'administrator') {
			element.className += ' is-administrator';
		}
		
		if (user.unseen_alerts) {
			element.className += ' unseen-alerts';
		}
		
		let link = createElement('a')
		link.href = '/user/' + user.id;
		
		element.append(link);
		
		link.onclick = (e) => {
			e.preventDefault();
			e.stopPropagation();
			
			if (user.id != config.user.id) {
				switchToUser(user.id, '/', null, router.back);
			} else {
				router.back();
			}
		}

		let avatar = createElement('span', 'avatar');
		
		preload(user.avatar, (url) => avatar.style.backgroundImage = 'url(' + url + ')');
		
		let label = createElement('span', 'name', user.name || user.username);
		
		link.append(avatar, label);
		
		let button = createElement('button', 'button-config', createElement('span', null, __('Config')));
		
		button.onclick = () => {
			router.go('/moderators/' + user.id);
		}
		
		element.append(button);
		
		return element;
	}		
	
	return view;
});

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

		return;
	}
	
	let view = createView({
		titleBar: __('Moderators'), hideMainTitleBar: true, hideBottomMenu: true,  buttons: ['close'], spinner: true
	});
	
	api.get({
		url: '/user/' + values.id + '/moderators',
		success: (result) => {
			let content = createElement('div', 'user-list feature-moderator');
			
			for (let user of result.users) {
				content.append(renderModerator(values, user));
			}
			
			let button = createElement('button', 'button button-add-moderator', __('Add a moderator'));
			
			button.onclick = () => {
				router.go('/moderator/' + values.id);
			}
			
			content.append(button);
			
			view.content.append(content);
			
			view.hideSpinner();
		},
		complete: () => req = null
	});
	
	function renderModerator (profile, user) {
		let element = createElement('div', 'user user-' + user.id);
		
		let avatar = createElement('span', 'avatar');
		
		preload(user.avatar, (url) => avatar.style.backgroundImage = 'url(' + url + ')');
		
		let name = user.name || user.username;
		
		let label = createElement('span', 'name', name);
		
		let role = createElement('span', 'role', user.role);
		
		let button = createElement('button', 'button-edit', createElement('span', null, __('Change')));
		
		button.onclick = () => {
			router.go('/moderator/' + profile.id, { user: user.id, name: name, role: user.role });
		}
		
		element.append(avatar, label, role, button);
		
		return element;
	}
	
	return view;
});

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

		return;
	}

	let title;
	
	if (values.user) {
		title = __('Edit %s', values.role);
	} else {
		title = __('Add moderator');
	}
	
	let view = createView({
		titleBar: title, hideMainTitleBar: true, hideBottomMenu: true, buttons: ['close', 'confirm']
	});
	
	let html;
	
	html  = '<p><strong>Administrators</strong> ' + _e('can act on the profile\'s behalf and assign other administrators and moderators') + '.</p>';
	html += '<p><strong>Moderators</strong> ' + _e('can post and reply on the profile\'s behalf, but not assign other users') + '.</p>';
	html += '<p><strong>Spectators</strong> ' + _e('can only read posts and comments, but cannot publish content or edit this profile') + '.</p>';

	let form = createElement('form');
	Object.assign(form, { autocomplete: 'off', innerHTML: html });
	
	let labelUser = createElement('label', null, createElement('span', null, __('Username or email address')));
	
	let inputUser = createElement('input');
	Object.assign(inputUser, { type: 'text', name: 'username', spellcheck: false, placeholder: __('@williamstanier') });
	
	inputUser.onblur = () => {
		inputUser.value = inputUser.value.trim();
		
		if (inputUser.nextSibling) {
			inputUser.nextSibling.remove();
		}
		
		let value = inputUser.value;

		if (value[0] == '@') {
			value = value.substr(1);
		}
		
		if (!value) {
			labelUser.append(createElement('span', 'error', __('username or email address is required')));
			return;
		}
		
		if (!isValidUsername(value) && !isValidEmail(value)) {
			labelUser.append(createElement('span', 'error', __('invalid username or email address')));
			return;
		}
	}

	labelUser.append(inputUser);
	
	if (!values.user) {
		form.append(labelUser);
	}
	
	let labelRole = createElement('label', null, createElement('span', null, __('Assigned role')));
	
	let inputRole = createElement('select');
	
	for (let role of ['Administrator', 'Moderator', 'Spectator']) {
		let option = createElement('option', null, role);
		option.value = role.toLowerCase();
		
		if (role.toLowerCase() == (values.role || 'moderator')) {
			option.selected = true;
		}
		
		inputRole.append(option);
	}
	
	labelRole.append(inputRole);
	
	form.append(labelRole);
	
	view.content.append(form);
	
	if (values.user) {
		let button = createElement('button', 'button button-delete', __('Delete as %s', values.role));
		
		button.onclick = () => {
			api.confirm(__('Are you sure you want to delete %s as %s?', values.name, values.role), () => {
				api.delete({
					url: '/user/' + values.id + '/moderator',
					data: { find_user: 'id:' + values.user },
					success: () => {
						toast(__('Deleted %s as %s.', values.name, values.role));
						router.back();
					}
				});
			});
		}
		
		form.append(button);
	}
	
	view.register('confirm', () => {
		if (labelUser.parentNode && inputUser.nextSibling) {
			api.alert(__('The username or email address is invalid.'), inputUser.focus);
			return;
		}
		
		let value, role = inputRole.value;
		
		if (labelUser.parentNode) {
			value = inputUser.value.trim();
			
			if (value[0] == '@') {
				value = value.substr(1);
			}
		} else {
			value = 'id:' + values.user;
		}
					
		api.post({
			url: '/user/' + values.id + '/moderator',
			data: { find_user: value, role: role },
			success: () => {
				if (values.user) {
					toast(__('Changed %s to %s.', values.name, role));
				} else {
					toast(__('Added %s.', role));
				}
				
				router.back(false);
			}
		});
	});
	
	return view;
});