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

const component_arguments = {
	component1: new ComponentArguments.NestedComponent(),
	component2: new ComponentArguments.NestedComponent(),
} as const;

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

	getCSSClumps(
		jdd_context: JDDContext,
		args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
	) {
		const result = [
			...ComponentArguments.NestedComponent.getCSSClumpsForNested(
				jdd_context,
				(args?.component1 as Record<string, unknown>) || {}
			),
			...ComponentArguments.NestedComponent.getCSSClumpsForNested(
				jdd_context,
				(args?.component2 as Record<string, unknown>) || {}
			),
		];
		return result;
	}

	async toHTML({
		args: { component1, component2 },
		classes,
		jdd_context,
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
		return (
			<div class={["split-view", ...classes]}>
				<div class="split-view__wrapper">
					<div class="split-view__half">
						{ComponentArguments.NestedComponent.render({
							jdd_context,
							data: component1 as Record<string, unknown>,
						})}
					</div>
					<div class="split-view__half">
						{ComponentArguments.NestedComponent.render({
							jdd_context,
							data: component2 as Record<string, unknown>,
						})}
					</div>
				</div>
			</div>
		);
	}
}