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

import {
	useBlockProps,
	InnerBlocks,
	InspectorControls,
} from "@wordpress/block-editor";

import { PanelBody, ColorPalette } from "@wordpress/components";

export default function Edit({ attributes, setAttributes, clientId }) {
	const { bgColor } = attributes;
	function onBgColorChange(bgColor) {
		setAttributes({ bgColor });
	}
	const currentColorName = bgColor === "#F5F5F5" ? "gray" : "white";
	return (
		<>
			<InspectorControls>
				<PanelBody title="Couleur de fond">
					<ColorPalette
						value={bgColor}
						disableCustomColors
						colors={[
							{
								color: "#fff",
								name: "Blanc",
							},
							{
								color: "#F5F5F5",
								name: "Gris",
							},
						]}
						onChange={onBgColorChange}
					/>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `homegrade-content-blocks-content-box homegrade-content-blocks-content-box--${currentColorName}`,
				})}
				style={{
					backgroundColor: bgColor,
				}}
			>
				<InnerBlocks
					allowedBlocks={[
						"homegrade-content-blocks/section-titling",
						"homegrade-content-blocks/box-monoblock",
					]}
					template={[
						[
							"homegrade-content-blocks/section-titling",
							{
								sectionTitle: "Titre de Votre section",
								sectionSubtitle: "Sous-titre de Votre section",
							},
						],
						["homegrade-content-blocks/box-monoblock"],
					]}
				/>
			</section>
		</>
	);
}
