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

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

			return;
		}
		
		let view = createView({
			menuState: 'messages', titleBar: __('New group chat'), hideMainTitleBar: true, hideBottomMenu: true, buttons: ['close', 'confirm'], spinner: true, className: 'create-group'
		});
		
		let form = createElement('form');
		form.setAttribute('autocomplete', 'off');
		
		let labelTitle = createElement('label', null, createElement('span', null, __('New group title')));

		let inputTitle = createElement('input');
		Object.assign(inputTitle, { type: 'text', spellcheck: false, placeholder: __('Flying Scotsman vs. InterCity 125') });
		
		inputTitle.onblur = () => {
			inputTitle.value = inputTitle.value.trim();
			
			if (inputTitle.nextSibling) {
				inputTitle.nextSibling.remove();
			}
			
			if (!inputTitle.value) {
				labelTitle.append(createElement('span', 'error', __('a title is required')));
			}
		}
		
		labelTitle.append(inputTitle);
		
		let labelFilter = createElement('label');
		
		let inputFilter = createElement('input');
		Object.assign(inputFilter, { type: 'text', spellcheck: false, placeholder: __('Find one or more users') });
			
		inputFilter.oninput = () => {
			clearTimeout(timer);
			
			if (req) {
				req.abort();
			}
			
			timer = setTimeout(fetchUsers, 250);
		}
		
		labelFilter.append(inputFilter);
		
		form.append(labelTitle, labelFilter);
		
		let content = createElement('div', 'user-list feature-invite');
		
		view.content.append(form, content);
		
		let req, timer, users = [config.user.id];
		
		function fetchUsers () {
			let filter = inputFilter.value.trim() || null;
			
			req = api.get({
				url: '/messages/user/search',
				data: { q: filter, exclude_users: users },
				success: (result) => {
					content.innerHTML = '';
					
					for (let user of users) {
						content.append(renderInvite(getUser(user), 'remove'));
					}
					
					for (let user of result.users) {
						content.append(renderInvite(getUser(user), 'invite'));
					}
					
					view.hideSpinner();
				},
				complete: () => req = null
			});
		}
		
		content.onclick = (e) => {
			let button = e.target;
			
			while (button && button.type != 'button') {
				button = button.parentNode;
			}
			
			if (!button) {
				return;
			}
			
			let element = button.parentNode
				, userID	= element.className.match(/user-(\S+)/)[1];
			
			if (button.className == 'button-invite') {
				users[users.length] = userID;
				
				{
					let elements = content.querySelectorAll('.button-remove')
						, element	 = elements[elements.length - 1].parentNode;
					
					element.after(renderInvite(getUser(userID), 'remove'));
				}
				
				element.className += ' hidden';
			} else {
				let index = users.indexOf(userID);
				
				if (~index) {
					users.splice(index, 1);
				}
				
				{
					let element = content.querySelector('.user-' + userID + '.hidden');
				
					if (element) {
						element.classList.remove('hidden');
					}
				}
				
				element.remove();
			}
		}
		
		view.register('load', () => {
			fetchUsers();
		});
		
		view.register('destroy', () => {
			clearTimeout(timer);
			
			if (req) {
				req.abort();
			}
		});
		
		view.register('confirm', () => {
			inputTitle.onblur();
			
			if (inputTitle.nextSibling) {
				inputTitle.focus();
				return;
			}
			
			if (users.length < 2) {
				api.alert(__('Invite at least one other user.'), () => inputFilter.focus());
				return;
			}
			
			let title = inputTitle.value.trim();
			
			api.post({
				url: '/messages/create',
				data: { title: title },
				success: (result) => {
					let chat = result.chat;
					
					for (let i = 1, length = users.length; i < length; i ++) {
						api.post({
							url: chat.url + '/add',
							data: { user_id: users[i] }
						});
					}
					
					router.redirect(chat.url);
				}
			});
		});
		
		return view;	
	});

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

			return;
		}

		let view = createView({
			menuState: 'messages', titleBar: __('Add/remove users'), hideMainTitleBar: true, hideBottomMenu: true, buttons: ['close'], spinner: true
		});
		
		let form = createElement('form');
		form.setAttribute('autocomplete', 'off');
		
		let label = createElement('label');
		
		let input = createElement('input');
		Object.assign(input, { type: 'text', spellcheck: false, placeholder:  __('Find one or more users') });
		
		label.append(input);
		
		form.append(label);
		
		let content = createElement('div', 'user-list feature-invite');
		
		view.content.append(form, content);
		
		let req, timer, users;
		
		function fetchUsers () {
			let filter = input.value.trim() || null;
			
			req = api.get({
				url: '/messages/user/search',
				data: { q: filter, chat_id: values.id },
				success: (result) => {
					content.innerHTML = '';
					
					for (let user of users) {
						content.append(renderInvite(getUser(user), 'remove'));
					}
					
					for (let user of result.users) {
						content.append(renderInvite(getUser(user), 'invite'));
					}
					
					view.hideSpinner();
				},
				complete: () => {
					req = null;
				}
			});
		}

		api.get({
			url: '/messages/group/' + values.id + '/users',
			success: (result) => {
				users = result.users;
				
				if (users[0].id != config.user.id) {
					api.alert(__('You\'re not the moderator of this group.'), router.back);
					return;
				}
				
				fetchUsers();
			},
			error: (error) => api.alert(error, router.back)
		});
		
		input.oninput = () => {
			clearTimeout(timer);
			
			if (req) {
				req.abort();
			}
			
			timer = setTimeout(fetchUsers, 250);
		}
		
		content.onclick = (e) => {
			let button = e.target;
			
			while (button && button.type != 'button') {
				button = button.parentNode;
			}
			
			if (!button) {
				return;
			}
			
			let element = button.parentNode
				, userID	= element.className.match(/user-(\S+)/)[1];
				
			if (button.className == 'button-invite') {
				api.post({
					url: '/messages/group/' + values.id + '/add',
					data: { user_id: userID },
					success: () => {
						{
							let elements = content.querySelectorAll('.button-remove')
								, element  = elements[elements.length - 1].parentNode;
								
							element.after(renderInvite(getUser(userID), 'remove'));
						}
						
						element.remove();
					}
				});
			} else {
				let name = getUserName(userID);
				
				api.confirm(__('Are you sure you want to kick %s from this group chat?', name), () => {
					api.post({
						url: '/messages/group/' + values.id + '/kick',
						data: { user_id: userID },
						success: () => {
							let index = users.indexOf(userID);
							
							if (~index) {
								users.splice(index, 1);
							}
							
							element.remove();
						}
					});
				});
			}
		}
		
		view.register('destroy', () => {
			clearTimeout(timer);
			
			if (req) {
				req.abort();
			}
		});

		return view;
	});

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

			return;
		}

		let view = createView({
			menuState: 'messages', titleBar: __('Participants'), hideMainTitleBar: true, hideBottomMenu: true, buttons: ['close'], spinner: true
		});
		
		let content = createElement('div', 'user-list');
		
		api.get({
			url: '/messages/group/' + values.id + '/users',
			success: (result) => {
				for (let user of result.users) {
					content.append(renderUser(user, []));
				}
				
				view.hideSpinner();
			},
			error: (error) => api.alert(error, router.back)
		});
		
		view.content.append(content);

		return view;
	});
	
	function renderInvite (user, type) {
		let element = createElement('div', 'user user-' + user.id);
		
		if (user.verified) {
			element.className += ' verified';
		}
		
		if (user.id == config.user.id) {
			element.className += ' is-current-user';
		}
		
		let avatar = createElement('span', 'avatar');
		
		if (user.avatar) {
			preload(user.avatar, (url) => avatar.style.backgroundImage = 'url(' + url + ')');
		}
		
		let label = createElement('span', 'name', user.name || user.username, createElement('span', 'verified-badge'));
	
		element.append(avatar, label);
		
		let button = createElement('button', 'button-' + type);
		
		if (type == 'invite') {
			button.append(__('Invite'));
		} else {
			button.append(__('Remove'));
		}

		element.append(button);
		
		return element;
	}
})();