class Category {
	name: string
	thumbnail_b64: string|null
	constructor(raw: any) {
		this.name = raw['name']
		this.thumbnail_b64 = raw['thumbnail']
	}

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

		let title = document.createElement('h2')
		title.innerText = this.name

		let nail = document.createElement('img')
		nail.className = 'pure-img'

		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')
		}

		container.appendChild(title)
		container.appendChild(nail)

		document.getElementById('main-container').appendChild(container)

		return container
	}
}

function ready_handler(e?: Event) : Event {
	// Only let this make a get request once we're ready on the page
	if(document.readyState != 'complete') { return e }

	// All we do here is basically make a get request to /api/categories
	const endpoint = 'http://localhost/api/categories'
	let xml = new XMLHttpRequest()

	xml.open('GET', endpoint, false) // sync request
	xml.send(null) // nothing required for stuff
	if(xml.getResponseHeader('Content-Type') == 'application/json') {
		let raw = JSON.parse(xml.responseText)
		for(const cat_raw of raw['categories']) {
			let cat = new Category(cat_raw)
			cat.as_div_str()
		}
	}
	return e
}

document.addEventListener('readystatechange', ready_handler)