'use strict';

let title = document.title;
let currentChatId = null;
let eventSource;
let lastUpdate;
let userId;

function evalEvent(event) {
	// console.log(event);
	eval(event.data);
}

function setUserEventSource(userId) {
	let userEventSource = new EventSource(`${location.origin}/user/${userId}`);
	userEventSource.onmessage = evalEvent;
}

function selectChat(chatId) {
	document.querySelector('div[chat_content]').setAttribute('show','posts');
	if( chatId === currentChatId )
		return;
	let div = document.querySelector(`div[chat="${chatId}"]`);
	let selected = div.parentNode.querySelector('[selected]');
	if( selected )  selected.removeAttribute('selected');
	div.setAttribute('selected','');
	ajax(`get_chat.js?chat=${chatId}`);
	currentChatId = chatId;
	history.replaceState(null,null,`?chat=${chatId}`);
	clearUnread();

	if(eventSource)  eventSource.close();
	eventSource = new EventSource(`${location.origin}/chat/${chatId}`);
	eventSource.onmessage = evalEvent;
}

function back() {
	document.querySelector('div[chat_content]').setAttribute('show','chats');
}

function gotChat(html) {
	document.querySelector('div[posts]').innerHTML = html;
	fixPosts();
	document.querySelector('div[input] textarea').focus();
	document.querySelector('div[input]').scrollIntoView({block: 'end'});
}

function fixTextarea(event) {
	let textarea = event.target;
	textarea.style.height = 'initial';
	textarea.style.height = (textarea.scrollHeight+2) + 'px';
	textarea.scrollIntoViewIfNeeded(false);
}

const isMobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

function addPost() {
	let textarea = document.querySelector('div[input] textarea');
	let text = textarea.value;
	if( text.trim() === '' )
		return;
	ajax(`add_post.js?chat=${currentChatId}`,`content=${encodeURIComponent(text)}`);
	textarea.value = '';
}

function textareaKey(event) {
	if( event.keyCode===13 && !event.shiftKey && !event.ctrlKey && !isMobile ) {
		event.preventDefault();
		addPost();
	}
}

function fixPosts() {
	let divs = document.querySelectorAll('div[post][fix]');
	for( let div of divs ) {
		let whenSpan = div.querySelector('span[when]');
		whenSpan.textContent = new Date(Number(whenSpan.textContent)).toLocaleString([],{dateStyle:'short',timeStyle:'short'});
		let textDiv = div.querySelector('div[text]');
		textDiv.innerHTML = urlsToLinks(textDiv.innerHTML);
		if( div.getAttribute('author') === userId )
			div.querySelector('span[pulldown]').innerHTML = document.querySelector('div[hidden] span[pulldown]').innerHTML;
		div.removeAttribute('fix');
	}
}

function deleteChat() {
	let dialog = document.querySelector('dialog[delete_chat]');
	openModal(dialog);
}

function doDeleteChat(el) {
	closeModal(el);
	ajax(`delete_chat.js?chat=${currentChatId}`);
}

let currentPostId;

function getPostId(el) {
	while(true) {
		let postId = el.getAttribute('post');
		if( postId )
			return postId;
		el = el.parentNode;
	}
}

function deletePost(el) {
	currentPostId = getPostId(el);
	let dialog = document.querySelector('dialog[delete_post]');
	openModal(dialog);
}

function doDeletePost(el) {
	closeModal(el);
	ajax(`delete_post.js?post=${currentPostId}`);
}

function deleted(postId) {
	let div = document.querySelector(`div[post="${postId}"]`);
	if( div )
		div.outerHTML = '';
}

function editPost(el) {
	ajax(`edit_post.js?post=${getPostId(el)}`);
}

function openEditPost(postId,text) {
	currentPostId = postId;
	let dialog = document.querySelector('dialog[edit_post]');
	let textarea = dialog.querySelector('textarea');
	textarea.value = text;
	openModal(dialog);
}

function savePost(el) {
	let text = document.querySelector('dialog[edit_post] textarea').value;
	closeModal(el);
	ajax(`save_post.js?post=${currentPostId}`,`content=${encodeURIComponent(text)}`);
}

