import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import "./editor.scss";
import { PanelBody, CheckboxControl } from "@wordpress/components";
import { InspectorControls } from "@wordpress/block-editor";

export default function Edit({ attributes, setAttributes }) {
	const { hasNumbering } = attributes;
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Numérotation", "deligraph-blocks")}
				>
					<CheckboxControl
						label="Afficher la numérotation"
						checked={hasNumbering}
						onChange={(value) => setAttributes({ hasNumbering: value })}
					/>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `scroll-story-block ${
						hasNumbering ? "scroll-story-block--has-numbering" : ""
					}`,
				})}
			>
				<InnerBlocks
					allowedBlocks={["carhop-blocks/narrative-card"]}
					template={[
						[
							"carhop-blocks/narrative-card",
							{
								hasCover: true,
								coverPosition: "left",
								innerBlocks: [
									["core/heading", { content: "Lorem ipsum" }],
									[
										"core/paragraph",
										{
											content:
												"Lorem ipsum dolor sit amet consectetur adipisicing elit.",
										},
									],
								],
							},
						],
						[
							"carhop-blocks/narrative-card",
							{
								hasCover: true,
								coverPosition: "right",
								innerBlocks: [
									["core/heading", { content: "Lorem ipsum" }],
									[
										"core/paragraph",
										{
											content:
												"Lorem ipsum dolor sit amet consectetur adipisicing elit.",
										},
									],
								],
							},
						],
					]}
				/>
			</div>
		</>
	);
}
