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

const component_arguments = {
	title: new ComponentArguments.ShortText(),
	level: new ComponentArguments.Enum(["1", "2", "3", "4", "5", "6"]).setExampleValues([
		"2",
	]),
	blur_backdrop: new ComponentArguments.Enum(["true", "false"]),
	font_family: new ComponentArguments.Enum([
		"industrial",
		"sans-serif",
		"serif",
		"slab-serif",
		"headings",
	]),
} as const;

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

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

	async toHTML({
		args: { title, level, font_family, blur_backdrop },
		classes,
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
		return (
			<div
				class={[
					"heading-with-echo",
					...classes,
					{ "heading-with-echo--blur": blur_backdrop == "true" },
				]}
				style={`font-family: var(--font-${font_family});`}
			>
				{`<h${level} class="fancy-heading__shadow1">${title}</h${level}>`}
				{`<h${level} class="fancy-heading__shadow2">${title}</h${level}>`}
				{`<h${level} class="fancy-heading__main">${title}</h${level}>`}
			</div>
		);
	}
}