1import {ReactNode} from 'react';
 2import {type LatLngExpression} from 'leaflet';
 3import {CircleMarkerProps} from 'react-leaflet';
 4import {create} from 'zustand';
 5import {Travel} from '../generated/graphql';
 6
 7type State = {
 8  map?: any;
 9  preventUpdateKey: string;
10  center: LatLngExpression;
11  markers: Array<CircleMarkerProps & {popup: ReactNode, double: boolean}>;
12  focusedTravel?: string;
13  setMap: (map: any) => void;
14  setPreventUpdateKey: (preventUpdateKey: string) => void;
15  setCenter: (center: LatLngExpression) => void;
16  setMarkers: (markers: Array<CircleMarkerProps & {popup: ReactNode}>) => void;
17  setFocusOnTravel: (travel?: Travel & {id: string}) => void;
18};
19
20const useMapStore = create<State>((set, get) => ({
21  map: undefined,
22  preventUpdateKey: '',
23  center: [0, 0],
24  markers: [],
25  focusedTravel: undefined,
26  setMap: map => set({map}),
27  setPreventUpdateKey: preventUpdateKey => set({preventUpdateKey}),
28  setCenter: center => set({center}),
29  setMarkers: markers => set({markers}),
30  setFocusOnTravel: travel => {
31    if (!travel) {
32      set({focusedTravel: undefined});
33    } else {
34      set({focusedTravel: travel.id});
35      const lat = travel.meeting_latitude;
36      const long = travel.meeting_longitude;
37      if (lat && long) get().map?.panTo([lat, long]);
38    }
39  },
40}));
41
42export default useMapStore;