// ==UserScript==
// @name         Aniscripts
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change stuff on Anilist.co
// @author       hoh
// @match        https://anilist.co/*
// @grant        none
// @downloadURL none
// ==/UserScript==

(function(){
var activityCache = {};//reduce API calls

var handleResponse = function(response){
	return response.json().then(function(json){
		return response.ok ? json : Promise.reject(json);
	});
};
var handleError = function(error){
	//alert("Error, check console"); //fixme
	console.error(error);
};
var url = 'https://graphql.anilist.co';

var listActivityCall = function(query,variables,callback,vars){
	var handleData = function(data){
		activityCache[variables.id] = data;
		callback(data,vars);
	};
	var options = {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
			'Accept': 'application/json',
		},
		body: JSON.stringify({
			query: query,
			variables: variables
		})
	};
	if(activityCache.hasOwnProperty(variables.id)){
		callback(activityCache[variables.id],vars);
	}
	else{
		fetch(url,options).then(handleResponse).then(handleData).catch(handleError);
	};
};

var enhanceNotifications = function(){
	var perform = function(){
		var notifications = document.getElementsByClassName("notification");
		var activities = [];
		for(var i=0;i<notifications.length;i++){
			var active = {};
			active.link = notifications[i].children[1].children[0].children[0].href.match(/[0-9]+/)[0];
			active.image = notifications[i].children[0].style.backgroundImage;
			active.href = notifications[i].children[0].href;
			activities.push(active);
		};
		for(var i=0;i<25;i++){//heavy
			var imageCallBack = function(data,vars){
				var type = data.data.Activity.type;
				if(type == "ANIME_LIST" || type == "MANGA_LIST"){
					var seriesImage = document.createElement("img");
					seriesImage.alt = "";
					seriesImage.src = data.data.Activity.media.coverImage.large;
					seriesImage.style.height = "60px";
					seriesImage.style.position = "absolute";
					seriesImage.style.marginLeft = "500px";
					notifications[vars.find].appendChild(seriesImage);
				}
				else if(type == "TEXT"){
					var userImage = document.createElement("img");
					userImage.alt = "";
					userImage.src = data.data.Activity.user.avatar.large;
					userImage.style.height = "60px";
					userImage.style.width = "60px";
					userImage.style.position = "absolute";
					userImage.style.marginLeft = "500px";
					notifications[vars.find].appendChild(userImage);
					var commentText = document.createElement("span");
					var container = document.createElement("div");
					container.classList.add("details");
					container.style.position = "absolute";
					container.style.marginLeft = "580px";
					container.style.marginTop = "18px";
					commentText.innerHTML = "Status";
					container.appendChild(commentText);
					notifications[vars.find].appendChild(container);
				};
			};
			var vars = {
				find: i
			};
			var query = "query ($id: Int!) { Activity(id: $id) { ... on TextActivity { id userId type replyCount text createdAt user { id name avatar { large } } likes { id name avatar { large } } replies { id text createdAt user { id name avatar { large } } likes { id name avatar { large } } } } ... on ListActivity { id userId type status progress replyCount createdAt user { id name avatar { large } } media { coverImage { large } id title { userPreferred } } likes { id name avatar { large } } replies { id text createdAt user { id name avatar { large } } likes { id name avatar { large } } } } ... on MessageActivity { id type replyCount createdAt messenger { id name avatar { large } } likes { id name avatar { large } } replies { id text createdAt user { id name avatar { large } } likes { id name avatar { large } } } } } }";
			if(activities.length){
				var variables = {
					id: +activities[i].link
				};
				listActivityCall(query,variables,imageCallBack,vars);
			};
		};
		var prevLink = "";
		var prevCount = 0;
		for(var i=0;i<activities.length;i++){
			notifications[i].children[0].style.width = "60px";
			notifications[i].children[0].style.height = "60px";
			notifications[i].style.whiteSpace = "nowrap";
			notifications[i].style.gridTemplateColumns = "repeat(auto-fill,60px)";
			if(prevLink == activities[i].link){
				var avatar = document.createElement("a");
				avatar.classList.add("avatar");
				avatar.style.backgroundImage = activities[i].image;
				avatar.href = activities[i].href;
				avatar.style.width = "60px";
				avatar.style.height = "60px";
				avatar.style.backgroundPosition = "50%";
				avatar.style.backgroundRepeat = "no-repeat";
				avatar.style.backgroundSize = "cover";
				notifications[i-prevCount-1].insertBefore(avatar,notifications[i-prevCount-1].children[prevCount].nextSibling);
				//notifications[i-prevCount-1].insertBefore(avatar,notifications[i-prevCount-1].childNodes[2]);
				//notifications[i-prevCount-1].appendChild(avatar);
				notifications[i].style.display = "none";
				prevCount++;
			}
			else{
				prevLink = activities[i].link;
				prevCount = 0;
			};
			/*var idSpan = document.createElement("span");
			idSpan.innerHTML = activities[i].link;
			notifications[i].children[1].children[0].appendChild(idSpan);*/
		};
		return notifications.length;
	};
	var tryAgain = function(){
		setTimeout(function(){if(perform()==0){tryAgain()}},100);
	};
	if(perform() == 0){
		tryAgain();
	};
};
var handleScripts = function(url){
	if(url == "https://anilist.co/notifications"){
		enhanceNotifications();
	};
	//alert(url);
};
var current = "";
setInterval(function(){
	if(document.URL != current){
		current = document.URL;
		handleScripts(current);
	};
},200);
console.log("Aniscripts initiated");
})();