import { __ } from "@wordpress/i18n";
import "./editor.scss";
// import "./staff-member";

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

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

	function onChangeBlockTitle(blockTitle) {
		setAttributes({ blockTitle });
	}
	function onChangeBlockSubtitle(blockSubtitle) {
		setAttributes({ blockSubtitle });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__("Variantes de Timeline", "homegrade-blocks")}
					className={"homegrade-blocks-timeline__panel-body"}
				></PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-staff-list`,
				})}
			>
				<div className="section_titling section_titling--left">
					<RichText
						value={blockTitle}
						tagName="h3"
						className="section_titling__title"
						placeholder={__(
							"Ajouter ici le Titre de la liste de membres",
							"homegrade"
						)}
						onChange={onChangeBlockTitle}
					/>
					<RichText
						value={blockSubtitle}
						tagName="h4"
						className="section_titling__subtitle"
						placeholder={__(
							"Ajouter ici le Sous-titre de la liste de membres",
							"homegrade"
						)}
						onChange={onChangeBlockSubtitle}
					/>
				</div>

				<ul className="homegrade-blocks-staff-list__staff-list">
					<InnerBlocks
						allowedBlocks={["homegrade-content-blocks/staff-member"]}
					/>
				</ul>
			</section>
		</>
	);
}
