import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import "./editor.scss";
import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	Button,
	CheckboxControl,
	ColorPalette,
} from "@wordpress/components";
import { InspectorControls } from "@wordpress/block-editor";

export default function Edit({ attributes, setAttributes, ...props }) {
	const { hierarchy } = attributes;

	function onHierarchyChange(value) {
		setAttributes({ hierarchy: value });
	}
	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Aspect", "carhop-blocks")}>
					<ToggleGroupControl
						label="Hiérarchie"
						value={hierarchy}
						onChange={onHierarchyChange}
						isBlock
						__nextHasNoMarginBottom
						__next40pxDefaultSize
					>
						<ToggleGroupControlOption value="classic" label="Classique" />
						<ToggleGroupControlOption value="inverted" label="Inversé" />
					</ToggleGroupControl>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `carhop-heading carhop-heading--hierarchy-${hierarchy}`,
				})}
			>
				<div className="carhop-heading__innerblocks">
					<InnerBlocks
						template={[
							[
								"core/heading",
								{ placeholder: "Saisir le titre", content: "Titre" },
							],
							[
								"core/paragraph",
								{
									placeholder: "Saisir le sous-titre supérieur",
									content: "Sous-titre",
								},
							],
						]}
						allowedBlocks={[
							"core/heading",
							"core/paragraph",
							"core/post-title",
						]}
					/>
				</div>
			</div>
		</>
	);
}