import { type EditorBlock, toObject } from "@wp-reactor/editorial"
import { Suspense } from "react"
import { blockRegistry } from "@/blocks"

interface ContentProps {
	page?: {
		editorBlocks?: EditorBlock[]
		content?: string
		uri?: string
	}
	blocks?: EditorBlock[]
}

export function Content({ page, blocks }: ContentProps) {
	const list = page?.editorBlocks ?? blocks ?? []

	const topLevel = list.filter((block) => !block.parentClientId)

	return (
		<>
			{topLevel.map((block, index) => {
				const key = `${block.name || "block"}-${block.clientId || index}`

				if (blockRegistry.belongsToNamespace(block.name)) {
					const Renderer = blockRegistry.get(block.name)
					const attributes = toObject(block.attributes)
					// Certains blocs sont `React.lazy` (cf. blocks.tsx) : le rendu doit
					// vivre sous un `Suspense`. Le HTML est émis en SSR (streaming), le
					// fallback `null` n'apparaît qu'en navigation client le temps du chunk.
					return (
						<Suspense key={key} fallback={null}>
							<Renderer
								attributes={{
									...attributes,
									anchor:
										(attributes?.anchor as string | undefined) ??
										block.clientId,
								}}
								blockName={block.name}
							/>
						</Suspense>
					)
				}

				// Blocs hors namespace (core WordPress) : on rend le HTML produit par WP.
				return block.renderedHtml ? (
					<div
						key={key}
						// biome-ignore lint/security/noDangerouslySetInnerHtml: HTML rendu par WordPress, pas une saisie utilisateur
						dangerouslySetInnerHTML={{ __html: block.renderedHtml }}
					/>
				) : null
			})}
		</>
	)
}