import { defineStore, acceptHMRUpdate } from 'pinia';
import { favorites } from 'constants/favorites'
import type {
  RoutesSet,
  LatLng,
  routeSegments,
  routeDirections,
  routeCoordinates,
} 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;
  routeCoordinates: routeCoordinates[] | 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: [],
      routeCoordinates: [],
    };
  },
  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));
}
