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

const component_arguments = {
	color: new ComponentArguments.Enum(["transparent", "normal", "accent", "accent2"]),
	content: new ComponentArguments.Markdown(),
	side_content: new ComponentArguments.NestedComponent(),
} as const;

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

	getTitle(
		_: JDDContext,
		args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
	) {
		return args.content.slice(0, 20) + "..." || null;
	}

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

	toHTML({
		args: { color, content, side_content },
		classes,
		jdd_context,
		index,
	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
		const { render_markdown, language } = jdd_context;
		return (
			<div
				class={["tekst markdown", ...classes, `tekst--color-${color}`]}
				style={`--jdd-index: ${index}`}
			>
				{side_content.isEmpty() ? (
					""
				) : (
					<div class="side-content">{side_content.render(jdd_context)}</div>
				)}
				{render_markdown(language, content)}
			</div>
		);
	}

	getHeadings(
		_context: JDDContext,
		args: ExtractStructuredComponentArgumentsParsed<{
			readonly content: ComponentArguments.Markdown;
		}>
	) {
		return this.getArguments().content.extractHeadings(args.content);
	}
}