import { colors } from '@/assets/styles/colors';
import styles from '@/styles/screens/tabs/contactos.styles';
import { AppleMaps, GoogleMaps } from 'expo-maps';
import { useMemo } from 'react';
import { Platform, Pressable, View } from 'react-native';

const MAP_ZOOM = 15;

const disabledGoogleUi = {
  scrollGesturesEnabled: false,
  zoomGesturesEnabled: false,
  rotationGesturesEnabled: false,
  tiltGesturesEnabled: false,
  zoomControlsEnabled: false,
  mapToolbarEnabled: false,
  compassEnabled: false,
  scaleBarEnabled: false,
};

const disabledAppleUi = {
  compassEnabled: false,
  scaleBarEnabled: false,
  myLocationButtonEnabled: false,
  togglePitchEnabled: false,
};

type Props = {
  lat: number;
  lng: number;
  title?: string;
  onPress: () => void;
};

export default function ContactMapPreviewNative({ lat, lng, title, onPress }: Props) {
  const cameraPosition = useMemo(
    () => ({
      coordinates: { latitude: lat, longitude: lng },
      zoom: MAP_ZOOM,
    }),
    [lat, lng]
  );

  const marker = useMemo(
    () => ({
      id: 'agency',
      coordinates: { latitude: lat, longitude: lng },
      title,
    }),
    [lat, lng, title]
  );

  return (
    <Pressable onPress={onPress} style={styles.mapImageWrap}>
      <View style={styles.mapImage} pointerEvents="none">
        {Platform.OS === 'ios' ? (
          <AppleMaps.View
            style={styles.mapImage}
            cameraPosition={cameraPosition}
            markers={[
              {
                ...marker,
                systemImage: 'mappin',
                tintColor: colors.vermelho,
              },
            ]}
            properties={{ selectionEnabled: false }}
            uiSettings={disabledAppleUi}
          />
        ) : (
          <GoogleMaps.View
            style={styles.mapImage}
            cameraPosition={cameraPosition}
            markers={[marker]}
            properties={{ selectionEnabled: false }}
            uiSettings={disabledGoogleUi}
          />
        )}
      </View>
    </Pressable>
  );
}