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, showTableOfContents = true } = attributes;

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

	function onShowTableOfContentsChange(value) {
		setAttributes({ showTableOfContents: !showTableOfContents });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Paramètres", "dernieres-dynamiques")}>
					<CheckboxControl
						label="Afficher la table des matières"
						checked={showTableOfContents}
						onChange={onShowTableOfContentsChange}
					/>

					{showTableOfContents && (
						<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>
		</>
	);
}