import type {
	MediaAdapter,
	MediaCapabilities,
	MediaLoadCallbacks
} from './media-adapter.js';
import { getFilenameTitle } from './media-title.js';

const IMAGE_CAPABILITIES: MediaCapabilities = {
	audio: false,
	carousel: false,
	dynamicTexture: false,
	navigation: false,
	playback: false,
	timeline: false
};

export class ImageMediaAdapter implements MediaAdapter<HTMLImageElement, HTMLImageElement> {
	readonly capabilities = IMAGE_CAPABILITIES;
	readonly kind = 'image' as const;

	constructor(readonly element: HTMLImageElement) {}

	get textureSource(): HTMLImageElement {
		return this.element;
	}

	getTitle(): string {
		return this.element.getAttribute('title') ||
			this.element.getAttribute('alt') ||
			getFilenameTitle(this.element.currentSrc || this.element.src) ||
			'Image Title';
	}

	bindLoadState({ onError, onReady }: MediaLoadCallbacks): void {
		if (this.element.complete && this.element.naturalWidth > 0) {
			queueMicrotask(onReady);
		}

		this.element.addEventListener('load', onReady);
		this.element.addEventListener('error', onError);
	}

	hideElement(): void {
		this.element.style.display = 'none';
	}

	load(): void {
		// Images begin loading from markup. Kept for parity with video media.
	}

	next(): boolean {
		return false;
	}

	previous(): boolean {
		return false;
	}

	shouldUpdateTexture(): boolean {
		return false;
	}

	showElement(): void {
		this.element.style.display = '';
	}
}