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

interface MapStore {
	popup: {
		isOpen: boolean;
		lat: number;
		lng: number;
	} | null;
	map: {
		center: L.LatLngExpression;
		zoom: number;
	};
	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;
	setPopup: (popup: MapStore["popup"]) => void;
	searchPopup?: {
		isOpen: boolean;
		lat: number;
		lng: number;
		elementId: number;
	};
	setSearchPopup: (popup: MapStore["searchPopup"]) => void;
}

export const useMapStore = create<MapStore>((set, get) => ({
	map: {
		center: [51.5, 10.5],
		zoom: 6,
	},
	searchElements: [],
	setSearchPopup: (popup) =>
		set((state) => ({
			searchPopup: popup,
		})),
	popup: null,
	setPopup: (popup) =>
		set((state) => ({
			popup: popup,
		})),
	setSearchElements: (elements) =>
		set((state) => ({
			searchElements: elements,
		})),
}));