import type { FlatTemplatable } from "tempstream";
import { TempstreamJSX } from "tempstream";
import type {
	ComponentToHTMLArgs,
	ExtractStructuredComponentArgumentsParsed,
	JDDContext,
} from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";

import _locreq from "locreq";

const locreq = _locreq(new URL("./", import.meta.url).pathname);

const component_arguments = {
	image: new ComponentArguments.Structured({
		image: new ComponentArguments.Image().setExampleImages(
			["image1.jpg", "image2.jpg", "image3.jpg", "image5.jpg"].map((name) =>
				locreq.resolve("assets/" + name)
			)
		),
		alt: new ComponentArguments.ShortText(),
	}),
} as const;

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

	getTitle(
		_: JDDContext,
		args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
	) {
		return args.image.alt || null;
	}

	getHeadings() {
		return [];
	}

	toHTML({
		args: { image },
		classes,
		jdd_context: { render_image },
		index,
	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
		return (
			<div class={["image-jdd", ...classes]} style={`--jdd-index: ${index}`}>
				{render_image(image.image, {
					sizesAttr: "100vw",
					alt: image.alt,
				})}
			</div>
		);
	}
}