// This module takes care of pulling down videos for the given category
class Video {
    title: string
    category: string
    thumbnail_b64: string|null
    constructor(raw: any) {
        this.title = raw['name']
        this.category = raw['category']
        this.thumbnail_b64 = raw['thumbnail']
    }

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

		let link = document.createElement('a')
		link.href = `/video?c=${this.category}&v=${this.title}`
		link.text = this.title

		container.appendChild(link)

		return container
    }
}

function get_category() : string|null {
    // Used to modify the DOM
    let params = (new URL(document.location.toString())).searchParams;
    return params.get('c')
}
function base_url() : string {
    const loc = document.location
    return loc.protocol + '//' + loc.host
}

function fetch_videos() : Array<Video> {
    const category = get_category()
    if(!category) { return [] }
    const endpoint = base_url() + `/api/categories?c=${category}`

    let xml = new XMLHttpRequest()
    xml.open('GET', endpoint, false) // sync request
    xml.send(null) // no params required
    if(xml.getResponseHeader('Content-Type') == 'application/json') {
        let raw = JSON.parse(xml.responseText)
        for(const vid of raw['videos']) {
            console.log(vid)
        }
    }

    return []
}

function ready(e) {
    if(document.readyState != 'complete') { return e }

    const video_data = fetch_videos()
}

document.addEventListener('readystatechange', ready)