class VideoMeta {
	name: string|null
	mime_type: string|null
	thumbnail_b64: string|null

	constructor(raw: any) {
		this.name = raw['name']
		if(this.name) {
			const parts = this.name.split('.')
			const extension = parts[parts.length - 1]
			if(extension == 'jpg') {
				this.mime_type = 'image/jpg'
			} else {
				this.mime_type = null
			}
		} else {
			this.mime_type = null
		}
		this.thumbnail_b64 = raw['thumbnail']
	}

	title_link() : HTMLHeadingElement {
		let container = document.createElement('h2')

		let link = document.createElement('a')
		if(this.name) {
			// remove the .jpg
			let fname = this.name.substr(0, this.name.length - 4)
			console.log(fname)
			const parts = fname.split('.')
			const extension = parts[parts.length -1]

			if(extension == '.webm') {
				fname = fname.substr(0, fname.length - 5)
			} else {
				fname = fname.substr(0, fname.length - 4)
			}
			link.href = `/clip/${fname}`
			link.text = fname.replace('.', ' ').replace('-', ' ')
		} else  {
			link.href = '#'
			link.text = 'this nigga eatin beans'
		}

		container.appendChild(link)


		return container
	}

	thumbnail_div() : HTMLImageElement {
		let nail = document.createElement('img')
		nail.className = 'pure-img'

		// Modern browser's should be able to cache this request
		if(!(this.thumbnail_b64 == null || this.thumbnail_b64.length == 0)) {
			nail.setAttribute('src', `data:image/jpg;base64,${this.thumbnail_b64}`)
		} else{
			nail.setAttribute('src', '/cantfindshit.gif')
		}

		return nail
	}

	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()
	const endpoint = window.location.origin + '/api' + window.location.pathname
	xml.open('GET', endpoint, false)
	xml.send()

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


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