import { __ } from "@wordpress/i18n";
import "./editor.scss";

import {
	useBlockProps,
	InnerBlocks,
	BlockControls,
} from "@wordpress/block-editor";
import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
import {
	more,
	positionLeft,
	positionCenter,
	positionRight,
} from "@wordpress/icons";

export default function Edit({ attributes, setAttributes, ...props }) {
	const { contentAlign } = attributes;
	function onChangeContentAlignment(contentAlign) {
		setAttributes({ contentAlign });
	}
	return (
		<>
			<BlockControls>
				<Toolbar label="Options">
					<ToolbarDropdownMenu
						icon={
							contentAlign === "left"
								? positionLeft
								: contentAlign === "center"
								? positionCenter
								: positionRight
						}
						label="Alignement du titrage"
						controls={[
							{
								title: "Gauche",
								icon: positionLeft,
								onClick: () => onChangeContentAlignment("left"),
							},
							{
								title: "Centré",
								icon: positionCenter,
								onClick: () => onChangeContentAlignment("center"),
							},
							{
								title: "Droite",
								icon: positionRight,
								onClick: () => onChangeContentAlignment("right"),
							},
						]}
					/>
				</Toolbar>
			</BlockControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`,
				})}
			>
				<InnerBlocks
					allowedBlocks={[
						"core/paragraph",
						"homegrade-content-blocks/content-heading",
						"homegrade-content-blocks/figure",
						"core/image",
						"core/button",
						"core/buttons",
					]}
				/>
			</div>
		</>
	);
}