import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks, BlockControls, MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
import "./editor.scss";
import { ToolbarButton } from "@wordpress/components";



export default function Edit({ attributes, setAttributes }) {
	const { imageId, imageUrl } = attributes;
	const onImageSelect = (media) => {
		setAttributes({ imageId: media.id, imageUrl: media.url });
	};
	const onRemoveImage = () => {
		setAttributes({ imageId: 0, imageUrl: "" });
	};
	return (
		<>
		<BlockControls>
			<MediaReplaceFlow
				mediaId={imageId}
				mediaUrl={imageUrl}
				allowedTypes={["image"]}
				accept="image/*"
				onSelect={onImageSelect}
				name={imageUrl ? "Remplacer" : "Ajouter"}
			/>
			<ToolbarButton onClick={onRemoveImage}>
			{__("Retirer", "carhop-blocks")}
			</ToolbarButton>
		</BlockControls>

		<section {...useBlockProps({
			className: "our-collections",
		})}>

			{imageUrl ? (
				<img src={imageUrl} className="our-collections__selected-image" alt="" />
			) : (
				<MediaPlaceholder
					onSelect={onImageSelect}
					allowedTypes={["image"]}
					accept="image/*"
					multiple={false}
					labels={{ title: __("Sélectionner une image", "carhop-blocks") }}
				/>
			)}

		<div className="our-collections__innerblocks">
				<InnerBlocks
					allowedBlocks={[
						"core/heading",
						"core/paragraph",
						"carhop-blocks/heading",
					]}
				/>
			</div>
			{imageUrl && <img src={imageUrl} alt="" />}

			<div className="redirection-grid">	
				<a className="redirection-grid__item" href="/Archives">Archives</a>
				<a className="redirection-grid__item" href="/Archives">Documentation</a>
				<a className="redirection-grid__item" href="/Archives">Images fixes</a>
				<a className="redirection-grid__item" href="/Archives">Audio</a>
				<a className="redirection-grid__item" href="/Archives">Images animées</a>
				<a className="redirection-grid__item" href="/Archives">Objets</a>
			</div>
			<a href="/collections" className="see-all">Voir toutes nos collections</a>
			<div className="background-shape"></div>
		</section>
		</>
	);
}
