import {useRef, useEffect} from 'react';
import {__} from '@wordpress/i18n';
import Draggable from 'react-draggable';

export function MobileImagePosition(props) {
	const {slides, slide, index, updateSlideProperty} = props;
	let {imagePositionMobile} = slide;

	imagePositionMobile = imagePositionMobile || 50;

	const node = useRef();
	const currentCropEl = useRef();

	/*
	 * Handle click outside the div
	 */
	// useEffect(() => {
	// 	// add when mounted
	// 	document.addEventListener('mousedown', handleClick);
	// 	// return function to be called when unmounted (simulate componentWillUnmount)
	// 	return () => {
	// 		document.removeEventListener('mousedown', handleClick);
	// 	};
	// }, []);

	useEffect(() => {
		if (node.current.focus) {
			node.current.focus();
		}
	}, [node]);

	// const handleClick = (e) => {
	// 	if (node.current.contains(e.target)) {
	// 		// inside click
	// 		// return;
	// 	}
	// 	// outside click
	// 	updateSlideProperty(
	// 		false,
	// 		'showMobileImageCropSettings',
	// 		slides[index],
	// 		index
	// 	);
	// };

	let mediaElement = '';
	if (slide.type === 'image') {
		mediaElement = <img src={slide.url} />;
	} else if (slide.type === 'video') {
		mediaElement = <video src={slide.url} />;
	}

	const crop_area__width = 110; //the width of  the backend crop area

	const handleStop = (e, ui) => {
		const content__width = currentCropEl.current.offsetWidth;
		const crop_area__left = ui.x; // the  distance from the left (X axis)
		const crop_area__middle_left = crop_area__left + crop_area__width / 2; // the distance from the middle of the Crop area

		// displacement in %
		const crop_area__middle_left_percent =
			crop_area__middle_left / (content__width / 100);

		updateSlideProperty(
			crop_area__middle_left_percent,
			'imagePositionMobile',
			slides[index],
			index
		);
	};

	// this is calculated based on this formula:
	// crop_area__width = 200 (hardcoded for this example)
	// content__width = 450 (hardcoded for this example)
	// (defaultPositionX + (crop_area__width/2) ) / (content__width / 100)===imagePositionMobile (in %)
	const defaultPositionX = 2.53 * imagePositionMobile - 55;

	return (
		<div className="image-position-mobile" ref={node} tabIndex="-1">
			<div className="image-position-mobile--header">
				{__('Image Position on Mobile', 'flo')}
				<span
					className="close-modal gbp-icon-close-small"
					onClick={() => {
						updateSlideProperty(
							false,
							'showMobileImageCropSettings',
							slides[index],
							index
						);
					}}
				></span>
			</div>

			{slide.url && slide.url.length && (
				<div
					className="image-position-mobile--container-area-wrapper"
					ref={currentCropEl}
				>
					{mediaElement}
					<Draggable
						bounds="parent"
						axis="x"
						defaultPosition={{x: defaultPositionX, y: 0}}
						onStop={handleStop}
					>
						<div className="image-position-mobile--container-area">
							<div
								className="image-position-mobile--container-area-aim"
								title={__(
									'Drag the focal area to set the desired image position',
									'flo'
								)}
							>
								<i className="gbp-icon-move" />
							</div>
						</div>
					</Draggable>
				</div>
			)}
		</div>
	);
}
