import { StyleSheet } from 'react-native'
import "maplibre-gl/dist/maplibre-gl.css"
import { useBackgroundPermissions } from 'expo-location'
import Map from '@/components/Map'
import { FAB, Surface, Text } from 'react-native-paper'
import { useGame } from '@/hooks/useGame'
import { FontAwesome6 } from '@expo/vector-icons'
import FreeChaseBanner from '@/components/FreeChaseBanner'
import { View } from 'react-native'

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

  const game = useGame()

  return (
    <Surface style={styles.page}>
      <View style={styles.container}>
        {backgroundStatus?.granted ? <Map /> : <Text>La géolocalisation est requise pour utiliser la carte.</Text>}
        <FAB
            style={styles.moneyBadge}
            visible={game.gameStarted || game.money > 0}
            icon={(props) => <FontAwesome6 {...props} name='coins' size={20} />}
            color='black'
            label={`${game.money}`}
            onPress={() => {}} />
        <FAB
            style={styles.statusBadge}
            visible={game.gameStarted || game.money > 0}
            size='small'
            color='black'
            icon={game.currentRunner ? 'run-fast' : () => <FontAwesome6 name='cat' size={20} />}
            label={game.currentRunner ? "Coureuse" : "Poursuiveuse"}
            onPress={() => {}} />
      </View>
      <FreeChaseBanner />
    </Surface>
  )
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
  },
  container: {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    flex: 1,
    alignSelf: 'stretch',
  },
  moneyBadge: {
    position: 'absolute',
    top: 40,
    right: 20,
    backgroundColor: 'orange',
  },
  statusBadge: {
    position: 'absolute',
    top: 40,
    left: 20,
    backgroundColor: 'pink',
  },
})