import { registerBlockStyle } from "@wordpress/blocks";
import { addFilter } from "@wordpress/hooks";
import { createElement, cloneElement, Children } from "@wordpress/element";
import { createHigherOrderComponent } from "@wordpress/compose";

// Enregistrement du style de bloc
registerBlockStyle("core/columns", {
	name: "sticky-columns",
	label: "Colonnes sticky",
});

// Fonction pour vérifier si le style sticky-columns est appliqué
const hasStickyColumnsStyle = (attributes) => {
	const className = attributes?.className || "";
	return className.includes("is-style-sticky-columns");
};

// -----------------------------
// 1. Modifier le HTML sauvegardé pour envelopper les colonnes dans une div avec la classe "test"
// -----------------------------
addFilter(
	"blocks.getSaveElement",
	"carhop/sticky-columns-wrapper",
	(element, blockType, attributes) => {
		// Vérifier si c'est le bloc core/columns et si le style sticky-columns est appliqué
		if (
			blockType.name !== "core/columns" ||
			!hasStickyColumnsStyle(attributes)
		) {
			return element;
		}

		// Si l'élément est null ou n'a pas d'enfants, retourner tel quel
		if (!element || !element.props || !element.props.children) {
			return element;
		}

		// Envelopper chaque colonne individuellement dans une div avec la classe "test"
		const children = Children.toArray(element.props.children);
		const wrappedChildren = children.map((child, index) => {
			// Si c'est un élément React (une colonne), l'envelopper dans une div
			if (child && typeof child === "object" && child.type) {
				return createElement(
					"div",
					{ key: `sticky-column-wrapper-${index}`, className: "test" },
					child,
				);
			}
			// Sinon, retourner tel quel
			return child;
		});

		// Retourner l'élément avec les enfants enveloppés
		return cloneElement(element, {
			...element.props,
			children: wrappedChildren,
		});
	},
);

// -----------------------------
// 2. Modifier l'affichage dans l'éditeur pour envelopper les colonnes dans une div avec la classe "test"
// Note: Le rendu côté serveur est géré par render.php
// Pour l'éditeur, on utilise un filtre sur BlockEdit pour modifier le rendu
// -----------------------------
addFilter(
	"editor.BlockEdit",
	"carhop/sticky-columns-editor-wrapper",
	createHigherOrderComponent((BlockEdit) => {
		return (props) => {
			// Vérifier si c'est le bloc core/columns et si le style sticky-columns est appliqué
			if (
				props.name !== "core/columns" ||
				!hasStickyColumnsStyle(props.attributes)
			) {
				return <BlockEdit {...props} />;
			}

			// Récupérer le rendu du bloc
			const blockEditElement = <BlockEdit {...props} />;

			// Si l'élément a des enfants (les inner blocks), on les enveloppe dans une div avec la classe "test"
			if (
				blockEditElement &&
				blockEditElement.props &&
				blockEditElement.props.children
			) {
				// Cloner l'élément et envelopper les enfants dans une div avec la classe "test"
				return cloneElement(blockEditElement, {
					...blockEditElement.props,
					children: createElement(
						"div",
						{ className: "test" },
						blockEditElement.props.children,
					),
				});
			}

			return blockEditElement;
		};
	}, "withStickyColumnsWrapper"),
);
