import L from "leaflet";
import { PropsWithChildren, useEffect, useRef } from "react";
import { useMap } from "react-leaflet";

type Props = {
	position: ("top" | "right" | "bottom" | "left")[];
} & PropsWithChildren;

export function MapControlContainer({ children, position }: Props) {
	const controlRef = useRef(null);
	const map = useMap();

	useEffect(() => {
		if (controlRef.current) {
			// Отключаем распространение событий клика и прокрутки на элементе управления
			L.DomEvent.disableClickPropagation(controlRef.current);
			L.DomEvent.disableScrollPropagation(controlRef.current);
		}
	}, [map]); // Зависимость от map, чтобы убедиться, что карта инициализирована

	const positionClass = position.map((p) => `leaflet-${p}`).join(" ");
	return (
		<div className={positionClass}>
			<div className="leaflet-control" ref={controlRef}>
				{children}
			</div>
		</div>
	);
}
