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

export const background_variants = ["variant1", "variant2"];

const component_arguments = {
	variant: new ComponentArguments.Enum(background_variants),
	grow_to_screen_height: new ComponentArguments.Boolean(),
	content: new ComponentArguments.NestedComponent(),
} as const;

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

	getCSSClumps(
		jdd_context: JDDContext,
		args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
	) {
		const result = [...(args?.content?.getCSSClumps(jdd_context) || [])];
		return result;
	}

	async toHTML({
		args: { variant, content, grow_to_screen_height },
		classes,
		jdd_context,
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
		return (
			<div
				class={[
					"background-wrapper",
					`background-wrapper--${variant}`,
					{ "background-wrapper--grow-height": grow_to_screen_height },
					...classes,
				]}
			>
				{content.render(jdd_context)}
			</div>
		);
	}
}