import { Platform, StyleSheet } from 'react-native'
import { ThemedView } from '@/components/ThemedView'

export default function MapScreen() {
  if (Platform.OS === "web") {
    const maplibre = require('react-map-gl/maplibre')
    const Map = maplibre.Map
    return <ThemedView style={styles.page}>
        <Map
        initialViewState={{
          longitude: 0,
          latitude: 0,
          zoom: 1
        }}
        mapStyle="https://demotiles.maplibre.org/style.json"
      />
    </ThemedView>
  }
  else {
    const MapLibreGL = require('@maplibre/maplibre-react-native')
    MapLibreGL.setAccessToken(null)
    return (
      <ThemedView style={styles.page}>
        <MapLibreGL.MapView
            style={styles.map}
            logoEnabled={false}
            styleURL="https://demotiles.maplibre.org/style.json"
            children={[]}
          />
      </ThemedView>
    )
  }
}

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