import { TempstreamJSX } from "tempstream";
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import { PathFilePointer } from "@sealcode/file-manager";
import { imageRouter } from "src/back/image-router.js";

const component_arguments = {
	file: new ComponentArguments.File(),
	max_height: new ComponentArguments.Number(),
	max_width: new ComponentArguments.Number(),
	cover_image: new ComponentArguments.Image().setExampleValues([null]),
} as const;

export class Video extends Component<typeof component_arguments> {
	getArguments() {
		return component_arguments;
	}

	async toHTML({
		args: { file, max_width, max_height, cover_image },
		classes,
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
		const poster = cover_image
			? await imageRouter.singleImage(
					await cover_image.getPath(),
					max_width || 320,
					"jpg",
					false
				)
			: false;

		return (
			<div class={["video", ...classes]}>
				{file instanceof PathFilePointer ? (
					<video
						controls
						loading="lazy"
						poster={poster}
						style={[
							`${max_width ? `max-width: min(${max_width}px, 100cqw);` : ""}`,
							`${max_height ? `max-height: min(${max_height}px, 80cqh);` : ""}`,
						].join("; ")}
					>
						<source src={file.getURL()} type={file.mimetype} />
						Your browser does not support video —{" "}
						<a href={file.getURL()}>Download the video</a>
					</video>
				) : (
					""
				)}
			</div>
		);
	}
}