import { __ } from "@wordpress/i18n";

import {
	Inserter,
	InnerBlocks,
	useBlockProps,
	RichText,
	BlockControls,
	InspectorControls,
} from "@wordpress/block-editor";
import {
	ToolbarGroup,
	ToolbarButton,
	DropdownMenu,
	ToolbarDropdownMenu,
	PanelBody,
	TextControl,
	TextareaControl,
	ToggleControl,
	SelectControl,
} from "@wordpress/components";
import { useSelect, useDispatch } from "@wordpress/data"; // pour les querry
import { useEffect, useState } from "@wordpress/element";

import "./editor.scss";
import { getThematiqueFamilySlug } from "../../utilities.js";
import { getActiveFormat } from "@wordpress/rich-text";

export default function Edit({ attributes, setAttributes }) {
	const { editPost } = useDispatch("core/editor");
	const [cover, setCover] = useState(null);

	let postTitle = useSelect((select) =>
		select("core/editor").getEditedPostAttribute("title")
	);

	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 currentGeneralThematique = postParentTaxonomy ?? postMainTaxonomy ?? null;

	// let currentGeneralThematiqueSlug = postParentTaxonomy
	// 	? getThematiqueFamilySlug(postParentTaxonomy.slug)
	// 	: postMainTaxonomy
	// 	? getThematiqueFamilySlug(postMainTaxonomy.slug)
	// 	: null;

	let currentGeneralThematiqueCover = useSelect(
		(select) => {
			if (currentGeneralThematique) {
				return select("core").getMedia(
					currentGeneralThematique.acf.taxonomy_pictures.illustration_s
				);
			}
		},
		[currentGeneralThematique]
	);

	if (!postTitle) {
		return (
			<div>
				<p>Chargement des données...</p>
			</div>
		);
	}

	if (postMainTaxonomy && postTitle && currentGeneralThematique) {
		// console.log(currentGeneralThematique);
		return (
			<section className="homegrade-blocks-chapter-header-block">
				<div className="homegrade-blocks-chapter-header-block__infos">
					<p className="homegrade-blocks-chapter-header-block__page-thematic-title">
						{currentGeneralThematique.name}
					</p>

					<RichText
						onChange={(value) => {
							console.log(value);
							getActiveFormat(value);
							editPost({ title: value });
						}}
						value={postTitle}
						placeholder={__(
							"Text de placeholder du bloc  chapter-header",
							"homegrade-blocks"
						)}
						tagName="h2"
						allowedFormats={[]}
					/>

					{postParentTaxonomy && (
						<p href="" className="cta cta--primary cta--buton">
							Télécharger la brochure{" "}
						</p>
					)}
				</div>
				{currentGeneralThematiqueCover && (
					<img
						className="homegrade-blocks-chapter-header-block__page-thematic-cover page-thematic-cover"
						src={`${currentGeneralThematiqueCover.source_url}`}
						alt=""
					/>
				)}
			</section>
		);
	}
}
