import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { BlockControls } from "@wordpress/block-editor";
import { useBlockProps, RichText } 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 { sectionTitle, sectionSubtitle, textAlign } = attributes;

	function onChangeSectionTitle(sectionTitle) {
		setAttributes({ sectionTitle });
	}
	function onChangeSectionSubtitle(sectionSubtitle) {
		setAttributes({ sectionSubtitle });
	}

	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}`,
				})}
			>
				<RichText
					value={sectionTitle}
					tagName="h3"
					className="section_titling__title"
					placeholder={__(
						"Ajouter ici le Titre de Section",
						"homegrade-blocks"
					)}
					onChange={onChangeSectionTitle}
				/>
				<RichText
					value={sectionSubtitle}
					tagName="p"
					className="section_titling__subtitle"
					placeholder={__("Ajouter ici le Sous-titre", "homegrade-blocks")}
					onChange={onChangeSectionSubtitle}
				/>
			</div>
		</>
	);
}