import { __ } from "@wordpress/i18n";
import {
	InnerBlocks,
	useBlockProps,
	InspectorControls,
	MediaReplaceFlow,
	MediaPlaceholder,
} from "@wordpress/block-editor";
import { lock, trash } from "@wordpress/icons";

import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	Button,
} from "@wordpress/components";

import "./editor.scss";
export default function Edit({ attributes, setAttributes, ...props }) {
	const { disposition, coverUrl, coverAlt, coverId, coverSize } = attributes;
	function onDispositionChange(disposition) {
		setAttributes({ disposition });
	}
	function onCoverSizeChange(coverSize) {
		setAttributes({ coverSize });
	}

	function setCoverAttributes(cover) {
		setAttributes({
			coverId: cover.id,
			coverAlt: cover.alt,
			coverUrl: cover.url,
		});
	}
	function removeCoverAttributes() {
		setAttributes({
			coverId: null,
			coverAlt: null,
			coverUrl: null,
		});
	}
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Image d'accompagnement", "deligraph-blocks")}
				>
					{coverUrl && <img src={coverUrl} alt={coverAlt} />}
					<div className="media-replace-container">
						<MediaReplaceFlow
							mediaId={coverId}
							mediaUrl={coverUrl}
							allowedTypes={["image"]}
							accept="image/*"
							onSelect={setCoverAttributes}
							name={
								!coverUrl
									? __("Ajouter votre image manuellement", "homegrade-blocks")
									: __("Remplacer", "homegrade-blocks")
							}
						/>
						{coverUrl && (
							<>
								<Button
									className="custom-flow-button"
									variant="primary"
									icon={trash}
									label="Supprimer"
									onClick={removeCoverAttributes}
								/>
							</>
						)}
					</div>

					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Disposition"
						onChange={onDispositionChange}
						value={disposition}
					>
						<ToggleGroupControlOption label="Gauche" value="left" />
						<ToggleGroupControlOption label="Droite" value="right" />
					</ToggleGroupControl>
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Taille de l'image"
						onChange={onCoverSizeChange}
						value={coverSize}
					>
						<ToggleGroupControlOption label="Big" value="large" />
						<ToggleGroupControlOption label="Grande" value="grande" />
						<ToggleGroupControlOption label="Moyenne" value="medium" />
						<ToggleGroupControlOption label="Petite" value="small" />
					</ToggleGroupControl>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}`,
				})}
			>
				<div className="chapter-section__content">
					<div className="chapter-section__innerblocks">
						<InnerBlocks
							template={[
								[
									"core/heading",
									{
										className: "chapter-section__title",
										placeholder: "Chapter Title",
										content: "Un titre précis ",
									},
								],
								[
									"core/paragraph",
									{
										className: "chapter-section__title",
										placeholder: "Chapter Title",
										content:
											"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. ",
									},
								],
							]}
							allowedBlocks={[
								"core/heading",
								"core/paragraph",
								"core/list",
								"core/button",
								"core/buttons",
							]}
						/>
					</div>
				</div>
				{coverUrl && (
					<img
						className={`chapter-section__cover chapter-section__cover--${coverSize}`}
						src={coverUrl}
						alt={coverAlt}
					/>
				)}
				{!coverUrl && (
					<MediaPlaceholder
						accept="image/*"
						allowedTypes={["image"]}
						onSelect={setCoverAttributes}
						multiple={false}
						handleUpload={true}
					/>
				)}
			</section>
		</>
	);
}