function edited(postId,html) {
	let div = document.querySelector(`div[post="${postId}"]`);
	if( div ) {
		div.outerHTML = html;
		fixPosts();
	}
}

function added(html) {
	let input = document.querySelector('div[input]');
	input.insertAdjacentHTML('beforebegin',html);
	fixPosts();
	input.scrollIntoView({block: 'end'});
	ajax(`added.js?chat=${currentChatId}`);
	if( document.hasFocus() )
		ajax('active.js');
}

function getChats(chatId,updated) {
	let first = document.querySelector('div[chat]');
	if( !first || first.getAttribute('chat') !== chatId ) {
		// console.log('getChats');
		ajax('get_chats.js');
	} else if( first && currentChatId !== chatId ) {
		incUnread(first);
	}
	if( updated )
		lastUpdate = updated;
	if( !document.hasFocus() ) {
		document.title = title + ' *';
	}
}

function gotChats(html) {
	document.querySelector('div[chats]').innerHTML = html;
	if( currentChatId ) {
		let current = document.querySelector(`div[chat="${currentChatId}"]`);
		if( current ) {
			current.setAttribute('selected','');
			current.scrollIntoViewIfNeeded(false);
			clearUnread();
		} else {
			currentChatId = null;
			document.querySelector('div[posts]').innerHTML = '';
		}
	}
}

window.onfocus = function() {
	// console.log('onfocus');
	document.title = title;
	ajax('active.js');
};

let urlRegex = /(^|\s)(https?:\/\/\S+)/g;

function urlsToLinks(text) {
	return text.replace( urlRegex, '$1<a target="_blank" href="$2">$2</a>' );
}

let currentPulldown = null;
let newPulldown = null;

function clickMenu(clicked,display) {
	//console.log("clickMenu");
	let pulldown = clicked.parentNode.querySelector('div');
	if( pulldown !== currentPulldown ) {
		pulldown.style.display = display || "block";
		newPulldown = pulldown;
		window.onclick = function() {
			//console.log("window.onclick");
			if( currentPulldown ) {
				currentPulldown.style.display = "none";
				if( !newPulldown )
					window.onclick = null;
			}
			currentPulldown = newPulldown;
			newPulldown = null;
		};
		pulldown.scrollIntoViewIfNeeded(false);
	}
}

function heartbeat() {
	showOnline();
	ajax(`heartbeat.js?last_update=${lastUpdate}`);
}

setInterval( heartbeat, 10000 );

let online = {};

function setOnline(userId) {
	online[userId] = Date.now();
}

function showOnline() {
	let old = Date.now() - 70000;
	for( let id of Object.keys(online) ) {
		if( online[id] < old )
			delete online[id];
	}
	let a = [];
	for( let id in online ) {
		a.push( `span[online="${id}"]` );
	}
	let style = document.querySelector('style[online]');
	if( a.length === 0 ) {
		style.innerHTML = '';
	} else {
		style.innerHTML = `
			${a.join(', ')} {
				background-color: green;
			}
`		;
	}
}

function clearUnread() {
	let span = document.querySelector(`div[chat="${currentChatId}"] span[unread]`);
	span.setAttribute('unread','0');
	span.textContent = '0';
}

function incUnread(div) {
	let span = div.querySelector('span[unread]');
	let n = parseInt(span.getAttribute('unread')) + 1;
	span.setAttribute('unread',n);
	span.textContent = n;
}

function invite() {
	let email = document.querySelector('input[type=email]').value;
	ajax(`invite.js?email=${encodeURIComponent(email)}`);
}

function openInvite(email) {
	let dialog = document.querySelector('dialog[invite]');
	let span = dialog.querySelector('span[email]');
	span.textContent = email;
	openModal(dialog);
}

function gotoInvite(el) {
	let email = document.querySelector('dialog[invite] span[email]').textContent;
	closeModal(el);
	location = `chat?with=${email}`;
	ajax(`save_post.js?post=${currentPostId}`,`content=${encodeURIComponent(text)}`);
}