import { TempstreamJSX } from "tempstream";
import type { ComponentToHTMLArgs } from "@sealcode/jdd";
import { Component, ComponentArguments } from "@sealcode/jdd";
import TelegramIcon from "./icons/telegram.svg";
import EmailIcon from "./icons/email.svg";
import ForumIcon from "./icons/forum.svg";
import IRCIcon from "./icons/irc.svg";

const component_arguments = {
	title: new ComponentArguments.ShortText(),
	image: new ComponentArguments.Image(),
	leftheader: new ComponentArguments.ShortText(),
	rightheader: new ComponentArguments.ShortText(),
	links: new ComponentArguments.List(
		new ComponentArguments.Structured({
			href: new ComponentArguments.ShortText(),
			name: new ComponentArguments.ShortText(),
			icon: new ComponentArguments.Enum(["Telegram", "Forum", "Email", "IRC"]),
			title: new ComponentArguments.ShortText(),
		})
	),
} as const;

const iconNameToIcon: Record<string, string | undefined> = {
	Telegram: TelegramIcon.url,
	Email: EmailIcon.url,
	Forum: ForumIcon.url,
	IRC: IRCIcon.url,
};

const renderContact = ({
	href,
	name,
	icon,
	title,
}: {
	href: string;
	name: string;
	icon: string;
	title: string;
}) => {
	const icon_url = iconNameToIcon[icon];
	if (!icon_url) {
		return " ";
	}
	return (
		<div class="notice-board__contact">
			<a
				class="notice-board__contact-icon"
				href={href}
				{...(title ? { title } : {})}
			>
				<img src={icon_url} alt={name} width="55" height="55" />
				<span>{name}</span>
			</a>
		</div>
	);
};

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

	async toHTML({
		args: { title, image, links, rightheader, leftheader },
		classes,
		jdd_context: { render_markdown, render_image, language },
	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
		return (
			<section class={["nb-root", ...classes]}>
				<div class="notice-board">
					{title && (
						<div
							class="notice-board__anchor-point"
							id={render_markdown(language, title)}
						></div>
					)}
					<div class="notice-board__background">
						{render_image(image, {
							resolutions: [800, 1000, 1200, 1500, 2000],
							sizesAttr: "100vw",
							alt: "",
						})}
					</div>
					<div class="notice-board__body">
						<div class="notice-board__body-inner">
							<h2 class="notice-board__header-main">
								{render_markdown(language, leftheader)}
							</h2>

							<h3 class="notice-board__header-minor">
								{render_markdown(language, rightheader)}
							</h3>
							<address class="notice-board__contacts">
								{links.map(renderContact)}
							</address>
						</div>
					</div>
				</div>
			</section>
		);
	}
}