/*
Allows for lazy loading of stories on the main page as the user scrolls down
*/


function add_stories(stories){
	var tbody_el = document.querySelector("table#story_list tbody")
	for(var i = 0; i < stories.length; i++){
		var story = stories[i];
		/* This chunk should match /src/pages/parts/story_brief */
		console.log("Adding story:",story)
		var row = document.createElement("tr");
		row.appendChild(
			document.createElement("td")
		); // unlisted cell
		var link_cell = document.createElement("td");
		var link = document.createElement("a");
		link.textContent = story.title;
		link.href = story.url;
		link_cell.appendChild(link);
		row.appendChild(link_cell);

		var author_cell = document.createElement("td");
		author_cell.appendChild(
			document.createTextNode("By ")
		);
		if(story.isanon){
			author_cell.appendChild(
				document.createTextNode("Anonymous")
			);
		}else{
			var author_page = document.createElement("a");
			author_page.textContent = story.author;
			author_page.href = story.author; // TODO: fix
			author_cell.appendChild(author_page);
		}
		row.appendChild(author_cell);
		var hits_cell = document.createElement("td")
		hits_cell.appendChild(
			document.createTextNode(story.hits + " hits")
		);
		row.appendChild(hits_cell);
		var comments_cell = document.createElement("td");
		comments_cell.appendChild(
			document.createTextNode(story.ncomments + " comments")
		);
		row.appendChild(comments_cell);
		var tag_cell = document.createElement("td");
		var tag_list = document.createElement("ul");
		tag_list.className = "row tag-list";
		tag_cell.appendChild(tag_list);
		for(var j = 0; j < Math.min(story.tags.length,5); j++){
			var tag = story.tags[j];
			var tag_item = document.createElement("li");
			var tag_button = document.createElement("a");
			tag_button.className = "tag button button-outline";
			tag_button.textContent = tag;
			tag_button.href = "/_search?q=%2B" + tag;
			tag_item.appendChild(tag_button);
			tag_list.appendChild(tag_item);
		}
		row.appendChild(tag_cell);
		var date_cell = document.createElement("td");
		date_cell.appendChild(
			document.createTextNode(story.posted)
		);
		row.appendChild(date_cell);
		tbody_el.appendChild(row);
	}
}

/*
A tiny state machine:
0 - idle
1 - loading more stories (do not send another request)
2 - stories loaded, waiting for next scroll event to transition to idle
*/
var state = 0
var loaded = 50 // by default we load 50 stories on the site index
document.addEventListener("scroll",function(e){
	var tobot = window.scrollMaxY - window.scrollY
	if (tobot < 100){
		if (state == 0){
			//Ask the server for stories
			// TODO: Finish this
			var xhr = new XMLHttpRequest();
			xhr.open("GET", "/_api?call=stories&data=" + loaded);
			xhr.onreadystatechange = function(e){
				if(xhr.readyState === 4){
					console.log("response:",xhr.response)
					resp = JSON.parse(xhr.response);
					console.log("resp:",resp)
					add_stories(resp.stories);
					loaded += resp.stories.length;
				}
				state = 2
			}
			xhr.send()
			state = 1
		}else if (state == 1){
			// Do nothing
		}else if (state == 2){
			state = 0
		}
		console.log("we should load more stories")
	}
})