import { __ } from "@wordpress/i18n";
import { InspectorControls, useBlockProps } from "@wordpress/block-editor";
import {
	PanelBody,
	CheckboxControl,
	ToggleControl,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import "./editor.scss";
import ServerSideRender from "@wordpress/server-side-render";

export default function Edit({ attributes, setAttributes }) {
	const { displayType } = attributes;

	function onDisplayTypeChange(value) {
		setAttributes({ displayType: value });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Paramètres", "dernieres-dynamiques")}>
					<ToggleGroupControl
						className="homegrade-blocks-highlight__variant"
						isBlock
						label="Type d'affichage des posts"
						onChange={onDisplayTypeChange}
						value={displayType}
					>
						<ToggleGroupControlOption label="Slider" value="slider" />
						<ToggleGroupControlOption label="Grille" value="grid" />
					</ToggleGroupControl>
				</PanelBody>
			</InspectorControls>
			<div {...useBlockProps({ className: "alignfull" })}>
				<ServerSideRender
					block="dynamiques-blocks/dernieres-dynamiques"
					attributes={attributes}
				/>
			</div>
		</>
	);
}