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

import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	RangeControl,
	CheckboxControl,
} from "@wordpress/components";

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

	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Nombre de colonnes", "carhop-blocks")}>
					<RangeControl
						__next40pxDefaultSize
						__nextHasNoMarginBottom
						initialPosition={3}
						label="Nombre de colonnes"
						max={4}
						min={2}
						onChange={(value) => setAttributes({ columns: value })}
					/>
				</PanelBody>
				<PanelBody title={__("Bordure des cartes", "carhop-blocks")}>
					<CheckboxControl
						label="Avec bordure"
						checked={cardsWithBorder}
						onChange={(value) => setAttributes({ cardsWithBorder: value })}
					/>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `card-grid card-grid--columns-${columns} card-grid--cards-${
						cardsWithBorder ? "with-border" : "without-border"
					}`,
				})}
			>
				<div className="card-grid__innerblocks">
					<InnerBlocks
						template={[
							[
								"carhop-blocks/content-card",
								{ placeholder: "Ajouter ici le texte" },
							],
						]}
						allowedBlocks={["carhop-blocks/content-card"]}
					/>
				</div>
			</section>
		</>
	);
}
