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,
} from "@wordpress/components";

import { filterBgColors, filterTextColors } from "./utilities";

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

	const {
		hasBackgroundColor,
		backgroundColor,
		textColor,
		hasLightBackground,
		blockVariant,
	} = 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 });
	}
	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Aspect", "carhop-blocks")}>
					<ToggleGroupControl
						label="Modèle de bloc"
						value={blockVariant}
						onChange={onBlockVariantChange}
						isBlock
						__nextHasNoMarginBottom
						__next40pxDefaultSize
					>
						<ToggleGroupControlOption value="framed" label="Encadré" />
						<ToggleGroupControlOption
							value="backgrounded"
							label="Fond coloré"
						/>
					</ToggleGroupControl>

					{blockVariant === "backgrounded" && (
						<Card>
							<CardHeader>
								<h1>Couleur de fond</h1>
							</CardHeader>
							<CardBody>
								<>
									<ColorPalette
										colors={filteredBgColors}
										value={backgroundColor}
										onChange={onBackgroundColorChange}
									/>
								</>
							</CardBody>
						</Card>
					)}

					{blockVariant === "backgrounded" && postType !== "articles" && (
						<Card>
							<CardHeader>
								<h1>Couleur du texte </h1>
							</CardHeader>
							<CardBody>
								<ColorPalette
									colors={filteredTextColors}
									value={textColor}
									onChange={onTextColorChange}
								/>
							</CardBody>
						</Card>
					)}
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: `${
						postType !== "articles" && "alignfull"
					} content-box content-box--variant-${blockVariant} ${
						hasLightBackground
							? "content-box--bg-light"
							: "content-box--bg-dark"
					}`,
					style: {
						"--content-box-text-color": textColor ?? "inherit",
						"--content-box-background-color":
							blockVariant === "backgrounded" ? backgroundColor : "transparent",
					},
				})}
			>
				<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/post-title",
							"core/embed",
							"core/quote",
							"core/pullquote",
							"core/media-text",
							"carhop-blocks/heading",
							"carhop-blocks/decorative-shapes",
							"acf/statistics-datas",
							"carhop-blocks/scroll-story-block",
							"carhop-blocks/cta-group",
							"ninja-forms/form",
							"carhop-blocks/localisation-map",
							"gravityforms/form",
							"dynamiques-blocks/sitemap",
							"mailpoet/subscription-form-block",
							"shortcode",
						]}
					/>
				</div>
			</section>
		</>
	);
}