import { withFastCompare } from '../../utils';
import type { MarkerProps } from '../../bare/components/Marker';
import { Marker as YaMarker } from '../../bare';
import { useEffect } from 'react';
import Reanimated, {
  useAnimatedProps,
  useSharedValue,
  withTiming,
  // @ts-ignore peer dependency
} from 'react-native-reanimated';

const AnimatedYaMarker = withFastCompare(
  Reanimated.createAnimatedComponent(YaMarker)
);

export const AnimatedMarker = withFastCompare((props: MarkerProps) => {
  const { point, ...p } = props;
  const lat = useSharedValue(point.lat);
  const lon = useSharedValue(point.lon);

  const animatedProps = useAnimatedProps(() => {
    return {
      point: {
        lat: lat.value,
        lon: lon.value,
      },
    };
  });

  useEffect(() => {
    lon.value = withTiming(point.lon, { duration: 1000 });
    lat.value = withTiming(point.lat, { duration: 1000 });
  }, [lat, lon, point]);

  // @ts-ignore
  return <AnimatedYaMarker {...p} animatedProps={animatedProps} />;
});