import { render, useState, useEffect } from "@wordpress/element";
import { FocalPointPicker } from "@wordpress/components";
import { useSelect, useDispatch } from "@wordpress/data";

const InlineGutenbergFocalPointPicker = () => {
	// Récupérer l'ID et l'URL de l'image mise en avant
	const { featuredImageId, featuredImageUrl, focalPoint } = useSelect((select) => {
		const featuredMedia = select("core/editor").getEditedPostAttribute("featured_media");
		const media = featuredMedia ? select("core").getMedia(featuredMedia) : null;
		const meta = select("core/editor").getEditedPostAttribute("meta");

		return {
			featuredImageId: featuredMedia,
			featuredImageUrl: media?.source_url || null,
			focalPoint: meta?.thumbnail_focal_point || { x: 0.5, y: 0.5 },
		};
	});

	const { editPost } = useDispatch("core/editor");

	// Ne rien afficher si pas d'image mise en avant
	if (!featuredImageId || !featuredImageUrl) {
		return null;
	}

	return (
		<div style={{ marginTop: "16px", paddingTop: "16px", borderTop: "1px solid #ddd" }}>
			<div style={{ marginBottom: "12px" }}>
				<strong style={{ fontSize: "13px", color: "#1e1e1e" }}>Point focal de recadrage</strong>
			</div>
			<p style={{ marginBottom: "12px", fontSize: "13px", color: "#757575" }}>
				Cliquez sur l'image pour définir le point focal utilisé lors du recadrage automatique.
			</p>
			<FocalPointPicker
				url={featuredImageUrl}
				value={focalPoint}
				onChange={(value) => {
					editPost({
						meta: {
							thumbnail_focal_point: value,
						},
					});
				}}
			/>
			<p style={{ marginTop: "12px", fontSize: "12px", color: "#757575" }}>
				Position :{" "}
				<strong style={{ color: "#2271b1" }}>
					{Math.round(focalPoint.x * 100)}% / {Math.round(focalPoint.y * 100)}%
				</strong>
			</p>
		</div>
	);
};

// Fonction pour injecter le focal point picker dans le panneau de featured image
function injectGutenbergFocalPointPicker() {
	// Chercher le panneau de featured image
	const featuredImagePanel = document.querySelector('.editor-post-featured-image, [aria-label="Featured image"]');

	if (!featuredImagePanel) {
		return false;
	}

	// Vérifier qu'il y a une image
	const hasImage = featuredImagePanel.querySelector("img");
	if (!hasImage) {
		return false;
	}

	// Créer le conteneur s'il n'existe pas
	let container = document.getElementById("gutenberg-focal-point-inline-root");

	if (!container) {
		container = document.createElement("div");
		container.id = "gutenberg-focal-point-inline-root";
		featuredImagePanel.appendChild(container);
	}

	// Render le composant React
	render(<InlineGutenbergFocalPointPicker />, container);
	return true;
}

// Observer pour détecter quand le panneau de featured image est ajouté/modifié
const observer = new MutationObserver(() => {
	injectGutenbergFocalPointPicker();
});

// Démarrer l'observation quand le DOM est prêt
window.addEventListener("DOMContentLoaded", () => {
	// Essayer d'injecter immédiatement
	setTimeout(() => {
		if (injectGutenbergFocalPointPicker()) {
			// Si réussi, continuer à observer pour les changements
			const editorRoot = document.querySelector(".editor-styles-wrapper, .edit-post-visual-editor");
			if (editorRoot) {
				observer.observe(document.body, {
					childList: true,
					subtree: true,
				});
			}
		}
	}, 500);
});

// Réessayer périodiquement pendant les premières secondes
let retryCount = 0;
const retryInterval = setInterval(() => {
	if (injectGutenbergFocalPointPicker() || retryCount > 10) {
		clearInterval(retryInterval);
	}
	retryCount++;
}, 500);