import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	InnerBlocks,
	useSetting,
	InspectorControls,
	MediaReplaceFlow,
	MediaPlaceholder,
} from "@wordpress/block-editor";
import {
	Card,
	CardHeader,
	CardBody,
	Heading,
	Text,
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import "./editor.scss";
import { isColorLight } from "../../_utilities/utilities";
import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	Button,
	CheckboxControl,
	ColorPalette,
	SelectControl,
} from "@wordpress/components";

import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
import ShapeC from "./shapeC.jsx";
import { filterBgColors, filterTextColors } from "./utilities";

export default function Edit({ attributes, setAttributes, ...props }) {
	const colors = useSetting("color.palette.theme");

	const {
		hasBackgroundColor,
		align,
		backgroundColor,
		textColor,
		hasLightBackground,
		blockVariant,
		shapeType,
		borderColor,
	} = attributes;

	// Détecter le type de post actuel
	const postType = useSelect((select) => {
		return select("core/editor").getCurrentPostType();
	}, []);

	const filteredBgColors = filterBgColors(colors, postType);
	const filteredTextColors = filterTextColors(
		colors,
		postType,
		backgroundColor,
	);

	function onBackgroundColorChange(value) {
		if (value === undefined) {
			setAttributes({ hasBackgroundColor: false });
			setAttributes({ backgroundColor: "transparent" });
		}
		const isLightBackgroundColor = isColorLight(value);
		setAttributes({ hasLightBackground: isLightBackgroundColor });
		setAttributes({ backgroundColor: value });

		if (!isLightBackgroundColor) {
			setAttributes({ textColor: "#fff" });
		} else {
			setAttributes({ textColor: "inherit" });
		}
	}
	function onHasBackgroundColorChange(value) {
		setAttributes({ hasBackgroundColor: value });
		if (!value) {
			setAttributes({ backgroundColor: null });
		}
	}
	function onTextColorChange(value) {
		setAttributes({ textColor: value });
	}
	function onBlockVariantChange(value) {
		setAttributes({ blockVariant: value });

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

	const alignClass =
		align === "full"
			? "alignfull"
			: align === "wide"
				? "alignwide"
				: "aligncontained";

	console.log(align);
	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Aspect", "carhop-blocks")}>
					<ToggleGroupControl
						label="Modèle de bloc"
						value={blockVariant}
						onChange={onBlockVariantChange}
						isBlock
						__nextHasNoMarginBottom
						__next40pxDefaultSize
					>
						<ToggleGroupControlOption value="nude" label="Nu" />
						<ToggleGroupControlOption value="framed" label="Encadré" />
						<ToggleGroupControlOption
							value="backgrounded"
							label="Fond coloré"
						/>
						<ToggleGroupControlOption
							value="framed-backgrounded"
							label="Cadre + fond coloré"
						/>
					</ToggleGroupControl>
					<ToggleGroupControl
						label="Largeur du bloc"
						value={align}
						onChange={(value) => setAttributes({ align: value })}
						isBlock
						__nextHasNoMarginBottom
						__next40pxDefaultSize
					>
						<ToggleGroupControlOption value="" label="Contenue" />
						<ToggleGroupControlOption value="wide" label="Large" />
						<ToggleGroupControlOption value="full" label="Pleine largeur" />
					</ToggleGroupControl>
				</PanelBody>

				{blockVariant !== "nude" && (
					<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="Droite" value="straight" />
							<ToggleGroupControlOption label="Forme A" value="shapeA" />
							<ToggleGroupControlOption label="Forme B" value="shapeB" />
							<ToggleGroupControlOption label="Forme C" value="shapeC" />
						</ToggleGroupControl>

						<SelectControl
							__next40pxDefaultSize
							label="Type de forme"
							onChange={(value) => setAttributes({ shapeType: value })}
							value={shapeType}
							options={[
								{
									disabled: true,
									label: "Type de forme",
									value: "",
								},
								{
									label: "Droite",
									value: "straight",
								},
								{
									label: "Forme A",
									value: "shapeA",
								},
								{
									label: "Forme B",
									value: "shapeB",
								},
								{
									label: "Forme C",
									value: "shapeC",
								},
							]}
						/>

						<ColorPalette
							colors={filteredBgColors}
							value={backgroundColor}
							onChange={onBackgroundColorChange}
						/>
					</PanelBody>
				)}

				{(blockVariant === "backgrounded" ||
					blockVariant === "framed-backgrounded") &&
					postType !== "articles" && (
						<PanelBody
							className="deligraph-blocks-components-image__panel-body"
							title={__("Couleur du texte", "deligraph-blocks")}
						>
							<ColorPalette
								colors={filteredTextColors}
								value={textColor}
								onChange={onTextColorChange}
							/>
						</PanelBody>
					)}
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `${
						postType !== "articles" && "alignfull"
					} content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
						hasLightBackground
							? "content-box--bg-light"
							: "content-box--bg-dark"
					} ${alignClass}`,
					style: {
						"--content-box-text-color": textColor ?? "inherit",
						"--content-box-background-color":
							blockVariant === "backgrounded" ||
							blockVariant === "framed-backgrounded"
								? backgroundColor
								: "transparent",
					},
				})}
			>
				{blockVariant === "backgrounded" &&
					backgroundColor &&
					shapeType === "shapeA" && (
						<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
					)}
				{blockVariant === "backgrounded" &&
					backgroundColor &&
					shapeType === "shapeB" && (
						<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
					)}
				{blockVariant === "backgrounded" &&
					backgroundColor &&
					shapeType === "shapeC" && (
						<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
					)}
				{blockVariant === "framed" &&
					backgroundColor &&
					shapeType === "shapeA" && (
						<ShapeA backgroundColor={"none"} borderColor={borderColor} />
					)}
				{blockVariant === "framed" &&
					backgroundColor &&
					shapeType === "shapeB" && (
						<ShapeB backgroundColor={"none"} borderColor={borderColor} />
					)}
				{blockVariant === "framed" &&
					backgroundColor &&
					shapeType === "shapeC" && (
						<ShapeC backgroundColor={"none"} borderColor={borderColor} />
					)}
				{blockVariant === "framed-backgrounded" &&
					backgroundColor &&
					shapeType === "shapeA" && (
						<ShapeA
							backgroundColor={backgroundColor}
							borderColor={borderColor}
						/>
					)}
				{blockVariant === "framed-backgrounded" &&
					backgroundColor &&
					shapeType === "shapeB" && (
						<ShapeB
							backgroundColor={backgroundColor}
							borderColor={borderColor}
						/>
					)}
				{blockVariant === "framed-backgrounded" &&
					backgroundColor &&
					shapeType === "shapeC" && (
						<ShapeC
							backgroundColor={backgroundColor}
							borderColor={borderColor}
						/>
					)}
				<div className="content-box__innerblocks">
					<InnerBlocks
						template={[
							["core/paragraph", { placeholder: "Ajouter ici le texte" }],
						]}
						allowedBlocks={[
							"core/heading",
							"core/paragraph",
							"core/group",
							"core/list",
							"core/button",
							"core/image",
							"core/buttons",
							"core/columns",
							"core/file",
							"core/post-title",
							"core/embed",
							"core/quote",
							"core/pullquote",
							"core/media-text",
							"core/table",
							"carhop-blocks/chapter-section",
							"carhop-blocks/heading",
							"carhop-blocks/decorative-shapes",
							"carhop-blocks/scroll-story-block",
							"carhop-blocks/cta",
							"carhop-blocks/cta-group",
							"carhop-blocks/audio-player",
							"carhop-blocks/content-box",
							"carhop-blocks/localisation-map",
							"carhop-blocks/notice-panel",
							"carhop-blocks/story-timeline",
							"carhop-blocks/highlight-timeline",
							"acf/statistics-datas",
							"ninja-forms/form",
							"gravityforms/form",
							"dynamiques-blocks/sitemap",
							"mailpoet/subscription-form-block",
							"shortcode",
						]}
					/>
				</div>
			</section>
		</>
	);
}