import React, {useState} from 'react';
import {StyleSheet, Text, View, Image, StatusBar, AsyncStorage} from 'react-native';
import {AppLoading} from "expo";
import {Asset} from 'expo-asset';
import {Provider} from 'react-redux';
import * as Font from 'expo-font'
import {Ionicons} from "@expo/vector-icons";
import {NavigationContainer} from "@react-navigation/native";
import store from './store';
import StackNavigation from "./navigations/StackNavigation";
import {AuthProvider} from "./AuthContext";
import host from './env';
import axios from "axios";

const cacheImages = (images) => {
    return images.map((image) => {
        if (typeof image === 'string') {
            return Image.prefetch(image);
        } else {
            return Asset.fromModule(image).downloadAsync();
        }
    })
};

const cacheFonts = (fonts) => {
    return fonts.map((font) => {
        return Font.loadAsync(font);
    })
};

const App = () => {
    const [isReady, setIsReady] = useState(false);
    const [user, setUser] = useState('');

    const loadAssets = async () => {
        const images = cacheImages(
            ['https://images.unsplash.com/photo-1532278951723-545f655c97f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60']
        );
        const fonts = cacheFonts([Ionicons.font]);

        const cookie = await AsyncStorage.getItem('cookie');
        console.log('cookie', cookie);
        if (cookie) {
            try {
                axios.defaults.headers.Cookie = cookie;
                console.log('user/loadMe 요청보냄', `http://${host}:4001/user/loadMe`);
                const res = await axios.get(`http://${host}:4001/user/loadMe`);
                const {user} = res.data;
                console.log(user);
                setUser(user);
            } catch (e) {
                console.error(e);
            }
        }

        return Promise.all([images, fonts]);
    };

    const onFinish = () => {
        setIsReady(true);
    };
    const onError = (err) => {
        console.error(err)
    };
    return (
        <>
            {isReady
                ?
                // <Provider store={store}>
                //     <NavigationContainer>
                //         <StatusBar barstyle={'light-content'}/>
                //         <StackNavigation/>
                //     </NavigationContainer>
                // </Provider>
                <Provider store={store}>
                    <AuthProvider user={user}>
                        <NavigationContainer>
                            <StatusBar barstyle={'light-content'}/>
                            <StackNavigation/>
                        </NavigationContainer>
                    </AuthProvider>
                </Provider>
                :
                <AppLoading
                    startAsync={loadAssets}
                    onFinish={onFinish}
                    onError={onError}
                />
            }
        </>
    );
};


export default App;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});