import { registerBlockVariation } from "@wordpress/blocks";
import { __ } from "@wordpress/i18n";
import {
	InspectorControls,
	BlockControls,
	AlignmentToolbar,
} from "@wordpress/block-editor";
import { ToolbarGroup, ToolbarDropdownMenu } from "@wordpress/components";
import { Fragment } from "@wordpress/element";
import { addFilter } from "@wordpress/hooks";
import { createHigherOrderComponent } from "@wordpress/compose";

import { check, arrowRight, starFilled } from "@wordpress/icons";

// Variation du bloc "Liste" pour ajouter une classe spéciale
registerBlockVariation("core/list", {
	name: "iconed-list",
	title: "Liste avec icônes",
	description: "Liste dont chaque élément peut avoir une icône personnalisée.",
	attributes: {
		className: "is-iconed-list",
	},
	scope: ["inserter", "transform"],
	isActive: (blockAttributes) => {
		const cls = (blockAttributes && blockAttributes.className) || "";
		return cls.split(" ").includes("is-iconed-list");
	},
});

// -----------------------------
// 1. On étend les attributs de core/list-item
// -----------------------------

addFilter(
	"blocks.registerBlockType",
	"am/iconed-list-item-attributes",
	(settings, name) => {
		if (name !== "core/list-item") {
			return settings;
		}

		return {
			...settings,
			attributes: {
				...settings.attributes,
				icon: {
					type: "string",
					default: "",
				},
			},
		};
	}
);

// -----------------------------
// 2. On ajoute un panneau de réglages pour choisir l'icône
// -----------------------------

addFilter(
	"editor.BlockEdit",
	"am/iconed-list-item-controls",
	(BlockEdit) => (props) => {
		if (props.name !== "core/list-item") {
			return <BlockEdit {...props} />;
		}
		const { attributes, setAttributes } = props;
		const { icon } = attributes;

		const ICONS = [
			{
				title: __("Loupe"),
				value: "loupe",
			},
			{
				title: __("Sablier"),
				value: "sablier",
			},
			{ title: __("Cadenas"), value: "cadenas" },
			{ title: __("Check"), value: "check" },
			{ title: __("Loupe Alt"), value: "loupe-alt" },
			{ title: __("Pendule"), value: "pendule" },
		];

		return (
			<Fragment>
				<BlockEdit {...props} />
				<BlockControls>
					<ToolbarGroup>
						<ToolbarDropdownMenu
							label={__("Icône du bullet")}
							className="iconed-list-item-icon-dropdown"
							icon={
								<div
									className={`iconed-list-item-backend-icon-square iconed-list-item-backend-icon-square--${icon}`}
								></div>
							}
							controls={ICONS.map(({ title, value }) => ({
								title,
								icon: (
									<div
										className={`iconed-list-item-backend-icon-square iconed-list-item-backend-icon-square--${value}`}
									></div>
								),

								isActive: icon === value,
								onClick: () => setAttributes({ icon: value }),
							}))}
						/>
					</ToolbarGroup>
					<AlignmentToolbar
						value={attributes.align}
						onChange={(value) => setAttributes({ align: value })}
					/>
				</BlockControls>
			</Fragment>
		);
	}
);

// -----------------------------
// 3. On ajoute des props au HTML sauvegardé pour chaque <li>
// -----------------------------
addFilter(
	"blocks.getSaveContent.extraProps",
	"carhop/iconed-list-item-save-props",
	(extraProps, blockType, attributes) => {
		if (blockType.name !== "core/list-item" || !attributes.icon) {
			return extraProps;
		}

		if (attributes.icon) {
			extraProps = {
				...extraProps,
				className:
					(extraProps.className || "") +
					" has-custom-icon has-custom-icon--" +
					attributes.icon,
			};
		}

		return extraProps;
	}
);

// -----------------------------
// 4. Applique les mêmes classes en mode éditeur (BlockListBlock)
// -----------------------------
addFilter(
	"editor.BlockListBlock",
	"carhop/iconed-list-item-editor-classes",
	createHigherOrderComponent((BlockListBlock) => {
		return (props) => {
			if (props.name !== "core/list-item") {
				return <BlockListBlock {...props} />;
			}
			const slug = props.attributes?.icon || "";
			const className = [
				props.className || "",
				slug ? "has-custom-icon" : "",
				slug ? `has-custom-icon--${slug}` : "",
			]
				.filter(Boolean)
				.join(" ");

			return <BlockListBlock {...props} className={className} />;
		};
	}, "withIconedListItemEditorClasses")
);
