import { StyleSheet } from 'react-native'
import { ThemedView } from '@/components/ThemedView'
import { useEffect, useState } from 'react'
import "maplibre-gl/dist/maplibre-gl.css"

import * as Location from 'expo-location'
import Map from '@/components/map'
import { ThemedText } from '@/components/ThemedText'

export default function MapScreen() {
  const [location, setLocation] = useState<Location.LocationObject | null>(null)
  const [locationAccessGranted, setLocationAccessGranted] = useState(false)

  useEffect(() => {
    async function watchPosition() { 
      let { status } = await Location.requestForegroundPermissionsAsync()
      if (status !== 'granted') {
        setLocationAccessGranted(false)
        alert("Vous devez activer votre géolocalisation pour utiliser l'application.")
        return
      }
      setLocationAccessGranted(true)
      await Location.watchPositionAsync({accuracy: Location.Accuracy.BestForNavigation}, location => setLocation(location))
    }
    watchPosition()
  }, [])

  return (
    <ThemedView style={styles.page}>
      {locationAccessGranted ? <Map location={location} /> : <ThemedText>La géolocalisation est requise pour utiliser la carte.</ThemedText>}
    </ThemedView>
  )
}

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