import { defineStore, acceptHMRUpdate } from 'pinia';
import { favorites } from 'constants/favorites'
import type { RoutesSet, LatLng, routeSegments, routeDirections } from 'components/models';

interface State {
  zoom: number;
  center: [number, number] | [null, null] | null;
  markerLatLng: [number, number] | [null, null] | null;
  qLocDrawer: boolean;
  routeSet: {
    start: LatLng;
    end: LatLng;
    wayPoints?: LatLng[] | null | undefined;
  };
  routesSet: RoutesSet[] | null;
  routeSegments?: routeSegments[] | null;
  routeDirections?: routeDirections[] | null;
}

export const useLeafletStore = defineStore('leaflet', {
  state: (): State => {
    return {
      zoom: 10,
      center: [favorites.home.coords.lat, favorites.home.coords.lng],
      markerLatLng: null,
      qLocDrawer: false,
      routeSet: {
        start: { lat: null, lng: null },
        end: { lat: null, lng: null },
        wayPoints: null,
      },
      routesSet: [],
      routeSegments: [],
      routeDirections: [],
    };
  },
  actions: {
    clearRouteSegments() {
      this.routeSegments = [];
    },
    setCenter(lat: number, lng: number) {
      this.center = [lat, lng];
    },
    setZoom(zoom: number) {
      this.zoom = zoom;
    },
    setMarkerLatLng(lat: number, lng: number) {
      this.markerLatLng = [lat, lng];
    },
    toggleQLocDrawer() {
      this.qLocDrawer = !this.qLocDrawer
    },
    setRouteDirs(data: routeDirections[]) {
      this.routeDirections = data;
    },
  }
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useLeafletStore, import.meta.hot));
}