import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import OptionsSelectControl from "./OptionsSelectControl";
import { decodeEntities, RawHTML } from "@wordpress/block-library";
import "./editor.scss";
import { useSelect } from "@wordpress/data";
// import { decodeEntities } from "@wordpress/html-entities";

export default function Edit({ attributes, setAttributes }) {
	const { relatedPostId } = attributes;
	const blockProps = useBlockProps();

	let currentRelatedPost = useSelect((select) =>
		select("core").getEntityRecord("postType", "articles", relatedPostId),
	);

	console.log(currentRelatedPost);
	return (
		<>
			<OptionsSelectControl
				setAttributes={setAttributes}
				relatedPostId={attributes.relatedPostId}
			/>
			<section
				{...useBlockProps({
					className: `article-container`,
				})}
			>
				{!relatedPostId && (
					<>
						<p>
							{__(
								"Ce bloc n'est relié à aucun article. Rattachez-le à un article dans la barre latérale.",
								"dynamiques-blocks",
							)}
						</p>
					</>
				)}
				{currentRelatedPost && (
					<>
						<h3>{currentRelatedPost.title.rendered}</h3>
						<div
							dangerouslySetInnerHTML={{
								__html: currentRelatedPost.content.rendered,
							}}
						/>
						{/* <RawHTML>{currentRelatedPost.content.rendered}</RawHTML> */}
					</>
				)}
			</section>
		</>
	);
}
