import { Diff } from "./Diff"

class LoadOptions {
	addToHistory?: boolean
	forceReload?: boolean
}

export class Application {
	ajaxClass: string
	fadeOutClass: string
	activeLinkClass: string
	content: HTMLElement
	loading: HTMLElement
	currentPath: string
	originalPath: string
	lastRequest: XMLHttpRequest

	constructor() {
		this.currentPath = window.location.pathname
		this.originalPath = window.location.pathname
		this.ajaxClass = "ajax"
		this.activeLinkClass = "active"
		this.fadeOutClass = "fade-out"
	}

	init() {
		document.addEventListener("DOMContentLoaded", () => {
			this.ajaxify()
			this.markActiveLinks()
		})
	}

	find(id: string): HTMLElement {
		return document.getElementById(id)
	}

	get(url: string): Promise<string> {
		if(this.lastRequest) {
			this.lastRequest.abort()
			this.lastRequest = null
		}
		
		return new Promise((resolve, reject) => {
			let request = new XMLHttpRequest()

			request.onerror = () => reject(new Error("You are either offline or the requested page doesn't exist."))
			request.ontimeout = () => reject(new Error("The page took too much time to respond."))
			request.onload = () => {
				if(request.status < 200 || request.status >= 400)
					reject(request.responseText)
				else
					resolve(request.responseText)
			}

			request.open("GET", url, true)
			request.send()

			this.lastRequest = request
		})
	}

	load(url: string, options?: LoadOptions) {
		// Start sending a network request
		let request = this.get("/_" + url).catch(error => error)

		// Parse options
		if(!options) {
			options = new LoadOptions()
		}

		if(options.addToHistory === undefined) {
			options.addToHistory = true
		}
		
		// Set current path
		this.currentPath = url

		// Add to browser history
		if(options.addToHistory)
			history.pushState(url, null, url)

		let onTransitionEnd = e => {
			// Ignore transitions of child elements.
			// We only care about the transition event on the content element.
			if(e.target !== this.content) {
				return
			}
			
			// Remove listener after we finally got the correct event.
			this.content.removeEventListener("transitionend", onTransitionEnd)

			// Wait for the network request to end.
			request.then(html => {
				// Set content
				this.setContent(html, false)
				this.scrollToTop()

				// Fade animations
				this.content.classList.remove(this.fadeOutClass)
				this.loading.classList.add(this.fadeOutClass)

				// Send DOMContentLoaded Event
				this.emit("DOMContentLoaded")
			})
		}

		this.content.addEventListener("transitionend", onTransitionEnd)

		this.content.classList.add(this.fadeOutClass)
		this.loading.classList.remove(this.fadeOutClass)
		this.markActiveLinks()

		return request
	}

	setContent(html: string, diff: boolean) {
		if(diff) {
			Diff.innerHTML(this.content, html)
		} else {
			this.content.innerHTML = html
		}
	}

	markActiveLinks(element?: HTMLElement) {
		if(element === undefined)
			element = document.body

		let links = element.querySelectorAll("a")

		for(let i = 0; i < links.length; i++) {
			let link = links[i]
			let href = link.getAttribute("href")

			if(href === this.currentPath)
				link.classList.add(this.activeLinkClass)
			else
				link.classList.remove(this.activeLinkClass)
		}
	}

	ajaxify(element?: HTMLElement) {
		if(!element)
			element = document.body

		let links = element.querySelectorAll("." + this.ajaxClass)

		for(let i = 0; i < links.length; i++) {
			let link = links[i] as HTMLElement

			// link.classList.remove(this.ajaxClass)

			let self = this
			link.onclick = function(e) {
				// Middle mouse button should have standard behaviour
				if(e.which === 2)
					return

				let url = this.getAttribute("href")

				e.preventDefault()

				// if(this.dataset.bubble !== "true") {
				// 	e.stopPropagation()
				// }

				if(!url || url === self.currentPath)
					return
				
				// Load requested page
				self.load(url)
			}
		}
	}

	scrollToTop() {
		let parent = this.content

		while(parent = parent.parentElement) {
			parent.scrollTop = 0
		}
	}

	emit(eventName: string) {
		document.dispatchEvent(new Event(eventName, {
			"bubbles": true,
			"cancelable": true
		}))
	}
}