import { __ } from "@wordpress/i18n";

import {
	useBlockProps,
	RichText,
	BlockControls,
} from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";
import { dispatch, useSelect } from "@wordpress/data";

import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { headingLevel3, headingLevel4, headingLevel5 } from "@wordpress/icons";
import { KeyboardShortcuts } from "@wordpress/components";

import "./editor.scss";

export default function Edit({
	attributes,
	setAttributes,
	clientId,
	...blockProps
}) {
	const { title, headingLevel } = attributes;

	function onChangeHeadingLevel(newHeadingLevel) {
		setAttributes({ headingLevel: newHeadingLevel });
	}
	function insertParagraphOnEnter(e) {
		const newBlock = createBlock("core/paragraph", {});
		dispatch("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
	}
	const blockIndex = useSelect((select) => {
		const { getBlockIndex } = select("core/block-editor");
		return getBlockIndex(clientId);
	});

	return (
		<>
			<BlockControls>
				<ToolbarGroup>
					<ToolbarButton
						isActive={headingLevel === "h3"}
						icon={headingLevel3}
						onClick={() => {
							onChangeHeadingLevel("h3");
						}}
					/>
					<ToolbarButton
						isActive={headingLevel === "h4"}
						icon={headingLevel4}
						onClick={() => {
							onChangeHeadingLevel("h4");
						}}
					/>
					<ToolbarButton
						isActive={headingLevel === "h5"}
						icon={headingLevel5}
						onClick={() => {
							onChangeHeadingLevel("h5");
						}}
					/>
				</ToolbarGroup>
			</BlockControls>
			<KeyboardShortcuts
				shortcuts={{
					enter: (e) => insertParagraphOnEnter(e),
				}}
			>
				<RichText
					onChange={(value) => setAttributes({ title: value })}
					value={title}
					disableLineBreaks
					placeholder={__(
						"Insérez votre titre ici",
						"homegrade-blocks__texte-fonctionnel"
					)}
					allowedFormats={["homegrade-format/tooltip"]}
					tagName={headingLevel}
					{...useBlockProps({
						className: `homegrade-blocks-custom-heading`,
					})}
				/>
			</KeyboardShortcuts>
		</>
	);
}