import {
  forwardRef,
  useImperativeHandle,
  useRef,
  useCallback,
  useMemo,
} from 'react';
import MarkerNativeComponent, { Commands } from './specs/MarkerNativeComponent';
import { getImageUri } from './utils';
import type { ImageSourcePropType } from 'react-native';

export interface MarkerPoint {
  latitude: number;
  longitude: number;
}

export interface MarkerAnchor {
  x: number;
  y: number;
}

export interface MarkerViewProps {
  point: MarkerPoint;
  iconSource?: ImageSourcePropType;
  anchor?: MarkerAnchor;
  iconOpacity?: number;
  iconWidth?: number;
  onPress?: () => void;
}

export interface MarkerViewRef {
  animatedMoveTo: (coords: MarkerPoint, duration?: number) => void;
}

const MarkerView = forwardRef<MarkerViewRef, MarkerViewProps>(
  ({ point, iconSource, anchor, iconOpacity, iconWidth, onPress }, ref) => {
    const nativeRef = useRef(null);

    useImperativeHandle(ref, () => ({
      animatedMoveTo: (coords: MarkerPoint, duration: number = 500) => {
        console.log('animatedMoveTo', coords, duration);
        if (nativeRef.current) {
          Commands.animatedMoveTo(nativeRef.current, [{ coords, duration }]);
        }
      },
    }));

    const handlePress = useCallback(() => {
      onPress?.();
    }, [onPress]);

    const imageUri = useMemo(() => getImageUri(iconSource), [iconSource]);

    return (
      <MarkerNativeComponent
        ref={nativeRef}
        point={point}
        iconSource={imageUri}
        anchor={anchor}
        iconOpacity={iconOpacity}
        iconWidth={iconWidth}
        onPress={handlePress}
      />
    );
  }
);

MarkerView.displayName = 'MarkerView';

export default MarkerView;