import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	InnerBlocks,
	RichText,
	InspectorControls,
	AlignmentToolbar,
	BlockControls,
	PanelColorSettings,
	ContrastChecker,
} from "@wordpress/block-editor";
import {
	ToolbarButton,
	PanelBody,
	ToggleControl,
	TextControl,
	ColorPalette,
	ColorPicker,
} from "@wordpress/components";
import { Tooltip } from "@wordpress/components";

import "./editor.scss";
export default function Edit({ attributes, setAttributes }) {
	const { montexte, textAlignment } = attributes;

	function onChangeAlignment(newAlignment) {
		console.log(newAlignment);
		setAttributes({ textAlignment: newAlignment });
	}
	return (
		<>
			<InspectorControls>
				{/* LA méthode pour chopper les couleurs du thème  */}
				{/* <PanelColorSettings
					title="Couleurs"
					icon="admin-appearance"
					initialOpen={false}
					colorSettings={[
						{
							value: backgroundColor,
							onChange: (value) => setAttributes({ backgroundColor: value }),
							label: "Couleur de fond",
						},
						{
							value: textColor,
							onChange: (value) => setAttributes({ textColor: value }),
							label: "Couleur de texte",
						},
					]}
				>
					<ContrastChecker textColor="#fff" backgroundColor={backgroundColor} />
				</PanelColorSettings> */}
			</InspectorControls>

			{/* Controle de block -> toolbar du dessus */}

			<BlockControls>
				<AlignmentToolbar value={textAlignment} onChange={onChangeAlignment} />

				<ToolbarButton onClick={() => console.log("salut")}>
					Salut
				</ToolbarButton>
			</BlockControls>
			<div>
				<RichText
					{...useBlockProps()}
					className="homegrade-content-blocks-rich-paragraph"
					onChange={(value) => setAttributes({ montexte: value })}
					value={montexte}
					placeholder={__("Votre Text Monsieur", "homegrade-blocks")}
					tagName="h2"
					allowedFormats={[]}
					style={{ textAlign: textAlignment }}
				/>
			</div>
		</>
	);
}
