import { StatusBar } from "expo-status-bar";
import { View, Text } from "react-native";
import Login from "./screen/loginScreen/Login";
import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-expo';
import *as SecureStore from "expo-secure-store";
import * as Location from 'expo-location';
import { NavigationContainer } from "@react-navigation/native";
import HomeNavigator from "./Navigation/HomeNavigator";
import { useEffect, useState } from "react";
import { UserLocationContext } from "./context/UserLocationContext";


const tokenCache = {
  async getToken(key){
    try {
      return SecureStore.getItemAsync(key);
    } catch (error) {
      return null;
    }
  },
  async saveToken(key, value){
    try {
      return SecureStore.setItemAsync(key, value);
    } catch (error) {
      return;
    }
  },
}


export default function Index() {
  const PUBLIC_KEY = process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;

  //use current location
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location.coords);
    })();
  }, []);

  let text = 'Waiting..';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <ClerkProvider tokenCache={tokenCache} publishableKey={PUBLIC_KEY}>
      <UserLocationContext.Provider value={{location, setLocation}}>
      <View style={{flex: 1, backgroundColor: 'white'}}>
        <StatusBar style="auto"/>
        <SignedIn>
          <NavigationContainer independent={true}>
            <HomeNavigator />
          </NavigationContainer>
        </SignedIn>
        <SignedOut>
          <Login/>   
        </SignedOut>
      </View>
      </UserLocationContext.Provider>
    </ClerkProvider>
  );
}