import { TempstreamJSX } from "tempstream";
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import { v4 as uuid } from "uuid";

const component_arguments = {
	custom_css: new ComponentArguments.ShortText(),
	content: new ComponentArguments.NestedComponent(),
} as const;

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

	async toHTML({
		args: { custom_css, content },
		classes,
		jdd_context,
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
		const unique_class = `css-wrapper--${uuid()}`;
		return (
			<div class={["custom-css-wrapper", unique_class, ...classes]}>
				{
					/* HTML */ `<style>
						.${unique_class}{ ${custom_css}  }
					</style>`
				}
				{ComponentArguments.NestedComponent.render({
					jdd_context,
					data: content as Record<string, unknown>,
				})}
			</div>
		);
	}
}