'use strict';

let title = document.title;
let currentChatId = null;
let eventSource;
let lastUpdate;
let hasUnseen = false;
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(div) {
	document.querySelector('div[content]').setAttribute('show','posts');
	let chatId = div.getAttribute('chat');
	if( chatId === currentChatId )
		return;
	let selected = div.parentNode.querySelector('[selected]');
	if( selected )  selected.removeAttribute('selected');
	div.setAttribute('selected','');
	ajax(`get_chat.js?chat=${chatId}`);
	currentChatId = chatId;
	let email = div.querySelector('[email]').textContent;
	history.replaceState(null,null,`?with=${email}`);

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

function back() {
	document.querySelector('div[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();
		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'});
}

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

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);
		} else {
			currentChatId = null;
			document.querySelector('div[posts]').innerHTML = '';
		}
	}
}

window.onfocus = function() {
	// console.log('onfocus');
	document.title = title;
	hasUnseen = false;
};

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

function urlsToLinks(text) {
	return text.replace( urlRegex, '$1<a 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);
	}
}

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

let sound = new Audio('/images/notify.mp3');
function notify() {
	sound.play();
}

let online = {};

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

function showOnline() {
	let old = Date.now() - 20000;
	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;
			}
`		;
	}
}