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: center;
					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()

			window.open(
				URL.createObjectURL(this.file),
				(event.ctrlKey || event.shiftKey) ? '_blank' : '_self',
			)
		})

		this.render()
	}

	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)