import React, {
  forwardRef,
  useImperativeHandle,
  useRef,
  useCallback,
} from 'react';
import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
import DgisMapNativeComponent, {
  Commands,
  type InitialRegion,
  type Point,
} from './specs/DgisMapNativeComponent';

export interface DgisMapViewProps {
  style?: StyleProp<ViewStyle>;
  center?: InitialRegion;
  onTap?: (point: Point) => void;
  onLongTouch?: (point: Point) => void;
  onMapLoaded?: () => void;
  children?: React.ReactNode;
}

export interface DgisMapViewRef {
  fitAllMarkers: (options?: { duration?: number }) => void;
  setZoom: (zoom: number, duration?: number) => void;
  zoomIn: () => void;
  zoomOut: () => void;
}

const DgisMapView = forwardRef<DgisMapViewRef, DgisMapViewProps>(
  ({ style, center, onTap, onLongTouch, onMapLoaded, children }, ref) => {
    const nativeRef = useRef(null);

    useImperativeHandle(ref, () => ({
      fitAllMarkers: (options?: { duration?: number }) => {
        if (nativeRef.current) {
          Commands.fitAllMarkers(nativeRef.current, [
            { duration: options?.duration },
          ]);
        }
      },
      setZoom: (zoom: number, duration: number = 500) => {
        if (nativeRef.current) {
          Commands.setZoom(nativeRef.current, [{ zoom, duration }]);
        }
      },
      zoomIn: () => {
        if (nativeRef.current) {
          Commands.zoomIn(nativeRef.current);
        }
      },
      zoomOut: () => {
        if (nativeRef.current) {
          Commands.zoomOut(nativeRef.current);
        }
      },
    }));

    const handleTap = useCallback(
      (event: { nativeEvent: Point }) => {
        onTap?.(event.nativeEvent);
      },
      [onTap]
    );

    const handleLongTouch = useCallback(
      (event: { nativeEvent: Point }) => {
        onLongTouch?.(event.nativeEvent);
      },
      [onLongTouch]
    );

    const handleMapLoaded = useCallback(() => {
      onMapLoaded?.();
    }, [onMapLoaded]);

    return (
      <DgisMapNativeComponent
        ref={nativeRef}
        style={[styles.map, style]}
        center={center}
        onTap={handleTap}
        onLongTouch={handleLongTouch}
        onMapLoaded={handleMapLoaded}
      >
        {children}
      </DgisMapNativeComponent>
    );
  }
);

const styles = StyleSheet.create({
  map: {
    flex: 1,
  },
});

DgisMapView.displayName = 'DgisMapView';

export default DgisMapView;