import { Ref, unref } from 'vue';

export const useMapTrackPlayBack = (mapInstance: Ref<Nullable<Recordable>>) => {
  const positionList: Record<'lng' | 'lat', number>[] = [];

  const drawLine = (position: Record<'lng' | 'lat', number>) => {
    try {
      if (!position.lat || !position.lng) return;
      positionList.push(position);
      marketPoint(position);
      if (positionList.length === 1) return;

      const point: any[] = [];
      const BMapGL = (window as any).BMapGL;

      for (const { lng, lat } of positionList.slice(-2)) {
        point.push(new BMapGL.Point(lng, lat));
      }

      const pl = new BMapGL.Polyline(point);
      const BMapGLLib = (window as any).BMapGLLib;

      const duration = 2000;
      const delay = 300;
      const trackAni = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, {
        overallView: true,
        tilt: 30,
        duration,
        delay,
      });
      trackAni?.start?.();
    } catch (error) {
      throw error;
    }
  };

  function marketPoint(params: Partial<Record<'lng' | 'lat', number>>) {
    const { lng, lat } = params;
    if (![lng, lat].every(Boolean)) return;
    const BMap = (window as any).BMapGL;
    if (!BMap) return;
    const marker = new BMap.Marker(new BMap.Point(lng, lat));
    unref(mapInstance)?.centerAndZoom(new BMap.Point(lng, lat));
    unref(mapInstance)?.addOverlay(marker);
  }

  return { drawLine };
};