interface Coordinates {
  lat: number;
  lng: number;
};


const interpolateCoordinates = (interpolation: number = 0.5): {
  get: () => Coordinates | null;
  set: (newValue: Coordinates) => Coordinates;
} => {
  // Initial states
  let lastValue: Coordinates | null = null;
  let currentValue: Coordinates | null = null;
  
  /**
   * Gets the interpolated coordinates between the last and current values
   */
  const get = (): Coordinates | null => {
    if (!lastValue || !currentValue) return null;
    
    // Calculate difference in stored values
    const latDiff = (currentValue.lat - lastValue.lat);
    const lngDiff = (currentValue.lng - lastValue.lng);
    
    // Calculate interpolated values
    return {
      lat: lastValue.lat + (latDiff * interpolation),
      lng: lastValue.lng + (lngDiff * interpolation),
    };
  };
  
  /**
   * Stores the current interpolation as the last value and updates the current value
   */
  const set = (newValue: Coordinates): Coordinates => {
    // Update last value with current interpolated value if available
    const interpolatedValue = get() ?? newValue;
    lastValue = {...interpolatedValue};
    
    // Update current value
    currentValue = {...newValue};
    
    // Return new interpolated value
    return get();
  };
  
  
  return {
    get,
    set,
  };
};


// Demo
const coordinates = interpolateCoordinates(0.1);

const targetRaw = document.getElementById('raw');
const targetInterpolated = document.getElementById('interpolated');

setInterval(() => {
  // Generate random coordinates
  const newCoordinates: Coordinates = {
    lat: Math.random() * 100,
    lng: Math.random() * 100,
  };
  
  // Use raw new coordinates
  targetRaw.style.top = `${newCoordinates.lat}%`;
  targetRaw.style.left = `${newCoordinates.lng}%`;
  
  // Interpolate coordinates
  const interpolated = coordinates.set(newCoordinates);
  targetInterpolated.style.top = `${interpolated.lat}%`;
  targetInterpolated.style.left = `${interpolated.lng}%`;
}, 200);