import React from 'react';
import { View } from 'react-native';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
  PointAnnotation,
} from '@rnmapbox/maps';

export default function BugReportExample() {
  const [selected, setSelected] = React.useState(false);
  React.useEffect(() => {
    console.log('Selected:', selected);
  }, [selected]);

  return (
    <MapView style={{ flex: 1 }} onPress={() => setSelected(false)}>
      <Camera
        defaultSettings={{
          centerCoordinate: [-74.00597, 40.71427],
          zoomLevel: 14,
        }}
      />
      <PointAnnotation
        id="foo"
        coordinate={[-74.00597, 40.71427]}
        selected={selected}
        onSelected={() => {
          console.log('onSelected');
          setSelected(true);
        }}
        onDeselected={() => {
          console.log('onDeselected');
          setSelected(false);
        }}
      >
        <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
      </PointAnnotation>
    </MapView>
  );
}