import type { FlatTemplatable } from "tempstream";
import { TempstreamJSX } from "tempstream";
import type {
	ComponentToHTMLArgs,
	ExtractStructuredComponentArgumentsParsed,
	JDDContext,
} from "@sealcode/jdd";
import { Component, ComponentArguments, insert_nbsp } from "@sealcode/jdd";
import { horizontalScroller } from "../../routes/common/horizontal-scroller/horizontal-scroller.js";

const component_arguments = {
	title: new ComponentArguments.ShortText(),
	images: new ComponentArguments.List(
		new ComponentArguments.Structured({
			image: new ComponentArguments.Image(),
			alt: new ComponentArguments.ShortText(),
		})
	),
	bleed: new ComponentArguments.Boolean(),
} as const;

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

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

	toHTML({
		args: { title, images, bleed },
		classes,
		jdd_context: { render_image },
		index,
	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
		return (
			<div
				class={["horizontal-gallery", ...classes]}
				data-bleed={bleed ? "true" : "false"}
				style={`--jdd-index: ${index}`}
			>
				{horizontalScroller({
					elements: (images || []).map((image) =>
						render_image(image.image, {
							sizesAttr: "100vw",
							container: { width: 800, height: 500, objectFit: "contain" },
							alt: image.alt,
						})
					),
					render: async ({ scroller, markers }) => (
						<div>
							<div class="horizontal-gallery__top-bar">
								<h2>{insert_nbsp(title)}</h2>
								<div class="horizontal-gallery__buttons">
									<button
										class="prev-button"
										data-action="horizontal-scroller#scrollLeft"
										type="button"
									>
										<span style="transform: rotate(180deg); margin-right: 16px;">
											←
										</span>
									</button>
									<button
										class="next-button"
										data-action="horizontal-scroller#scrollRight"
										type="button"
									>
										<span>→</span>
									</button>
								</div>
							</div>
							{scroller}
							{markers}
						</div>
					),
				})}
			</div>
		);
	}
}
