import { __ } from "@wordpress/i18n";
import { registerFormatType, toggleFormat } from "@wordpress/rich-text";

import { RichTextToolbarButton, BlockControls } from "@wordpress/block-editor";
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";

import { textColor } from "@wordpress/icons";
import { useSelect } from "@wordpress/data";

import "./uppercased-small-title.css";

const formatName = "carhop-format/uppercased-small-title";

const UppercasedSmallTitleFormatButton = (props) => {
	const { isActive, value, onChange } = props;

	function toggleUppercasedSmallTitle() {
		onChange(
			toggleFormat(value, {
				type: formatName,
			})
		);
	}

	// // Vérifier si on est dans un article (post type 'post')
	// const postType = useSelect((select) => {
	// 	return select("core/editor")?.getCurrentPostType();
	// }, []);

	// // Ne pas afficher le bouton si ce n'est pas un article
	// if (postType !== "page") {
	// 	return null;
	// }

	return (
		<BlockControls>
			<ToolbarGroup>
				<ToolbarButton
					isActive={isActive}
					icon={textColor}
					title={
						!isActive
							? "Petit titre en majuscules"
							: "Retirer Petit titre en majuscules"
					}
					onClick={toggleUppercasedSmallTitle}
				/>
			</ToolbarGroup>
		</BlockControls>
	);
};

registerFormatType(formatName, {
	title: __("Petit titre en majuscules", "carhop-format-types"),
	tagName: "span",
	className: "uppercased-small-title",
	edit: UppercasedSmallTitleFormatButton,
});
