import { __ } from "@wordpress/i18n";
import "./editor.scss";
import ImageMediaPlaceholder from "../../_components/ImageMediaPlaceholder";
import Image from "../../_components/Image";
import ImagePanelBody from "../../_components/ImagePanelBody";

import {
	InspectorControls,
	useBlockProps,
	InnerBlocks,
	MediaPlaceholder,
} from "@wordpress/block-editor";
export default function Edit({ attributes, setAttributes, ...props }) {
	let { imageId, imageAlt, imageUrl, imageProportion } = attributes;

	return (
		<>
			<InspectorControls>
				<ImagePanelBody
					imageUrl={imageUrl}
					imageId={imageId}
					imageAlt={imageAlt}
					imageProportion={imageProportion}
					setAttributes={setAttributes}
				/>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-text-image`,
				})}
			>
				<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
					<InnerBlocks
						template={[
							[
								"core/paragraph",
								{
									placeholder:
										"Demain, et demain, et demain! C'est ainsi que, à petits pas, nous nous glissons de jour en jour jusqu'à la dernière syllabe du temps inscrit sur le livre de notre destinée.",
								},
							],
						]}
						allowedBlocks={["core/paragraph"]}
					/>
					{}
				</div>

				<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
					<ImageMediaPlaceholder
						imageAlt={imageAlt}
						imageId={imageId}
						imageUrl={imageUrl}
						setAttributes={setAttributes}
						imageProportion={imageProportion}
					/>
					<Image
						imageAlt={imageAlt}
						imageUrl={imageUrl}
						imageProportion={imageProportion}
					/>
				</div>
			</div>
		</>
	);
}