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

import {
	useBlockProps,
	RichText,
	InnerBlocks,
	BlockControls,
	InspectorControls,
} from "@wordpress/block-editor";
import {
	PanelBody,
	ToolbarGroup,
	ToolbarButton,
	Button,
	Tip,
} from "@wordpress/components";
import { useEffect } from "@wordpress/element";
import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
import { trash } from "@wordpress/icons";
export default function Edit({ attributes, setAttributes, ...props }) {
	let {
		timelineStepTitle,
		timelineStepSubtitle,
		timelineStepImageUrl,
		timelineStepImageId,
		timelineStepImageAlt,
		timelineStepImageCaption,
		timelineStepImageDescription,
		timelineStepIconUrl,
		timelineStepIconId,
		timelineStepIconAlt,
		hasStepPicture,
		hasStepIcon,
	} = attributes;

	function onChangeTimelineStepTitle(timelineStepTitle) {
		setAttributes({ timelineStepTitle });
	}
	function onChangeTimelineDescription(timelineStepSubtitle) {
		setAttributes({ timelineStepSubtitle });
	}
	function setImageAttributes(media) {
		if (!media || !media.url) {
			setAttributes({
				timelineStepImageUrl: null,
				timelineStepImageId: null,
				timelineStepImageAlt: null,
				timelineStepImageCaption: null,
				timelineStepImageDescription: null,
			});
			return;
		}
		setAttributes({
			timelineStepImageUrl: media.url,
			timelineStepImageId: media.id,
			timelineStepImageAlt: media?.alt,
			timelineStepImageCaption: media?.caption,
			timelineStepImageDescription: media?.description,
		});
	}
	function removeImageAttributes() {
		setAttributes({
			timelineStepImageUrl: null,
			timelineStepImageId: null,
			timelineStepImageAlt: null,
		});
	}

	function setIconAttributes(media) {
		if (!media || !media.url) {
			setAttributes({
				timelineStepIconUrl: null,
				timelineStepIconId: null,
				timelineStepIconAlt: null,
			});
			return;
		}
		setAttributes({
			timelineStepIconUrl: media.url,
			timelineStepIconId: media.id,
			timelineStepIconAlt: media?.alt,
		});
	}

	function removeIconAttributes() {
		setAttributes({
			timelineStepIconUrl: null,
			timelineStepIconId: null,
			timelineStepIconAlt: null,
		});
	}

	useEffect(() => {
		if (hasStepPicture === false) {
			setImageAttributes(null);
		}
	}, [hasStepPicture]);
	useEffect(() => {
		if (hasStepIcon === false) {
			setIconAttributes(null);
		}
	}, [hasStepIcon]);

	return (
		<>
			<InspectorControls>
				{hasStepPicture && (
					<PanelBody
						className="homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--image"
						title={__("Image", "homegrade-blocks")}
					>
						{timelineStepImageUrl && (
							<img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
						)}
						<div className="media-replace-container">
							<MediaReplaceFlow
								mediaId={timelineStepImageId}
								mediaUrl={timelineStepImageUrl}
								allowedTypes={["image"]}
								accept="image/*"
								onSelect={setImageAttributes}
								name={
									!timelineStepImageUrl
										? __("Ajouter", "homegrade-blocks")
										: __("Remplacer", "homegrade-blocks")
								}
							/>
							{timelineStepImageUrl && (
								<>
									<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>
					</PanelBody>
				)}
				{hasStepIcon && (
					<PanelBody
						className="homegrade-blocks-timeline-step__panel-body homegrade-blocks-timeline-step__panel-body--icon"
						title={__("Icone", "homegrade-blocks__texte-backoffice")}
					>
						{timelineStepIconUrl && (
							<img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
						)}
						<div className="media-replace-container">
							<MediaReplaceFlow
								mediaId={timelineStepIconId}
								mediaUrl={timelineStepIconUrl}
								allowedTypes={["image"]}
								accept="image/*"
								onSelect={setIconAttributes}
								name={
									!timelineStepIconUrl
										? __("Ajouter", "homegrade-blocks__texte-backoffice")
										: __("Remplacer", "homegrade-blocks__texte-backoffice")
								}
							/>
							{timelineStepIconUrl && (
								<Button
									className="custom-flow-button"
									variant="primary"
									icon={trash}
									label="Supprimer"
									onClick={removeIconAttributes}
								/>
							)}
						</div>
					</PanelBody>
				)}
			</InspectorControls>
			<BlockControls>
				<ToolbarGroup>
					<MediaReplaceFlow
						mediaId={timelineStepImageId}
						mediaUrl={timelineStepImageUrl}
						allowedTypes={["image"]}
						accept="image/*"
						onSelect={setImageAttributes}
						name={
							!timelineStepImageUrl
								? __("Ajouter une Image", "homegrade-blocks__texte-backoffice")
								: __("Remplacer Image", "homegrade-blocks__texte-backoffice")
						}
					/>
					<ToolbarButton
						title={"Supprimer Image"}
						icon={trash}
						isActive={timelineStepImageUrl}
						onClick={removeImageAttributes}
					/>
				</ToolbarGroup>
			</BlockControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-timeline-step`,
				})}
			>
				{hasStepPicture && (
					<div className="homegrade-blocks-timeline-step__cover">
						{!timelineStepImageUrl && (
							<MediaPlaceholder
								accept="image/*"
								allowedTypes={["image"]}
								onSelect={setImageAttributes}
								multiple={false}
								handleUpload={true}
							/>
						)}

						{timelineStepImageUrl && (
							<img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
						)}
						{timelineStepImageDescription && (
							<p>{timelineStepImageDescription}</p>
						)}
						{timelineStepImageCaption && <p>{timelineStepImageCaption}</p>}
					</div>
				)}

				<div className={`homegrade-blocks-timeline-step__content`}>
					{hasStepIcon && (
						<div className="homegrade-blocks-timeline-step__icon">
							{!timelineStepIconUrl && (
								<p className="please-add-icon">Ajoutez une icone !</p>
							)}

							{timelineStepIconUrl && (
								<img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
							)}
						</div>
					)}

					<div className="homegrade-blocks-timeline-step__text-content">
						<RichText
							tagName="h3"
							className="homegrade-blocks-timeline-step__title"
							placeholder={__(
								"Date ou Titre de l'étape",
								"homegrade-blocks__texte-backoffice"
							)}
							value={timelineStepTitle}
							onChange={onChangeTimelineStepTitle}
						/>
						<RichText
							tagName="h2"
							className="homegrade-blocks-timeline-step__subtitle"
							placeholder={__(
								"Titre / Sous-titre de l'étape",
								"homegrade-blocks__texte-backoffice"
							)}
							value={timelineStepSubtitle}
							onChange={onChangeTimelineDescription}
						/>
						<InnerBlocks
							allowedBlocks={[
								"core/paragraph",
								"core/button",
								"core/buttons",
								"core/list",
							]}
						/>
					</div>
				</div>
			</div>
		</>
	);
}
