import { __ } from "@wordpress/i18n";
import {
	PanelBody,
	Button,
	Tip,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
import { trash } from "@wordpress/icons";

export default function ImagePanelBody({ imageUrl, imageAlt, imageId, imageProportion, setAttributes }) {
	function setImageAttributes(image) {
		setAttributes({
			imageId: image.id,
			imageAlt: image.alt,
			imageUrl: image.url,
		});
	}

	function removeImageAttributes() {
		setAttributes({
			imageId: null,
			imageAlt: null,
			imageUrl: null,
		});
	}

	return (
		<>
			{imageUrl && <img src={imageUrl} alt={imageAlt} />}
			<div className='media-replace-container'>
				<MediaReplaceFlow
					mediaId={imageId}
					mediaUrl={imageUrl}
					allowedTypes={["image"]}
					accept='image/*'
					onSelect={setImageAttributes}
					name={
						!imageUrl
							? __("Ajouter", "homegrade-blocks__texte-backoffice")
							: __("Remplacer", "homegrade-blocks__texte-backoffice")
					}
				/>
				{imageUrl && (
					<>
						<Button
							className='custom-flow-button'
							variant='primary'
							icon={trash}
							label='Supprimer'
							onClick={removeImageAttributes}
						/>
					</>
				)}
			</div>
		</>
	);
}