import React, { useRef } from 'react';
import { View, TouchableOpacity, StyleSheet } from 'react-native';
import * as MapLibreRN from '@maplibre/maplibre-react-native';
import { useNavigation } from '@react-navigation/native';
import { Colors } from 'src/theme';
import { VECTOR_MAP_HOST } from 'src/constants';
import { NAVIGATION_PAGES } from 'src/types';

const MessageLocation = ({
  props,
  lat,
  lng,
  onLongPress
}: {
  props: any;
  lat: number;
  lng: number;
  onLongPress: (currentMessage: any, props: any) => void;
}) => {
  const navigation = useNavigation();
  const mapRef = useRef<MapLibreRN.MapViewRef>(null);
  const cameraRef = useRef<MapLibreRN.CameraRef>(null);

  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() =>
        navigation.navigate(...([NAVIGATION_PAGES.FULL_MAP_VIEW, { lat, lng }] as never))
      }
      onLongPress={() => onLongPress(props.currentMessage, props)}
    >
      <MapLibreRN.MapView
        ref={mapRef}
        style={styles.map}
        mapStyle={VECTOR_MAP_HOST + '/nomadmania-maps.json'}
        rotateEnabled={false}
        attributionEnabled={false}
        scrollEnabled={false}
        zoomEnabled={false}
        pitchEnabled={false}
      >
        <MapLibreRN.Camera
          ref={cameraRef}
          defaultSettings={{ centerCoordinate: [lng, lat], zoomLevel: 10 }}
        />
        <MapLibreRN.MarkerView coordinate={[lng, lat]}>
          <View
            style={{
              width: 20,
              height: 20,
              borderRadius: 10,
              backgroundColor: Colors.ORANGE,
              borderWidth: 2,
              borderColor: Colors.WHITE
            }}
          />
        </MapLibreRN.MarkerView>
      </MapLibreRN.MapView>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 150,
    borderRadius: 10,
    overflow: 'hidden'
  },
  map: {
    flex: 1
  }
});

export default MessageLocation;