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,
			imageCaption: image.caption,
			imageDescription: image.description,
		});
	}

	function removeImageAttributes() {
		setAttributes({
			imageId: null,
			imageAlt: null,
			imageUrl: null,
			imageCaption: null,
			imageDescription: null,
		});
	}
	function onImageProportionChange(imageProportion) {
		setAttributes({ imageProportion });
	}
	return (
		<>
			<PanelBody
				className='homegrade-blocks-components-image__panel-body'
				title={__("Image", "homegrade-blocks")}>
				{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")
								: __("Remplacer", "homegrade-blocks")
						}
					/>
					{imageUrl && (
						<>
							<Button
								className='custom-flow-button'
								variant='primary'
								icon={trash}
								label='Supprimer'
								onClick={removeImageAttributes}
							/>
						</>
					)}
				</div>
				<Tip>
					Si besoin, Utilisez le champ "Légende"de la médiathèque pour afficher un
					copyright
				</Tip>
				<Tip>
					Si besoin, Utilisez le champ "Description" de la médiathèque pour donner
					afficher une description de votre image
				</Tip>
				{imageUrl && (
					<ToggleGroupControl
						label='Proportion'
						className='homegrade-blocks-components-image__ratio-selector'
						isBlock
						onChange={onImageProportionChange}
						value={imageProportion}>
						<ToggleGroupControlOption
							variant='primary'
							label='Original'
							value='original'
						/>
						<ToggleGroupControlOption
							variant='primary'
							label='Moyen'
							value='medium'
						/>
						<ToggleGroupControlOption
							variant='primary'
							label='Carré'
							value='square'
						/>
					</ToggleGroupControl>
				)}
			</PanelBody>
		</>
	);
}