// Register our property at core/heading
wp.hooks.addFilter(
	"blocks.registerBlockType",
	"homegrade-blocks/block_editor_adjustments", // our custom namespace
	function (settings, name) {
		if (name !== "core/button") {
			// skip other core blocks
			return settings;
		}
		settings.attributes = Object.assign(settings.attributes, {
			buttonVariant: {
				type: "boolean",
				default: false,
			},
		});
		return settings;
	}
);
// Display the custom ToggleControl for every header; toggle the custom property

wp.hooks.addFilter(
	"editor.BlockEdit",
	"homegrade-blocks/block_editor_adjustments",
	wp.compose.createHigherOrderComponent(function (BlockEdit) {
		return function (props) {
			if (props.name !== "core/button") {
				// skip other core blocks
				return wp.element.createElement(BlockEdit, props);
			}

			return wp.element.createElement(
				wp.element.Fragment,
				{},
				wp.element.createElement(
					wp.blockEditor.InspectorControls,
					{},
					wp.element.createElement(
						wp.components.PanelBody,
						{},
						wp.element.createElement(
							wp.components.ToggleControl,

							{
								label: "Show in Table of Contents",
								checked: props.attributes.buttonVariant,
								onChange: (value) => {
									props.setAttributes({
										buttonVariant: value,
									});
								},
							}
						)
					)
				),
				wp.element.createElement(BlockEdit, props)
			);
		};
	})
);

// Convert the custom property value into CSS class name on every save

wp.hooks.addFilter(
	"blocks.getSaveContent.extraProps",
	"homegrade-blocks/block_editor_adjustments",
	function (extraProps, blockType, attributes) {
		if (blockType.name !== "core/button") {
			// skip other core blocks
			return extraProps;
		}
		if (attributes.buttonVariant) {
			extraProps.className = extraProps.className + " lol " + " extra-props-de-antoine";
		}

		return extraProps;
	}
);