import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	RichText,
	BlockControls,
	InspectorControls,
} from "@wordpress/block-editor";
import {
	ToolbarGroup,
	ToolbarButton,
	DropdownMenu,
	ToolbarDropdownMenu,
	PanelBody,
	TextControl,
	TextareaControl,
	ToggleControl,
	SelectControl,
} from "@wordpress/components";
import { useSelect } from "@wordpress/data"; // pour les querry
import "./editor.scss";
import apiFetch from "@wordpress/api-fetch";
import { useEffect, useState, RawHTML } from "@wordpress/element";
import { Autocomplete } from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
	const { relatedPostId, montexte } = attributes;
	// console.log(montexte);

	function handleRelatedPostChange(postId) {
		setAttributes({ relatedPostId: Number(postId), montexte: "test" });
	}

	let [taxonomiesOptions, setTaxonomiesOptions] = useState(null);
	let postTaxonomies = useSelect((select) =>
		select("core/editor").getCurrentPostAttribute("thematiques")
	);
	let postMainTaxonomy = useSelect(
		(select) =>
			select("core").getEntityRecord(
				"taxonomy",
				"thematiques",
				postTaxonomies[0]
			),
		[postTaxonomies]
	);
	let postParentTaxonomy = useSelect(
		(select) => {
			if (postMainTaxonomy) {
				return select("core").getEntityRecord(
					"taxonomy",
					"thematiques",
					postMainTaxonomy.parent
				);
			}
		},
		[postMainTaxonomy]
	);

	let relatedPostsOptions = useSelect(
		(select) => {
			if (postMainTaxonomy) {
				return select("core").getEntityRecords("postType", "fiche-questions", {
					per_page: -1,
					_embed: true,
					thematiques: postMainTaxonomy.id,
				});
			}
		},
		[postMainTaxonomy]
	);

	let currentRelatedPost = useSelect((select) => {
		return select("core").getEntityRecord(
			"postType",
			"fiche-questions",
			relatedPostId
		);
	});

	const { relatedPosts } = useSelect((select) => {
		const { getEntityRecords } = select("core");
		let query = {};
		if (postMainTaxonomy) {
			// Query args
			query = {
				status: "publish",
				per_page: -1,
				thematiques: postMainTaxonomy ? postMainTaxonomy.id : null,
			};
		}

		return {
			relatedPosts: getEntityRecords("postType", "fiche-questions", query),
		};
	});
	// if (relatedPosts) {
	// 	let test = relatedPosts.map(({ item }) => <p>{item.title.rendered}</p>);
	// }
	let relatedPostsContent;
	if (relatedPosts) {
		relatedPostsContent = relatedPosts.map((post) => {
			return (
				<>
					<h2>{post.title.rendered}</h2>
					<RawHTML>{post.content.raw}</RawHTML>
				</>
			);
		});
	}

	if (!relatedPostsOptions) {
		return (
			<>
				<p>chargement…</p>
			</>
		);
	}

	console.log(relatedPostId);

	return (
		<>
			{relatedPosts && relatedPosts.length > 0 && (
				<div>{relatedPostsContent}</div>
			)}

			<section {...useBlockProps}>
				{!relatedPostId && (
					<>
						<p>
							{__(
								"Ce bloc n'est relié à aucune question. Rattachez-le à une fiche question dans la barre latérale.",
								"homegrade-blocks"
							)}
						</p>
					</>
				)}

				{currentRelatedPost && (
					<>
						<h3>{currentRelatedPost.title.rendered}</h3>
						<RawHTML>{currentRelatedPost.content.raw}</RawHTML>
					</>
				)}
				{/* {relatedPostsOptions &&
					relatedPostsOptions.map((post) => {
						return <li>{post.title.rendered}</li>;
					})} */}
			</section>
		</>
	);
}
