import { create } from "zustand"

export type SelectedMarker = {
  cityId: string
  location: { lat: number; lng: number }
} | null

interface DestinationPageCitiesMapState {
  hoveredCityMarker: string | null
  hoveredInfoWindow: string | null
  activeCityMarker: SelectedMarker
  setHoveredInfoWindow: (hovered: string | null) => void
  setHoveredCityMarker: (cityId: string | null) => void
  setActiveCityMarker: (marker: SelectedMarker) => void
  resetActiveAndHoveredState: () => void
}

export const useDestinationPageCitiesMapStore =
  create<DestinationPageCitiesMapState>((set) => ({
    hoveredCityMarker: null,
    hoveredInfoWindow: null,
    activeCityMarker: null,
    setHoveredInfoWindow: (hovered) =>
      set(() => ({ hoveredInfoWindow: hovered })),
    setHoveredCityMarker: (cityId) => set({ hoveredCityMarker: cityId }),
    setActiveCityMarker: (selectedMarker) =>
      set({ activeCityMarker: selectedMarker }),
    resetActiveAndHoveredState: () =>
      set({
        activeCityMarker: null,
        hoveredCityMarker: null,
        hoveredInfoWindow: null,
      }),
  }))