import { __ } from "@wordpress/i18n";
import { useBlockProps, RichText } from "@wordpress/block-editor";
import "./editor.scss";
import { InspectorControls } from "@wordpress/block-editor";
import { createErrorNotice, removeNotice } from "@wordpress/notices";
import { useDispatch, useSelect } from "@wordpress/data";
import { store as noticesStore } from "@wordpress/notices";
import {
	PanelBody,
	FocalPointPicker,
	TextControl,
	TextareaControl,
} from "@wordpress/components";

export default function Edit({
	attributes,
	setAttributes,
	clientId,
	...props
}) {
	const {
		focusTitle,
		focusPosition,
		focusCaptionDescription,
		coverUrl,
		focusIndex,
	} = attributes;

	function handleChangeFocusPosition(focusPosition) {
		setAttributes({ focusPosition });
	}
	function handleChangeTitle(focusTitle) {
		setAttributes({ focusTitle: focusTitle });
	}
	function handleChangeCaptionDescription(focusCaptionDescription) {
		setAttributes({ focusCaptionDescription });
	}

	return (
		<>
			<InspectorControls>
				<PanelBody
					className="focus-point-modification-pannel"
					title="Gestion du points de focus"
				>
					<div className="homegrade-blocks-focus-point-bullet-panel-preview">
						{focusIndex}
					</div>
					<TextControl
						placeholder="Insérer le titre de votre point focus"
						label="Titre du point focus"
						value={focusTitle !== "Légende Sans titre" ? focusTitle : null}
						onChange={(value) => {
							handleChangeTitle(value);
						}}
					/>
					<TextareaControl
						label="Description du point focus"
						value={focusCaptionDescription}
						rows={3}
						onChange={(description) => {
							handleChangeCaptionDescription(description);
						}}
					/>
					<FocalPointPicker
						url={coverUrl ?? null}
						dimensions={{
							width: 400,
							height: 50,
						}}
						value={focusPosition}
						onChange={(focalPoint) => {
							handleChangeFocusPosition(focalPoint);
						}}
					/>
				</PanelBody>
			</InspectorControls>
			<li
				{...useBlockProps({
					className: `homegrade-blocks-focus-point-caption`,
				})}
			>
				<span className="focus-point-title">{focusTitle}</span>
				{focusCaptionDescription}
			</li>
		</>
	);
}