import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import "./editor.scss";
import {
	PanelBody,
	Card,
	CardBody,
	CardHeader,
	TextControl,
	Button,
	__experimentalNumberControl as NumberControl,
} from "@wordpress/components";
import { InspectorControls } from "@wordpress/block-editor";

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

	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Étape de timeline", "carhop-blocks")}>
					<NumberControl
						label={__("Année", "carhop-blocks")}
						value={year}
						onChange={(value) => {
							const n = parseInt(value, 10);
							setAttributes({ year: Number.isFinite(n) ? n : undefined });
						}}
					/>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `highlight-timeline-step`,
					id: `year-${year}`,
				})}
			>
				<div className="highlight-timeline-step__year">
					<p className="highlight-timeline-step__year-text">{year}</p>
				</div>
				<div className="highlight-timeline-step__innerblocks">
					<InnerBlocks
						allowedBlocks={[
							"core/heading",
							"core/paragraph",
							"core/group",
							"core/list",
							"core/button",
							"core/image",
							"core/buttons",
							"core/columns",
							"core/post-title",
							"core/embed",
							"core/quote",
							"core/pullquote",
							"core/media-text",
							"core/table",
							"carhop-blocks/image-stack",
							"carhop-blocks/heading",
							"carhop-blocks/decorative-shapes",
							"carhop-blocks/scroll-highlight-block",
							"carhop-blocks/cta-group",
							"carhop-blocks/audio-player",
							"carhop-blocks/localisation-map",
							"carhop-blocks/notice-panel",
							"acf/statistics-datas",
							"ninja-forms/form",
							"gravityforms/form",
							"dynamiques-blocks/sitemap",
							"mailpoet/subscription-form-block",
							"shortcode",
						]}
					/>
				</div>
			</div>
		</>
	);
}