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

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

import { trash } from "@wordpress/icons";

import { MediaReplaceFlow } from "@wordpress/block-editor";

export default function Edit({ attributes, setAttributes, ...props }) {
	let { hasIllustration, illustrationId, illustrationUrl, illustrationAlt } =
		attributes;
	function onHasIllustrationChange() {
		setAttributes({ hasIllustration: !hasIllustration });
		if (!hasIllustration) {
			removeIllustrationAttributes();
		}
	}

	function setIllustrationAttributes(media) {
		setAttributes({
			illustrationUrl: media.url,
			illustrationId: media.id,
			illustrationAlt: media?.alt,
		});
	}
	function removeIllustrationAttributes() {
		setAttributes({
			illustrationUrl: null,
			illustrationId: null,
			illustrationAlt: null,
		});
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					title="Illustration"
					className="homegrade-blocks-box-monoblock__panel-body"
				>
					<ToggleControl
						help={
							hasIllustration
								? "Afficher une illustration"
								: "Pas d'illustration"
						}
						label="Illustration supérieure"
						checked={hasIllustration}
						onChange={onHasIllustrationChange}
					/>
					{illustrationUrl && (
						<img src={illustrationUrl} alt={illustrationAlt} />
					)}
					{hasIllustration && (
						<div className="media-replace-container ">
							<MediaReplaceFlow
								mediaId={illustrationId}
								mediaUrl={illustrationUrl}
								allowedTypes={["image"]}
								accept="image/*"
								onSelect={setIllustrationAttributes}
								name={
									!illustrationUrl
										? __("Ajouter", "homegrade-blocks")
										: __("Remplacer", "homegrade-blocks")
								}
							/>
							{illustrationUrl && (
								<>
									<Button
										className="custom-flow-button"
										variant="primary"
										icon={trash}
										label="Supprimer"
										onClick={removeIllustrationAttributes}
									/>
								</>
							)}
						</div>
					)}
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${
						hasIllustration
							? "homegrade-blocks-box-monoblock--has-illustration "
							: ""
					}`,
				})}
			>
				{hasIllustration && (
					<img
						className=" homegrade-blocks-box-monoblock__superior-illustration"
						src={illustrationUrl}
						alt={illustrationAlt}
					/>
				)}
				<InnerBlocks
					allowedBlocks={[
						"core/paragraph",
						"core/list",
						"core/button",
						"core/buttons",
						"gravityforms/form",
						"homegrade-content-blocks/section-titling",
						"homegrade-content-blocks/highlight",
					]}
				/>
			</div>
		</>
	);
}