import { useState } from 'react';
import { useMapEvents } from 'react-leaflet';
import { alpha, Box } from '@mui/material';

import defaultIcon from './defaultIcon';

const FloatingMarker = () => {
	const [dragging, setDragging] = useState(false);

	useMapEvents({
		movestart: () => {
			setDragging(true);
		},
		moveend: () => {
			setDragging(false);
		}
	});

	return (
		<div
			style={{
				position: 'absolute',
				zIndex: 600,
				top: '50%',
				left: '50%',
				transform: 'translate(-16px, -46px)'
			}}
		>
			<img
				src={defaultIcon}
				width={32}
				height={40}
				style={{
					userSelect: 'none',
					position: 'relative',
					zIndex: 1,
					transform: `scale(${dragging ? 0.9 : 1}) translateY(${dragging ? '-4px' : 0})`,
					display: 'block',
					transition: 'all 200ms'
				}}
			/>

			<Box
				width={dragging ? 24 : 12}
				height={dragging ? 24 : 12}
				marginX="auto"
				marginTop={dragging ? -0.75 : 0}
				borderRadius="50%"
				display="flex"
				justifyContent="center"
				alignItems="center"
				sx={(theme) => ({
					bgcolor: alpha(theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black, 0.2),
					transition: 'all 200ms'
				})}
			>
				<Box
					width={4}
					height={4}
					borderRadius="50%"
					sx={(theme) => ({
						bgcolor: alpha(theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black, 0.9)
					})}
				/>
			</Box>
		</div>
	);
};

export default FloatingMarker;