// This module serves as convenience for admin users to upload/remove videos 
// from their clippable instance. There are no fancy tricks as this is meant
// purely to be a UX thing.


let UID: null|string = null
let KEY: null|string = null

/*
 * Requests to admin endpoints require the uid and api key be in the headers
 * rather than the query string
 */
function setHeaders(xhr: XMLHttpRequest, uid?: string, key?: string) {
	UID = (uid) ? uid : UID
	KEY = (key) ? key : KEY

	xhr.setRequestHeader('ADMIN-API-UID', uid ? uid : UID)
	xhr.setRequestHeader('ADMIN-API-KEY', key ? key : KEY)
}

function ok_response(xhr: XMLHttpRequest) {
	return xhr.getResponseHeader('Content-Type') == 'application/json' && xhr.status == 200
}

function confirm_auth() {
	let uid = document.getElementById('uid')
	let key = document.getElementById('apikey')

	let xhr = new XMLHttpRequest()

	xhr.onload = function() {
		if(ok_response(this)) {
			document.getElementById('login-display').hidden = true
			document.getElementById('dashboard').hidden = false
			document.getElementById('error').hidden = true
		} else if(this.status == 403) {
			document.getElementById('error').hidden = false
			document.getElementById('error').textContent = 'Invalid credenentials'
		} else {
			document.getElementById('error').hidden = false
			document.getElementById('error').textContent = `${this.statusText}`
		}
	}

	xhr.open('post', window.location.origin + '/admin/dashboard')
	setHeaders(xhr, (uid as HTMLTextAreaElement).value, (key as HTMLTextAreaElement).value)

	xhr.send()
}

function upload_video() {
	const video_file = document.getElementById('video-file') as HTMLInputElement
	const filename = video_file.files[0].name
	const category_el = document.getElementById('category') as HTMLInputElement
	const cat = category_el.value

	let xhr = new XMLHttpRequest()
	xhr.onload = function() {
		if(ok_response(this)) {
			video_file.value = ''
			document.getElementById('video-meta').hidden = true
			document.getElementById('upload-response').textContent = `${filename} uploaded`
		}
		// TODO Error hanlding
	}
	xhr.open('post', window.location.origin + `/admin/upload-video/${cat}/${filename}`)
	setHeaders(xhr)
	xhr.send(video_file.files[0])
}

export function populate_meta_form() {
	let file = document.getElementById('video-file') as HTMLInputElement

	// When we remove the file this array becomes 0 so the check is required
	console.log('files found', file.files.length)
	if(file.files.length == 0) {
		document.getElementById('video-meta').hidden = true
	} else {
		// Size in MB
		let size = file.files[0].size / 1024 / 1000
		document.getElementById('vmn').textContent = `${file.files[0].name}`
		document.getElementById('vms').textContent = `${size} MB`
		document.getElementById('vmt').textContent = `${file.files[0].type}`

		document.getElementById('video-meta').hidden = false 
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.getElementById('video-file').onchange = populate_meta_form
	document.getElementById('verify-login-btn').onclick = confirm_auth
	document.getElementById('confirm-upload-btn').onclick = upload_video
})