import { __ } from "@wordpress/i18n";
import "./editor.scss";
import "./nested-children";

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

import { Tip, 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>
					<Tip>salut</Tip>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `starter-nested-parent`,
				})}
			>
				<RichText
					value={blockTitle}
					tagName="h3"
					className="starter-nested-parent__title"
					placeholder={__("Ajouter ici le Titre", "homegrade")}
					onChange={onChangeBlockTitle}
				/>
				<RichText
					value={blockSubtitle}
					tagName="h4"
					className="starter-nested-parent__subtitle"
					placeholder={__("Ajouter ici le Sous-titre", "homegrade")}
					onChange={onChangeBlockSubtitle}
				/>

				<div className="starter-nested-parent__children-container">
					<InnerBlocks
						allowedBlocks={[
							"core/paragraph",
							"homegrade-content-blocks/starter-nested-child",
						]}
					/>
				</div>
			</section>
		</>
	);
}