import { useMapStore } from "_store/mapStore";
import { MapPinned, Search } from "lucide-react";
import { useEffect } from "react";
import { Popup, useMap } from "react-leaflet";

export const ContextMenu = () => {
	const map = useMap();
	const { contextMenu, setContextMenu, setSearchElements, setSearchPopup } =
		useMapStore();

	useEffect(() => {
		const handleContextMenu = (e: any) => {
			setContextMenu({ lat: e.latlng.lat, lng: e.latlng.lng });
		};
		const handleClick = (e: any) => {
			setContextMenu(null);
			setSearchPopup(null);
		};

		map.on("contextmenu", handleContextMenu);
		map.on("click", handleClick);

		return () => {
			map.off("contextmenu", handleContextMenu);
			map.off("click", handleClick);
		};
	}, [contextMenu]);

	if (!contextMenu) return null;

	return (
		<Popup
			position={[contextMenu.lat, contextMenu.lng]}
			autoClose={false}
			closeOnClick={false}
			autoPan={false}
		>
			{/* // TODO: maske: */}
			<div className="absolute transform -translate-y-1/2 z-1000 opacity-100 pointer-events-auto p-3">
				<button
					className="btn btn-sm rounded-full bg-rescuetrack aspect-square"
					onClick={async () => {
						const address = await fetch(
							`https://nominatim.openstreetmap.org/reverse?lat=${contextMenu.lat}&lon=${contextMenu.lng}&format=json`,
						);
						const data = (await address.json()) as {
							address: {
								ISO3166_2_lvl4: string;
								country: string;
								country_code: string;
								county: string;
								hamlet: string;
								municipality: string;
								postcode: string;
								road: string;
								state: string;
								town: string;
							};
							display_name: string;
							importance: number;
							lat: string;
							licence: string;
							lon: string;
							name: string;
							osm_id: number;
							osm_type: string;
							place_id: number;
							place_rank: number;
							type: string;
						};
					}}
				>
					<MapPinned size={20} />
				</button>
				<button
					className="btn btn-sm rounded-full bg-rescuetrack aspect-square"
					onClick={async () => {
						const res = await fetch(
							`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(`
							[out:json];
							(
							way["building"](around:100, ${contextMenu.lat}, ${contextMenu.lng});
							relation["building"](around:100, ${contextMenu.lat}, ${contextMenu.lng});
							);
							out body;
							>;
							out skel qt;
						`)}`,
						);
						const data = await res.json();
						setSearchElements(
							data.elements
								.filter((e: any) => e.type === "way")
								.map((e: any) => {
									return {
										id: e.id,
										nodes: e.nodes.map((nodeId: string) => {
											const node = data.elements.find(
												(element: any) => element.id === nodeId,
											);
											return {
												lat: node.lat,
												lon: node.lon,
											};
										}),
										tags: e.tags,
										type: e.type,
									};
								}),
						);
					}}
				>
					<Search size={20} />
				</button>
			</div>
		</Popup>
	);
};