import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	RichText,
	MediaReplaceFlow,
	InspectorControls,
	__experimentalLinkControl as LinkControl,
	useSetting,
	InnerBlocks,
	MediaPlaceholder,
} from "@wordpress/block-editor";
import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	Button,
	CheckboxControl,
	SelectControl,
} from "@wordpress/components";
import "./editor.scss";
import { lock, trash } from "@wordpress/icons";
import CoverImage from "./Cover";

export default function Edit({ attributes, setAttributes }) {
	const {
		coverId,
		coverUrl,
		coverAlt,
		coverPosition,
		hasCover,
		blackWhiteCoverFilter,
		aspectRatio,
	} = attributes;
	const colors = useSetting("color.palette.theme");

	function setCoverAttributes(cover) {
		setAttributes({
			coverId: cover.id,
			coverAlt: cover.alt,
			coverUrl: cover.url,
		});
	}
	function removeCoverAttributes() {
		setAttributes({
			coverId: null,
			coverAlt: null,
			coverUrl: null,
		});
	}

	// Déterminer l'ordre des éléments basé sur la position
	const shouldShowCoverLeft = hasCover && coverPosition === "left";
	const shouldShowCoverRight = hasCover && coverPosition === "right";

	return (
		<>
			<InspectorControls>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Image d'accompagnement", "deligraph-blocks")}
				>
					<CheckboxControl
						label="Afficher l'image d'accompagnement"
						checked={hasCover}
						onChange={(value) => setAttributes({ hasCover: value })}
					/>
					{coverUrl && <img src={coverUrl} alt={coverAlt} />}

					{hasCover && (
						<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}
									/>
								</>
							)}

							<ToggleGroupControl
								className="deligraph-blocks__variant"
								isBlock
								label="Disposition"
								onChange={(value) => setAttributes({ coverPosition: value })}
								value={coverPosition}
							>
								<ToggleGroupControlOption label="Gauche" value="left" />
								<ToggleGroupControlOption label="Droite" value="right" />
							</ToggleGroupControl>

							<SelectControl
								label={__("Proportion", "carhop-blocks")}
								value={aspectRatio || "auto"}
								options={[
									{ label: __("Auto", "carhop-blocks"), value: "auto" },
									{ label: "1:1", value: "1/1" },
									{ label: "4:3", value: "4/3" },
									{ label: "3:4", value: "3/4" },
									{ label: "3:2", value: "3/2" },
									{ label: "2:3", value: "2/3" },
									{ label: "16:9", value: "16/9" },
									{ label: "21:9", value: "21/9" },
									{ label: "9:16", value: "9/16" },
									{ label: "9:21", value: "9/21" },
								]}
								onChange={(value) => setAttributes({ aspectRatio: value })}
								help={__(
									"Sélectionnez la proportion d'affichage de la carte.",
									"carhop-blocks"
								)}
							/>

							<ToggleGroupControl
								className="deligraph-blocks__variant"
								isBlock
								label="Filtre"
								onChange={(value) => {
									setAttributes({ blackWhiteCoverFilter: value === "true" });
								}}
								value={blackWhiteCoverFilter ? "true" : "false"}
							>
								<ToggleGroupControlOption label="Noir et blanc" value="true" />
								<ToggleGroupControlOption label="Aucun" value="false" />
							</ToggleGroupControl>
						</div>
					)}
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `narrative-card ${
						hasCover
							? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${
									blackWhiteCoverFilter
										? "narrative-card--black-white-cover-filter"
										: ""
							  }`
							: ""
					}`,
				})}
			>
				<svg
					viewBox="0 0 1216 407"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
					preserveAspectRatio="none"
					className="narrative-card__background"
				>
					<path
						d="M1 11V406H1205L1215 1L1 11Z"
						fill="white"
						stroke="#136F63"
						strokeWidth="2"
						vectorEffect="non-scaling-stroke"
					/>
				</svg>

				{shouldShowCoverLeft && (
					<CoverImage
						coverUrl={coverUrl}
						coverAlt={coverAlt}
						aspectRatio={aspectRatio}
						onSelect={setCoverAttributes}
					/>
				)}

				<div className="narrative-card__content">
					<InnerBlocks
						allowedBlocks={[
							"core/paragraph",
							"core/heading",
							"core/image",
							"carhop-blocks/cta",
							"carhop-blocks/cta-group",
						]}
						template={[
							["core/heading", { content: "Lorem ipsum" }],
							[
								"core/paragraph",
								{
									content:
										"Lorem ipsum dolor sit amet consectetur adipisicing elit.",
								},
							],
						]}
					/>
				</div>

				{shouldShowCoverRight && (
					<CoverImage
						coverUrl={coverUrl}
						coverAlt={coverAlt}
						aspectRatio={aspectRatio}
						onSelect={setCoverAttributes}
					/>
				)}
			</div>
		</>
	);
}