import { useMapStore } from "_store/mapStore";
import { Marker as LMarker } from "leaflet";
import { Ref, use, useEffect, useRef } from "react";
import { Marker, Polygon, Polyline, Popup } from "react-leaflet";
import L from "leaflet";

export const SearchElements = () => {
	const { searchElements, searchPopup, setSearchPopup } = useMapStore();
	const poppupRef = useRef<LMarker>(null);

	useEffect(() => {
		if (searchPopup?.isOpen) {
			poppupRef.current?.openPopup();
		} else {
			poppupRef.current?.closePopup();
		}
	}, [searchPopup]);

	const SearchElement = ({
		element,
	}: {
		element: (typeof searchElements)[1];
	}) => {
		const ref = useRef<any>(null);

		useEffect(() => {
			if (ref.current) {
				console.log(ref.current);
				ref.current.on("click", () => {
					console.log("click");
					const center = ref.current.getBounds().getCenter();
					setSearchPopup({
						isOpen: true,
						lat: center.lat,
						lng: center.lng,
						elementId: element.id,
					});
					console.log(element);
				});
			}
		}, []);

		return (
			<Polygon
				key={element.id}
				positions={element.nodes.map((node) => [node.lat, node.lon])}
				color="#46b7a3"
				ref={ref}
			/>
		);
	};

	return (
		<>
			{searchElements.map((element) => {
				return <SearchElement key={element.id} element={element} />;
			})}
			{searchPopup && (
				<Marker
					position={[searchPopup.lat, searchPopup.lng]}
					ref={poppupRef}
					icon={new L.DivIcon()}
					opacity={0}
				>
					<Popup>
						<div className="absolute z-1000 opacity-100 pointer-events-auto w-[500px] text-white">
							<div className="bg-red-600 w-7 h-6">test</div>
						</div>
					</Popup>
				</Marker>
			)}
		</>
	);
};