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

import {
	useBlockProps,
	RichText,
	InnerBlocks,
	InspectorControls,
} from "@wordpress/block-editor";
import { Tip, PanelBody, RangeControl } from "@wordpress/components";

export default function Edit({ attributes, setAttributes, clientId }) {
	let { columnCount } = attributes;

	function onChangeColumnCount(columnCount) {
		setAttributes({ columnCount });
	}

	const TEMPLATE = [
		[
			"homegrade-content-blocks/column-card",
			{},
			[
				[
					"homegrade-content-blocks/figure",
					{ figure: "1200", title: "salut", caption: "ouais faut décrire" },
				],
			],
		],
		[
			"homegrade-content-blocks/column-card",
			{},
			[
				[
					"homegrade-content-blocks/figure",
					{ figure: "1200", title: "salut", caption: "ouais faut décrire" },
				],
			],
		],
		[
			"homegrade-content-blocks/column-card",
			{},
			[
				[
					"homegrade-content-blocks/figure",
					{ figure: "1200", title: "salut", caption: "ouais faut décrire" },
				],
			],
		],
	];

	return (
		<>
			<InspectorControls>
				<PanelBody>
					<Tip>salut</Tip>
					<RangeControl
						label="Number of columns"
						value={columnCount}
						onChange={onChangeColumnCount}
						min={2}
						max={4}
					/>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-column-cards  homegrade-blocks-column-cards--has-${columnCount}-columns`,
				})}
			>
				<InnerBlocks
					template={TEMPLATE}
					allowedBlocks={[
						"core/paragraph",
						"homegrade-content-blocks/column-card",
					]}
				/>
			</section>
		</>
	);
}