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

import {
	useBlockProps,
	RichText,
	InnerBlocks,
	BlockControls,
} from "@wordpress/block-editor";
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
import { trash } from "@wordpress/icons";
export default function Edit({ attributes, setAttributes, ...props }) {
	let { chapterTitle, chapterDescription } = attributes;

	function onChangeChapterTitle(chapterTitle) {
		setAttributes({ chapterTitle });
	}
	function onChangeChapterDescription(chapterDescription) {
		setAttributes({ chapterDescription });
	}

	let { chapterImageUrl, chapterImageId, chapterImageAlt } = attributes;

	function setImageAttributes(media) {
		if (!media || !media.url) {
			setAttributes({
				chapterImageUrl: null,
				chapterImageId: null,
				chapterImageAlt: null,
			});
			return;
		}
		setAttributes({
			chapterImageUrl: media.url,
			chapterImageId: media.id,
			chapterImageAlt: media?.alt,
		});
	}

	function removeImageAttributes() {
		setAttributes({
			chapterImageUrl: null,
			chapterImageId: null,
			chapterImageAlt: null,
		});
	}

	return (
		<>
			<BlockControls>
				<ToolbarGroup>
					<MediaReplaceFlow
						mediaId={chapterImageId}
						mediaUrl={chapterImageUrl}
						allowedTypes={["image"]}
						accept="image/*"
						onSelect={setImageAttributes}
						name={
							!chapterImageUrl ? __("Ajouter une Image") : __("Remplacer Image")
						}
					/>
					<ToolbarButton
						title={"Supprimer Image"}
						icon={trash}
						isActive={chapterImageUrl}
						onClick={removeImageAttributes}
					/>
				</ToolbarGroup>
			</BlockControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-chapitre-thematique`,
				})}
			>
				<div className="homegrade-blocks-chapitre-thematique__cover">
					{!chapterImageUrl && (
						<MediaPlaceholder
							accept="image/*"
							allowedTypes={["image"]}
							onSelect={setImageAttributes}
							multiple={false}
							handleUpload={true}
						/>
					)}

					{chapterImageUrl && (
						<img src={chapterImageUrl} alt={chapterImageAlt} />
					)}
				</div>
				<div className="homegrade-blocks-chapitre-thematique__content">
					<RichText
						tagName="h3"
						className="homegrade-blocks-chapitre-thematique__title"
						placeholder={__("Titre du chapitre", "homegrade-blocks")}
						value={chapterTitle}
						onChange={onChangeChapterTitle}
					/>
					<RichText
						tagName="p"
						className="homegrade-blocks-chapitre-thematique__description"
						placeholder={__("Descriptif du chapitre", "homegrade-blocks")}
						value={chapterDescription}
						onChange={onChangeChapterDescription}
					/>
					<InnerBlocks
						allowedBlocks={["homegrade-content-blocks/lien-chapitre"]}
					/>
				</div>
			</div>
		</>
	);
}