import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	InnerBlocks,
	useSetting,
	InspectorControls,
	MediaReplaceFlow,
	MediaPlaceholder,
} from "@wordpress/block-editor";
import "./editor.scss";

import {
	PanelBody,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	Button,
	CheckboxControl,
	ColorPalette,
} from "@wordpress/components";

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

	function onBackgroundColorChange(value) {
		setAttributes({ backgroundColor: value });
	}
	function onHasBackgroundColorChange(value) {
		setAttributes({ hasBackgroundColor: value });
		if (!value) {
			setAttributes({ backgroundColor: null });
		}
	}
	function onTextColorChange(value) {
		setAttributes({ textColor: value });
	}
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Arrière plan", "deligraph-blocks")}
				>
					<CheckboxControl
						label="Arrière plan coloré"
						checked={hasBackgroundColor}
						onChange={onHasBackgroundColorChange}
					/>
					{hasBackgroundColor && (
						<>
							<ColorPalette
								colors={colors}
								value={backgroundColor}
								onChange={onBackgroundColorChange}
							/>
						</>
					)}
				</PanelBody>
				<PanelBody
					className="deligraph-blocks-components-image__panel-body"
					title={__("Couleur du texte", "deligraph-blocks")}
				>
					{hasBackgroundColor && (
						<>
							<ColorPalette
								colors={colors}
								value={textColor}
								onChange={onTextColorChange}
							/>
						</>
					)}
				</PanelBody>
			</InspectorControls>
			<section
				{...useBlockProps({
					className: "content-box",
					style: {
						"--content-box-background-color": backgroundColor,
						"--content-box-text-color": textColor,
					},
				})}
			>
				<div className="content-box__innerblocks">
					<InnerBlocks
						template={[
							["core/paragraph", { placeholder: "Ajouter ici le texte" }],
						]}
						allowedBlocks={[
							"core/heading",
							"core/paragraph",
							"core/list",
							"core/button",
							"core/buttons",
							"carhop-blocks/heading",
							"carhop-blocks/decorative-shapes",
							"acf/statistics-datas",
						]}
					/>
				</div>
			</section>
		</>
	);
}