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";
import {
	Button,
	ToolbarButton,
	PanelBody,
	ToggleControl,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
export default function Edit({ attributes, setAttributes, ...props }) {
	let { imageId, imageAlt, imageUrl, imageProportion, contentDisposition } =
		attributes;

	function changeContentDisposition(newContentDisposition) {
		console.log(newContentDisposition);
		setAttributes({ contentDisposition: newContentDisposition });
	}

	console.log(typeof contentDisposition);
	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__("Disposition", "homegrade")}
					className="homegrade-panel-body"
				>
					<ToggleGroupControl
						className="homegrade-blocks-highlight__variant"
						isBlock
						onChange={changeContentDisposition}
						value={contentDisposition}
					>
						<ToggleGroupControlOption label="Gauche" value="left" />
						<ToggleGroupControlOption label="Droite" value="right" />
					</ToggleGroupControl>
				</PanelBody>
				<ImagePanelBody
					imageUrl={imageUrl}
					imageId={imageId}
					imageAlt={imageAlt}
					imageProportion={imageProportion}
					setAttributes={setAttributes}
				/>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-text-image`,
				})}
			>
				{contentDisposition === "left" && (
					<>
						<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
							<InnerBlocks
								template={[
									[
										"homegrade-content-blocks/content-heading",
										{
											placeholder: "Demain, et demain, et demain!",
										},
									],
									[
										"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",
									"core/list",
									"core/button",
									"core/buttons",
									"homegrade-content-blocks/content-heading",
								]}
							/>
							{}
						</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>
					</>
				)}
				{contentDisposition === "right" && (
					<>
						<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 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",
									"homegrade-content-blocks/content-heading",
								]}
							/>
							{}
						</div>
					</>
				)}
			</div>
		</>
	);
}