import { __ } from "@wordpress/i18n";
import {
	InnerBlocks,
	useBlockProps,
	InspectorControls,
	MediaReplaceFlow,
	MediaPlaceholder,
	useSetting,
} from "@wordpress/block-editor";
import shapeA from "./shapeA.jsx";
import shapeB from "./shapeB.jsx";
import { lock, trash } from "@wordpress/icons";
import { ColorPalette } from "@wordpress/components";
import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	Button,
	CheckboxControl,
} from "@wordpress/components";

import "./editor.scss";
import { isColorLight } from "../../_utilities/utilities";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";

export default function Edit({ attributes, setAttributes, ...props }) {
	const colors = useSetting("color.palette.theme");
	const {
		align,
		hasLightBackground,
		disposition,
		coverType,
		coverUrl,
		coverAlt,
		coverId,
		coverSize,
		backgroundColor,
		textColor,
		shapeType,
		blockVariant,
		borderColor,
	} = attributes;

	function onDispositionChange(disposition) {
		setAttributes({ disposition });
	}

	function setCoverAttributes(cover) {
		setAttributes({
			coverId: cover.id,
			coverAlt: cover.alt,
			coverUrl: cover.url,
		});
	}
	function removeCoverAttributes() {
		setAttributes({
			coverId: null,
			coverAlt: null,
			coverUrl: null,
		});
	}
	function onBackgroundColorChange(value) {
		if (!value) return;
		setAttributes({ backgroundColor: value });
		setHasLightBackground(value);
	}

	function onCoverTypeChange(value) {
		setAttributes({ coverType: value });
	}

	function onBlockVariantChange(value) {
		setAttributes({ blockVariant: value });

		if (value === "framed" || value === "nude") {
			setAttributes({ backgroundColor: "#fff" });
			setAttributes({ hasLightBackground: true });
		}
	}

	function setHasLightBackground(backgroundColor) {
		if (!backgroundColor) return;

		const isLightBackgroundColor = isColorLight(backgroundColor);
		setAttributes({ hasLightBackground: isLightBackgroundColor });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Aspect & Variante de bloc", "deligraph-blocks")}
				>
					{/* Largeur du bloc */}
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Largeur du bloc"
						onChange={(value) => setAttributes({ align: value })}
						value={align || "wide"}
					>
						<ToggleGroupControlOption label="Contenue" value="wide" />
						<ToggleGroupControlOption label="Pleine largeur" value="full" />
					</ToggleGroupControl>
					{/* Modèle de bloc */}
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Modèle de bloc"
						onChange={onBlockVariantChange}
						value={blockVariant}
					>
						<ToggleGroupControlOption label="Nu" value="nude" />
						<ToggleGroupControlOption label="Encadré" value="framed" />
						<ToggleGroupControlOption
							label="Fond Coloré"
							value="backgrounded"
						/>
					</ToggleGroupControl>
					{/* Disposition */}
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Disposition"
						onChange={onDispositionChange}
						value={disposition}
					>
						<ToggleGroupControlOption label="Gauche" value="left" />
						<ToggleGroupControlOption label="Droite" value="right" />
					</ToggleGroupControl>
				</PanelBody>

				{blockVariant === "backgrounded" && (
					<PanelBody
						className="deligraph-blocks-components-image__panel-body"
						title={__("Arrière plan", "deligraph-blocks")}
					>
						<ToggleGroupControl
							className="deligraph-blocks__variant"
							isBlock
							label="Type de forme"
							onChange={(value) => setAttributes({ shapeType: value })}
							value={shapeType}
						>
							<ToggleGroupControlOption
								label="Variation A"
								value="variationA"
							/>
							<ToggleGroupControlOption
								label="Variation B"
								value="variationB"
							/>
						</ToggleGroupControl>
						<ColorPalette
							colors={colors}
							value={backgroundColor}
							onChange={onBackgroundColorChange}
						/>
					</PanelBody>
				)}
				{blockVariant === "framed" && (
					<PanelBody
						className="deligraph-blocks-components-image__panel-body"
						title={__("Bordure", "deligraph-blocks")}
					>
						<ToggleGroupControl
							className="deligraph-blocks__variant"
							isBlock
							label="Type de forme"
							onChange={(value) => setAttributes({ shapeType: value })}
							value={shapeType}
						>
							<ToggleGroupControlOption
								label="Variation A"
								value="variationA"
							/>
							<ToggleGroupControlOption
								label="Variation B"
								value="variationB"
							/>
						</ToggleGroupControl>
						<ColorPalette
							colors={colors}
							value={borderColor}
							onChange={(value) => setAttributes({ borderColor: value })}
						/>
					</PanelBody>
				)}

				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Image d'accompagnement", "deligraph-blocks")}
					initialOpen={false}
				>
					{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="Type d'image"
						onChange={onCoverTypeChange}
						value={coverType}
					>
						<ToggleGroupControlOption label="Classique" value="classic" />
						<ToggleGroupControlOption label="Encadrée" value="photoframe" />
					</ToggleGroupControl>

					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Taille de l'image"
						onChange={(coverSize) => setAttributes({ coverSize })}
						value={coverSize}
					>
						<ToggleGroupControlOption label="Big" value="large" />
						<ToggleGroupControlOption label="Grande" value="grande" />
						<ToggleGroupControlOption label="Moyenne" value="medium" />
						<ToggleGroupControlOption label="Petite" value="small" />
					</ToggleGroupControl>
				</PanelBody>

				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Couleur du texte", "deligraph-blocks")}
					initialOpen={false}
				>
					<ColorPalette
						colors={colors}
						value={textColor}
						onChange={(value) => setAttributes({ textColor: value })}
					/>
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
						${
							hasLightBackground
								? "chapter-section--bg-light"
								: "chapter-section--bg-dark"
						}`,

					style: {
						"--chapter-section-text-color": textColor ? textColor : "#136f63",
						"--cta-current-color":
							blockVariant === "backgrounded"
								? "inherit"
								: "var(--wp--preset--color--primary) !important",
					},
				})}
			>
				<div className="chapter-section__inner">
					{blockVariant === "backgrounded" &&
						backgroundColor &&
						shapeType === "variationA" && (
							<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
						)}
					{blockVariant === "backgrounded" &&
						backgroundColor &&
						shapeType === "variationB" && (
							<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
						)}
					{blockVariant === "framed" &&
						backgroundColor &&
						shapeType === "variationA" && (
							<ShapeA backgroundColor={"none"} borderColor={borderColor} />
						)}
					{blockVariant === "framed" &&
						backgroundColor &&
						shapeType === "variationB" && (
							<ShapeB backgroundColor={"none"} borderColor={borderColor} />
						)}
					<div className="chapter-section__content">
						<div className="chapter-section__innerblocks">
							<InnerBlocks
								template={[
									[
										"carhop-blocks/heading",
										{
											innerBlocks: [
												[
													"core/heading",
													{
														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/file",
									"core/button",
									"core/buttons",
									"carhop-blocks/heading",
									"carhop-blocks/cta",
									"carhop-blocks/cta-group",
								]}
							/>
						</div>
					</div>
					{coverUrl && (
						<img
							className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
							src={coverUrl}
							alt={coverAlt}
						/>
					)}
					{!coverUrl && (
						<MediaPlaceholder
							accept="image/*"
							allowedTypes={["image"]}
							onSelect={setCoverAttributes}
							multiple={false}
							handleUpload={true}
						/>
					)}
				</div>
			</section>
		</>
	);
}
