import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { BlockControls } from "@wordpress/block-editor";
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
import { positionLeft, positionCenter, positionRight } from "@wordpress/icons";

export default function Edit({ attributes, setAttributes, clientId }) {
	let { textAlign } = attributes;

	function onChangeTextAlignment(textAlign) {
		setAttributes({ textAlign });
	}

	return (
		<>
			<BlockControls>
				<Toolbar label="Options">
					<ToolbarDropdownMenu
						icon={
							textAlign === "left"
								? positionLeft
								: textAlign === "center"
								? positionCenter
								: positionRight
						}
						label="Alignement du titrage"
						controls={[
							{
								title: "Gauche",
								icon: positionLeft,
								onClick: () => onChangeTextAlignment("left"),
							},
							{
								title: "Centré",
								icon: positionCenter,
								onClick: () => onChangeTextAlignment("center"),
							},
							{
								title: "Droite",
								icon: positionRight,
								onClick: () => onChangeTextAlignment("right"),
							},
						]}
					/>
				</Toolbar>
			</BlockControls>
			<div
				{...useBlockProps({
					className: `section_titling section_titling--${textAlign}`,
				})}
			>
				<InnerBlocks
					allowedBlocks={[
						"core/heading",
						"homegrade-content-blocks/content-heading",
						"core/paragraph",
					]}
					templateLock="insert"
					template={[
						[
							"core/heading",
							{
								placeholder: "Titre de section",
								level: 3,
								className: "section_titling__title",
							},
						],
						[
							"core/paragraph",
							{
								placeholder: "Tapez votre sous-titre...",
								className: "section_titling__subtitle",
							},
						],
					]}
				/>
			</div>
		</>
	);
}
