import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
import { InspectorControls } from "@wordpress/block-editor";
import { RichText } from "@wordpress/block-editor";
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) {
		if (focusPosition.x < 0.05) {
			focusPosition.x = 0.05;
		}
		if (focusPosition.x > 0.95) {
			focusPosition.x = 0.95;
		}

		if (focusPosition.y < 0.02) {
			focusPosition.y = 0.02;
		}
		if (focusPosition.y > 0.98) {
			focusPosition.y = 0.98;
		}
		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">
						{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}
						placeholder="Insérer le titre de votre point focus"
						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`,
				})}
			>
				<RichText
					tagName="span"
					className="focus-point-title"
					value={focusTitle}
					onChange={(value) => {
						handleChangeTitle(value);
					}}
				/>
				<RichText
					tagName="span"
					value={focusCaptionDescription}
					onChange={handleChangeCaptionDescription}
				/>
				{/* <span className="focus-point-title">{focusTitle}</span> */}
				{/* {focusCaptionDescription} */}
			</li>
		</>
	);
}
