class VideoMeta {
	name: string|null
	thumbnail: string|null
	category: string

	constructor(raw: any) {
		this.name = raw['name']
		this.thumbnail = raw['thumbnail']

		let path = window.location.pathname
		this.category = path.substring(path.lastIndexOf('/')+1)
	}
	title_link() : HTMLHeadingElement {
		let container = document.createElement('h2')

		let link = document.createElement('a')
		if(this.name) {
			const file_name = this.name.slice(0, this.name.lastIndexOf('.'))
			link.href = `/clip/${this.category}/${file_name}`
			link.text = this.name
			for(const chars of ['.', '-', '_', 'mp4', 'mkv', 'webm']) {
				link.text = link.text.replace(chars, ' ')
			}
		} else  {
			link.href = '#'
			link.text = this.name + 'ft. No thumbnail'
		}

		container.appendChild(link)


		return container
	}

	thumbnail_div() : HTMLAnchorElement {
		let nail = document.createElement('img')
		nail.className = 'img-fluid'

		// Modern browser's should be able to cache this request
		if(!(this.thumbnail == null || this.thumbnail.length == 0)) {
			nail.setAttribute('src', this.thumbnail)
		} else{
			nail.setAttribute('src', '/cantfindshit.gif')
		}
		let link = document.createElement('a')
		if(this.name) {
			link.href = `/clip/${this.category}/${this.name}`
		} else  {
			link.href = '#'
		}
		link.appendChild(nail)

		return link
	}

	public as_div() {
		let container = document.createElement('div')
		container.className = 'video-block'

		let title = this.title_link()
		let thumbnail = this.thumbnail_div()

		container.appendChild(title)
		container.appendChild(thumbnail)

		// Dump gallery onto the main page
		document.getElementById('main-container').appendChild(container)

		return container
	}
}

function category_ready_handler(e?: Event) : Event {
	if(document.readyState != 'complete') { return e }

	let xml = new XMLHttpRequest()

	xml.onload = function() {
		if(this.getResponseHeader('Content-Type') == 'application/json') {
			let raw = JSON.parse(this.responseText)
			for(const cat_raw of raw) {
				let cat = new VideoMeta(cat_raw)
				cat.as_div()
			}
		}
	}

	const endpoint = window.location.origin + '/api' + window.location.pathname
	xml.open('GET', endpoint, true)
	xml.send()

	return e
}
document.addEventListener('readystatechange', category_ready_handler)