import { CustomHTMLElement } from "./lib/custom_html_element.mjs";

export class N2File extends CustomHTMLElement {
	static {// {{{
		this.tmpl = document.createElement('template')
		this.tmpl.innerHTML = `
			<style>
				:host {
					display: inline-grid;
					grid-template-columns: min-content min-content;
					align-items: end;
					white-space: nowrap;
					cursor: pointer;

					.el-image {
						max-width: var(--thumbnail-width);
						max-height: var(--thumbnail-height);
					}

					.el-filename {
						display: none;
						font-weight: bold;
						background-color: #ddd;
						border-radius: 4px;
						padding: 4px 8px;
						margin-left: 8px;
					}
				}
			</style>
			<img data-el="image" src="/images/${_VERSION}/file_icons/generic.svg">
			<div data-el="filename"></div>
		`
	}// }}}
	constructor() {// {{{
		super(true)

		this.addEventListener('click', event => {
			event.preventDefault()
			event.stopPropagation()

			// Download to disk.
			if (event.shiftKey) {
				this.downloadToDisk()
				return
			}

			// Open in browser.
			window.open(
				URL.createObjectURL(this.file),
				event.ctrlKey ? '_blank' : '_self',
			)
		})

		this.render()
	}// }}}
	async downloadToDisk() {// {{{
		try {
			const handle = await window.showSaveFilePicker({
				suggestedName: this.file.name,
			})

			const writable = await handle.createWritable()
			const blobStream = this.file.stream()
			await blobStream.pipeTo(writable)
		} catch (err) {
			if (err.name == 'AbortError')
				return
			console.error(err)
			alert(err.message)
		}
	}// }}}
	async render() {// {{{
		const src = this.getAttribute('src')

		// N2's db:// URLs are fetched from IndexedDB.
		if (src.toLowerCase().match('^db://[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$')) {
			// image population has to happen asynchronously,
			// while Marked lib has to be returned a string when exiting this function.
			// populateImg makes sure this returned img element exists and then populates it
			// with the image from IndexedDB.
			const file = await globalThis.nodeStore.files.get(src.slice(5))
			if (!file)
				return
			this.file = file.file

			if (file.file.type.startsWith('image/'))
				this.elImage.src = URL.createObjectURL(file.file)
			else {
				// Check for and use an existing MIME type icon.
				// Place them in static/images/file_icons/ and replace the slash with an underscore.
				const url = `/images/${_VERSION}/file_icons/${file.file.type.replaceAll('/', '_')}.svg`
				const res = await fetch(url)
				if (res.ok)
					this.elImage.src = url

				this.elFilename.innerText = file.file.name
				this.elFilename.style.display = 'block'
			}
		} else
			this.elImage.src = src
	}// }}}
}
customElements.define('n2-file', N2File)