import { StyleSheet } from 'react-native'
import "maplibre-gl/dist/maplibre-gl.css"
import { useBackgroundPermissions } from 'expo-location'
import Map from '@/components/Map'
import { Surface, Text } from 'react-native-paper'

export default function MapScreen() {
  const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions()
  if (!backgroundStatus?.granted && backgroundStatus?.canAskAgain)
    requestBackgroundPermission()

  return (
    <Surface style={styles.page}>
      {backgroundStatus?.granted ? <Map /> : <Text>La géolocalisation est requise pour utiliser la carte.</Text>}
    </Surface>
  )
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  map: {
    flex: 1,
    alignSelf: 'stretch',
  },
})