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

const component_arguments = {
	title: new ComponentArguments.ShortText(),
	content: new ComponentArguments.Structured({
		text: new ComponentArguments.Markdown(),
		number: new ComponentArguments.ShortText().setExampleValues(["000-000-000"]),
	}),
	faq: new ComponentArguments.List(
		new ComponentArguments.Structured({
			question: new ComponentArguments.ShortText(),
			answer: new ComponentArguments.Markdown(),
		})
	),
	button: new ComponentArguments.Structured({
		buttonText: new ComponentArguments.ShortText().setExampleValues([""]),
		buttonLink: new ComponentArguments.ShortText().setExampleValues([""]),
	}),
} as const;

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

	toHTML({
		args: { title, content, faq, button },
		jdd_context: { render_markdown, language },
	}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
		const buttonText = button.buttonText.toUpperCase();

		return (
			<div class="faq-component">
				<div class="container">
					<div class="title-container">
						<div class="title">{title} </div>
						<div class="content">
							{render_markdown(language, content.text)}{" "}
							<strong>{content.number}</strong>
						</div>
					</div>
					<div>
						<div class="faq-container">
							{faq.map((element, index) => (
								<details class="question-container" open={index == 0}>
									<summary class="question">{element.question}</summary>
									<div class="answer">
										<p>{render_markdown(language, element.answer)}</p>
									</div>
								</details>
							))}
						</div>
					</div>
					<div class="button-container">
						{button.buttonText === "" ? null : (
							<a class="button" href={button.buttonLink}>
								{buttonText}
							</a>
						)}
					</div>
				</div>
			</div>
		);
	}
}