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 "./uppercase.css";

const formatName = "carhop-format/uppercase";

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

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

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

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