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

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

import { PanelBody, Button, ToggleControl } from "@wordpress/components";
import { trash } from "@wordpress/icons";

export default function Edit({ attributes, setAttributes }) {
	const {
		tipTitle,
		tipIconId,
		tipIconAlt,
		tipIconUrl,
		hasTipSubtitle,
		tipSubtitle,
	} = attributes;

	function onChangeTipTitle(tipTitle) {
		setAttributes({ tipTitle });
	}
	function onChangeTipSubtitle(tipSubtitle) {
		setAttributes({ tipSubtitle });
	}

	function setTipIconAttributes(tipIcon) {
		setAttributes({
			tipIconId: tipIcon.id,
			tipIconAlt: tipIcon.alt,
			tipIconUrl: tipIcon.url,
		});
		if (!tipIcon) {
			removeTipIconAttributes();
		}
	}

	function removeTipIconAttributes() {
		setAttributes({
			tipIconId: null,
			tipIconAlt: null,
			tipIconUrl: null,
		});
	}

	function onChangeHasTipSubtitle(newsHasTipSubtitle) {
		setAttributes({ hasTipSubtitle: !hasTipSubtitle });
		if (newsHasTipSubtitle) {
			setAttributes({ tipSubtitle: "" });
		}
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					className="homegrade-blocks-components-image__panel-body homegrade-blocks-components-icon__panel-body"
					title={__("Icone", "homegrade-blocks")}
				>
					{tipIconUrl && (
						<img className="icon-preview" src={tipIconUrl} alt={tipIconAlt} />
					)}
					<div className="media-replace-container">
						<MediaReplaceFlow
							mediaId={tipIconId}
							mediaUrl={tipIconUrl}
							allowedTypes={["image"]}
							accept="image/*"
							onSelect={setTipIconAttributes}
							name={
								!tipIconUrl
									? __("Ajouter", "homegrade-blocks")
									: __("Remplacer", "homegrade-blocks")
							}
						/>
						{tipIconUrl && (
							<>
								<Button
									className="custom-flow-button"
									variant="primary"
									icon={trash}
									label="Supprimer"
									onClick={removeTipIconAttributes}
								/>
							</>
						)}
					</div>
				</PanelBody>
				<PanelBody
					className="homegrade-blocks-tips-to-know__panel-body"
					title={__("Sous-Titre", "homegrade-blocks")}
				>
					<ToggleControl
						label="Utiliser des Sous-titres"
						checked={hasTipSubtitle}
						onChange={onChangeHasTipSubtitle}
					/>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-tips-to-know__tip`,
				})}
			>
				<div className="homegrade-blocks-tips-to-know__tip-icon">
					{tipIconUrl && <img src={tipIconUrl} alt={tipIconAlt} />}
					{!tipIconUrl && (
						<MediaPlaceholder
							accept="image/*"
							allowedTypes={["image"]}
							onSelect={setTipIconAttributes}
							multiple={false}
							handleUpload={true}
						/>
					)}
				</div>
				<div className="tip-content">
					<RichText
						className="homegrade-blocks-tips-to-know__tip-title"
						tagName="h4"
						value={tipTitle}
						onChange={onChangeTipTitle}
					/>
					{hasTipSubtitle && (
						<RichText
							className="homegrade-blocks-tips-to-know__tip-subtitle"
							tagName="h5"
							placeholder="Sous-titre"
							value={tipSubtitle}
							onChange={onChangeTipSubtitle}
						/>
					)}
					<InnerBlocks
						allowedBlocks={["core/paragraph", "core/list"]}
						template={[
							[
								"core/paragraph",
								{ placeholder: "Ici le contenu textuel de votre astuce" },
							],
						]}
					/>
				</div>
			</div>
		</>
	);
}
