import MapView, { Marker } from 'react-native-maps'
import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import AsyncStorage from "@react-native-async-storage/async-storage";

const L_KEY = 'locs_key'

export default function Home(props) {
  const [markers, setMarkers] = React.useState([])
  const startFn = async () => {
    setMarkers(JSON.parse(await AsyncStorage.getItem(L_KEY)))
  };
  React.useEffect(() => {startFn()}, [])
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: 49.9741841,
        longitude: 20.1000589,
        latitudeDelta: 0.001,
        longitudeDelta: 0.001,
      }}
    >
      {markers.filter(m => m.c).map(m => {
        return <Marker
          coordinate={{
            latitude: m.l.coords.latitude,
            longitude: m.l.coords.longitude,
          }}
          title={""}
          description={""}
          key={m.l.timestamp}
        />
      })}
    </MapView>
  )
}

const styles = StyleSheet.create({
  cont: {
    flexDirection: "column",
    marginTop: 10,
    paddingTop: 10,
    backgroundColor: "#3D54BB",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
  },
})