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

import {
	InnerBlocks,
	useBlockProps,
	MediaReplaceFlow,
	InspectorControls,
	__experimentalLinkControl as LinkControl,
	MediaPlaceholder,
} from "@wordpress/block-editor";

import {
	PanelBody,
	TextControl,
	Button,
	ToggleControl,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from "@wordpress/components";
import { lock, trash } from "@wordpress/icons";

export default function Edit({ setAttributes, attributes }) {
	const { coverId, coverAlt, coverUrl, iconId, iconAlt, iconUrl } = attributes;
	function setCoverAttributes(cover) {
		setAttributes({
			coverId: cover.id,
			coverAlt: cover.alt,
			coverUrl: cover.url,
		});
	}
	function removeCoverAttributes() {
		setAttributes({
			coverId: null,
			coverAlt: null,
			coverUrl: null,
		});
	}
	function setIconAttributes(icon) {
		setAttributes({
			iconId: icon.id,
			iconAlt: icon.alt,
			iconUrl: icon.url,
		});
	}
	function removeIconAttributes() {
		setAttributes({
			iconId: null,
			iconAlt: null,
			iconUrl: null,
		});
	}
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="homegrade-blocks-components-image__panel-body"
					title={__("Couverture du chapitre", "homegrade-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>
				</PanelBody>
				<PanelBody
					className="homegrade-blocks-components-image__panel-body"
					title={__("Icone du chapitre", "homegrade-blocks")}
				>
					{iconUrl && <img src={iconUrl} alt={iconAlt} />}
					<div className="media-replace-container">
						<MediaReplaceFlow
							mediaId={iconId}
							mediaUrl={iconUrl}
							allowedTypes={["image"]}
							accept="image/*"
							onSelect={setIconAttributes}
							name={
								!iconUrl
									? __("Ajouter votre icone manuellement", "homegrade-blocks")
									: __("Remplacer", "homegrade-blocks")
							}
						/>
						{iconUrl && (
							<>
								<Button
									className="custom-flow-button"
									variant="primary"
									icon={trash}
									label="Supprimer"
									onClick={removeIconAttributes}
								/>
							</>
						)}
					</div>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-parcours-chapter parcours-chapter`,
				})}
			>
				<div className="parcours-chapter__cover">
					{coverUrl && <img src={coverUrl} alt={coverAlt} />}
					{!coverUrl && (
						<MediaPlaceholder
							accept="image/*"
							allowedTypes={["image"]}
							onSelect={setCoverAttributes}
							multiple={false}
							handleUpload={true}
						/>
					)}
				</div>
				<div className="parcours-chapter__icon">
					{iconUrl && <img src={iconUrl} alt={iconAlt} />}
					{!iconUrl && (
						<MediaPlaceholder
							accept="image/*"
							allowedTypes={["image"]}
							onSelect={setIconAttributes}
							multiple={false}
							handleUpload={true}
						/>
					)}
				</div>
				<div className="parcours-chapter__content">
					<InnerBlocks
						template={[
							["homegrade-content-blocks/section-titling", { lock: true }],
							[
								"core/heading",
								{ placeholder: "Ajouter ici le texte", lock: true },
							],
							[
								"core/paragraph",
								{ placeholder: "Ajouter ici le texte", lock: true },
							],
							["homegrade-content-blocks/parcours-step"],
						]}
						allowedBlocks={[
							"core/heading",
							"core/paragraph",
							"homegrade-content-blocks/section-titling",
							"homegrade-content-blocks/parcours-step",
						]}
					/>
				</div>
			</div>
		</>
	);
}