import { popup } from "leaflet";
import { create } from "zustand";

interface MapStore {
	contextMenu: {
		lat: number;
		lng: number;
	} | null;
	map: {
		center: L.LatLngExpression;
		zoom: number;
	};
	openMissionMarker: string[];
	setOpenMissionMarker: (mission: { open: string[]; close: string[] }) => void;
	searchElements: {
		id: number;
		nodes: {
			lat: number;
			lon: number;
		}[];
		tags?: {
			"addr:country"?: string;
			"addr:city"?: string;
			"addr:housenumber"?: string;
			"addr:postcode"?: string;
			"addr:street"?: string;
			"addr:suburb"?: string;
			building?: string;
		};
		type: string;
	}[];
	setSearchElements: (elements: MapStore["searchElements"]) => void;
	setContextMenu: (popup: MapStore["contextMenu"]) => void;
	searchPopup: {
		lat: number;
		lng: number;
		elementId: number;
	} | null;
	setSearchPopup: (popup: MapStore["searchPopup"]) => void;
}

export const useMapStore = create<MapStore>((set, get) => ({
	openMissionMarker: [],
	setOpenMissionMarker: ({ open, close }) => {
		set((state) => ({
			openMissionMarker: [...state.openMissionMarker, ...open].filter(
				(id) => !close.includes(id),
			),
		}));
	},
	map: {
		center: [51.5, 10.5],
		zoom: 6,
	},
	searchPopup: null,
	searchElements: [],
	setSearchPopup: (popup) =>
		set((state) => ({
			searchPopup: popup,
		})),
	contextMenu: null,
	setContextMenu: (contextMenu) =>
		set((state) => ({
			contextMenu,
		})),
	setSearchElements: (elements) =>
		set((state) => ({
			searchElements: elements,
		})),
}));