import { ContentImage } from "$/ui/objects/ContentImage.tsx";

import { type Node, type DefaultInlineNode } from "./schema.ts";

export function walkBlocks(
	content: (Node | DefaultInlineNode)[],
	fn: (_: Node | DefaultInlineNode) => unknown,
): void {
	for (const node of content) {
		fn(node);

		switch (node.type) {
			case "heading":
			case "code":
			case "quote":
			case "paragraph":
			case "list":
			case "list-item":
			case "link": {
				return walkBlocks(node.children, fn);
			}
		}
	}
}

function blocksNodeToTSX(node: Node | DefaultInlineNode) {
	switch (true) {
		case node.type === "heading": {
			switch (node.level) {
				case 1:
					return <h1>{blocksToTSX(node.children)}</h1>;
				case 2:
					return <h2>{blocksToTSX(node.children)}</h2>;
				case 3:
					return <h3>{blocksToTSX(node.children)}</h3>;
				case 4:
					return <h4>{blocksToTSX(node.children)}</h4>;
				case 5:
					return <h5>{blocksToTSX(node.children)}</h5>;
				default:
					return <h6>{blocksToTSX(node.children)}</h6>;
			}
		}

		case node.type === "image" && !!node.image.caption: {
			return (
				<figure>
					<ContentImage src={node.image.url} alt={node.image.alternativeText ?? undefined} />
					<figcaption>{node.image.caption}</figcaption>
				</figure>
			);
		}

		case node.type === "image": {
			return <ContentImage src={node.image.url} alt={node.image.alternativeText ?? undefined} />;
		}

		case node.type === "code": {
			return (
				<pre>
					<code>{blocksToTSX(node.children)}</code>
				</pre>
			);
		}

		case node.type === "quote": {
			return <blockquote>{blocksToTSX(node.children)}</blockquote>;
		}

		case node.type === "paragraph" &&
			node.children.length === 1 &&
			node.children[0]?.type === "text" &&
			node.children[0].text === "---": {
			return <hr />;
		}

		case node.type === "paragraph": {
			return <p>{blocksToTSX(node.children)}</p>;
		}

		case node.type === "list" && node.format === "ordered": {
			return <ol>${blocksToTSX(node.children)}</ol>;
		}

		case node.type === "list": {
			return <ul>${blocksToTSX(node.children)}</ul>;
		}

		case node.type === "list-item": {
			return <li>${blocksToTSX(node.children)}</li>;
		}

		case node.type === "link": {
			return <a href={node.url}>{blocksToTSX(node.children)}</a>;
		}

		case node.type === "text": {
			return [
				node.bold ? "strong" : undefined,
				node.code ? "code" : undefined,
				node.italic ? "em" : undefined,
				node.strikethrough ? "del" : undefined,
				node.underline ? "u" : undefined,
			].reduce((res: JSX.Element, Tag) => (Tag ? <Tag>{res}</Tag> : res), node.text);
		}
	}
}

export function blocksToTSX(
	content: (Node | DefaultInlineNode)[],
	filter: (node: Node | DefaultInlineNode) => boolean = () => true,
): JSX.Element {
	return content
		.filter(filter)
		.map(blocksNodeToTSX)
		.filter((s) => s !== undefined);
}

export const Blocks = ({
	content,
	filter = () => true,
}: {
	content: (Node | DefaultInlineNode)[];
	filter?: (node: Node | DefaultInlineNode) => boolean;
}) => blocksToTSX(content, filter);