import { TempstreamJSX } from "tempstream";
import type {
	ComponentToHTMLArgs,
	ExtractStructuredComponentArgumentsParsed,
	JDDContext,
} from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import { button, button_variants } from "src/back/elements/button.js";

const component_arguments = {
	color: new ComponentArguments.Enum([
		"text-fg-on-text-bg",
		"text-accent-on-text-bg",
		"text-accent2-on-text-bg",
		"text-on-accent-on-accent",
		"text-on-accent2-on-accent2",
	]),
	title: new ComponentArguments.ShortText(),
	title_color: new ComponentArguments.Enum(["normal", "accent1", "accent2"] as const),
	subtitle: new ComponentArguments.ShortText(),
	content: new ComponentArguments.Markdown(),
	buttons: new ComponentArguments.List(
		new ComponentArguments.Structured({
			text: new ComponentArguments.ShortText(),
			href: new ComponentArguments.ShortText(),
			variant: new ComponentArguments.Enum(button_variants),
		})
	),
} as const;

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

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

	async toHTML({
		args: { title, title_color, subtitle, content, color, buttons },
		classes,
		jdd_context: { render_markdown, language },
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
		classes.push(`hero--color-${color}`);
		return (
			<div class={["hero", ...classes]}>
				<h1 class={[`hero__title--color-${title_color}`]}>{title}</h1>
				<span class={["hero__subtitle"]}>{subtitle}</span>
				<div class={["hero__content"]}>{render_markdown(language, content)}</div>
				<div class={["hero__buttons"]}>
					{buttons.map((button_data) => button(button_data))}
				</div>
			</div>
		);
	}
}