import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	InnerBlocks,
	InspectorControls,
} from "@wordpress/block-editor";
import { PanelBody, TextControl, TextareaControl } from "@wordpress/components";
import "./editor.scss";

export default function Edit({ attributes, setAttributes }) {
	const { interviewedPersonName, interviewName } = attributes;
	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__("Informations de l'interview", "interview")}
					initialOpen={true}
				>
					<TextControl
						label={__("Nom de la personne interviewée", "interview")}
						placeholder={__("Nom de la personne interviewée", "interview")}
						value={interviewedPersonName}
						onChange={(value) =>
							setAttributes({ interviewedPersonName: value })
						}
					/>
					<TextareaControl
						label={__("Nom de l'interview", "interview")}
						placeholder={__("Nom de l'interview", "interview")}
						value={interviewName}
						onChange={(value) => setAttributes({ interviewName: value })}
					/>
				</PanelBody>
			</InspectorControls>
			<section {...useBlockProps()}>
				<InnerBlocks
					allowedBlocks={[
						"dynamiques-blocks/interview-question",
						"dynamiques-blocks/interview-answer",
					]}
					template={[
						[
							"dynamiques-blocks/interview-question",
							{
								placeholder: "Question",
								content:
									"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum lacus nisl, non varius enim mattis tincidunt. Morbi malesuada sodales sapien, at varius est pharetra at. Nullam eu interdum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
							},
						],
						[
							"dynamiques-blocks/interview-answer",
							{
								placeholder: "Réponse",
								content:
									"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum lacus nisl, non varius enim mattis tincidunt. Morbi malesuada sodales sapien, at varius est pharetra at. Nullam eu interdum quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
							},
						],
					]}
				/>

				<p className="infos-interview">
					<span className="infos-interview__label">interview</span>
					{interviewName}
				</p>
			</section>
		</>
	);
}
