import { __ } from '@wordpress/i18n';
import './editor.scss';
import {
	useBlockProps,
	InspectorControls,
	MediaReplaceFlow,
	RichText,
} from '@wordpress/block-editor';
import {
	PanelBody,
	FocalPointPicker,
	TextControl,
	TextareaControl,
	RadioControl,
	Button,
	RangeControl,
} from '@wordpress/components';
import { trash } from '@wordpress/icons';

export default function Edit({
	attributes,
	setAttributes,
	clientId,
	...props
}) {
	const {
		focusTitle,
		objectScale,
		objectPictureUrl,
		objectPictureAlt,
		objectPictureId,
		behaviourType,
		objectPosition,
		objectBehaviourDescription,
		coverUrl,
		focusIndex,
	} = attributes;

	function handleChangeobjectPosition(objectPosition) {
		console.log('position', objectPosition);

		setAttributes({ objectPosition });
	}
	function handleChangeTitle(focusTitle) {
		setAttributes({ focusTitle: focusTitle });
	}
	function handleChangeCaptionDescription(
		objectBehaviourDescription
	) {
		setAttributes({ objectBehaviourDescription });
	}

	function setBehaviourType(behaviourType) {
		setAttributes({ behaviourType });
	}
	function setObjectPicture(image) {
		if (!image || !image.url) {
			setAttributes({
				objectPictureUrl: undefined,
				objectPictureId: undefined,
				objectPictureAlt: '',
			});
			return;
		}
		setAttributes({
			objectPictureUrl: image.url,
			objectPictureId: image.id,
			objectPictureAlt: image.alt,
		});
	}
	function setScale(objectScale) {
		setAttributes({ objectScale });
	}
	function resolvepoint(point) {
		console.log('point', point);
		return {
			x: point.x,
			y: point.y,
		};
	}

	console.log(objectPosition);
	return (
		<>
			<InspectorControls>
				<PanelBody
					className="focus-point-modification-pannel"
					title="Object de comportement clickable"
				>
					{/* <div className="lhoist-content-blocks-object-bullet">
						{focusIndex}
					</div> */}

					<TextControl
						placeholder="Insérer le titre de votre point focus"
						label="Nom du comportement"
						value={
							focusTitle !== 'Légende Sans titre'
								? focusTitle
								: null
						}
						placeholder="Insérer le titre de votre point focus"
						onChange={(value) => {
							handleChangeTitle(value);
						}}
					/>

					{objectPictureUrl && (
						<img
							className="object-preview-image"
							src={objectPictureUrl}
							alt={objectPictureAlt}
						/>
					)}
					<>
						<div className="media-replace-container">
							<MediaReplaceFlow
								mediaId={objectPictureId}
								mediaUrl={objectPictureUrl}
								allowedTypes={['image']}
								accept="image/*"
								onSelect={setObjectPicture}
								name={
									!objectPictureUrl
										? __(
												'Ajouter un objet',
												'lhoist-blocks'
										  )
										: __('Remplacer', 'lhoist-blocks')
								}
							/>
							{objectPictureUrl && (
								<>
									<Button
										className="custom-flow-button"
										icon={trash}
										label="Supprimer"
										onClick={setObjectPicture}
									/>
								</>
							)}
						</div>
					</>

					<FocalPointPicker
						url={coverUrl ?? null}
						dimensions={{
							width: 400,
							height: 50,
						}}
						value={objectPosition}
						onChange={(focalPoint) => {
							handleChangeobjectPosition(focalPoint);
						}}
						resolvePoint={resolvepoint}
					/>
					<RangeControl
						label="Scale"
						value={objectScale}
						onChange={setScale}
						min={1}
						max={100}
					/>

					<RadioControl
						label="Type de comportement"
						selected={
							behaviourType ? behaviourType : 'unsafe'
						}
						required
						options={[
							{
								label: 'Comportement sécurisé ',
								value: 'safe',
							},
							{
								label: 'Comportement à risque',
								value: 'unsafe',
							},
						]}
						onChange={(value) => setBehaviourType(value)}
					/>

					<TextareaControl
						label="Description du comportement"
						value={objectBehaviourDescription}
						rows={3}
						onChange={(description) => {
							handleChangeCaptionDescription(description);
						}}
					/>
				</PanelBody>
			</InspectorControls>
			<img
				{...useBlockProps({
					className: `lhoist-blocks-focus-object`,
				})}
				style={{
					height: `${objectScale}%`,
					top: `${objectPosition.y * 100}%`,
					left: `${objectPosition.x * 100}%`,
				}}
				src={objectPictureUrl}
				alt={objectPictureAlt}
				draggable="false"
				ondragstart="return false;"
			/>
		</>
	);
}
