import * as React from 'react';
import { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList, Switch, ActivityIndicator, Image } from 'react-native';
import * as Location from 'expo-location';
import { useFonts } from "expo-font";
import AsyncStorage from "@react-native-async-storage/async-storage";

import Fira from "../assets/Fira.ttf";
import LocIcon from "../assets/LocIcon.png";

const L_KEY = 'locs_key'

export default function Main(props) {
  const [fontLoaded] = useFonts({
    Fira,
  });
  const [isLoading, setIsLoading] = useState(false);
  const [locs, _setLocs] = useState([]);
  const setLocs = async (nls) => {
    await AsyncStorage.setItem(L_KEY, JSON.stringify(nls))
    _setLocs(nls)
  }
  const saveLocs = async () => {
    await AsyncStorage.setItem(L_KEY, JSON.stringify(locs))
  }
  useEffect(() => {
    (async () => {
      const x = JSON.parse(await AsyncStorage.getItem(L_KEY))
      if (x) _setLocs(x);

      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        alert("Permission to access location was denied");
      }
    })();
  }, []);
  // useEffect(() => console.log(locs))
  const getPosition = async () => {
    let loc = { c: false, l: await Location.getCurrentPositionAsync(), }
    setLocs([...locs, loc])
  };
  const [switchState, setSwitchState] = useState(false);
  const pins = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  if (isLoading) {
    return (
      <ActivityIndicator style={{ top: "50%" }} color="#00F" size="large" animating={isLoading} />
    )
  }
  return (
    <View style={styles.cont}>
      <View style={styles.nav}>
        <View style={styles.navEl}>
          <TouchableOpacity onPress={getPosition} style={[styles.navBtn, { flex: 2 }]}><Text style={[styles.navTxtSm, fontLoaded ? { fontFamily: "Fira" } : { backgroundColor: "red" }]}>LOAD{'\n'}AND SAVE{'\n'}POSITION</Text></TouchableOpacity>
          <TouchableOpacity onPress={() => setLocs([])} style={styles.navBtn}><Text style={styles.navTxtSm}>REMOVE{'\n'}ALL DATA</Text></TouchableOpacity>
        </View>
        <View style={styles.map}>
          <TouchableOpacity onPress={async () => { await saveLocs(); props.navigation.navigate("mapV") }} style={styles.navBtnB}><Text style={styles.navTxt}>GO TO THE MAP</Text></TouchableOpacity>
          <Switch
            style={styles.mapSwitch}
            trackColor={{ true: "#AEEDF0", false: "lightgray" }}
            thumbColor={switchState ? "#00BFC5" : "white"}
            value={switchState}
            onValueChange={(a) => {
              setLocs(locs.map(l => { l.c = a; return l }))
              setSwitchState(a)
            }}
          />
        </View>
      </View>
      <FlatList
        data={locs}
        renderItem={({ item }) => {
          console.log("item", item)
          return (
            <View style={{ height: 130, width: "100%", position: "relative" }}>
              <Image source={LocIcon} style={{ width: 90, height: 90, top: 13 }} />
              <View style={{ top: -66, left: 100 }}>
                <Text style={[styles.itemTxt, { color: "#3D54BB" }]}>- Timestamp {item.l.timestamp}</Text>
                <Text style={[styles.itemTxt]}>- Latitude {item.l.coords.latitude}</Text>
                <Text style={[styles.itemTxt]}>- Longitude {item.l.coords.longitude}</Text>
              </View>
              <Switch
                style={{ top: -120 }}
                trackColor={{ true: "#AEEDF0", false: "lightgray" }}
                thumbColor={item.c ? "#00BFC5" : "white"}
                value={item.c}
                onValueChange={(a) => {
                  setLocs(locs.map(l => {
                    if (l.l.timestamp === item.l.timestamp)
                      l.c = a
                    return l
                  }
                  ))
                }}
              />
            </View>
          )
        }}
        keyExtractor={p => {
          console.log('p', p);
          p.l.timestamp
        }}
        style={styles.list}
      />
    </View >
  )
}

const styles = StyleSheet.create({
  cont: {
    flex: 1,
    margin: 30,
  },
  nav: {
    flex: 1,
    flexDirection: "column",
    flexWrap: "wrap",
    // backgroundColor: "red",
  },
  navEl: {
    flex: 1,
    flexDirection: "row",
    // backgroundColor: "blue",
  },
  navTxt: {
    fontSize: 26,
    textAlign: "center",
    fontWeight: "bold",
  },
  navTxtSm: {
    fontSize: 26,
    fontWeight: "bold",
  },
  navBtn: {
    flex: 1,
  },
  map: {
    // backgroundColor: "orange",
    flex: 1,
    flexDirection: "row",
  },
  mapSwitch: {
    flex: 1,
    height: 65,
  },
  navBtnB: {
    flex: 1,
  },
  list: {
    // height: 414,
    flex: 1,
    // margin: 9,
    paddingBottom: 170,
    // height: "100%",
    // marginBottom: -20,
  },
  itemTxt: {
    fontSize: 15,
    fontWeight: "bold",
  },
})