import React from 'react';
import { AppLoading } from 'expo';
import { Ionicons } from '@expo/vector-icons';
import * as Font from 'expo-font';

// Redux + Storage
import swimtrackerReducer from './state/Reducer';
import { createStore } from 'redux';
import { DeviceReduxCoupling } from './state/DeviceReduxCoupling';
import { Provider } from 'react-redux';
import AsyncStorage from '@react-native-community/async-storage';
import { persistStore, persistReducer } from 'redux-persist'
import hardSet from 'redux-persist/lib/stateReconciler/hardSet'
import { PersistGate } from 'redux-persist/integration/react'

// Navigation
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Own views
import MainMenuView from "./views/MainMenuView";
import SettingsView from "./views/SettingsView";
import TrainingView from "./views/TrainingView";
import LastSessionsView from "./views/LastSessionsView";


const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    stateReconciler: hardSet,
};

const persistedReducer = persistReducer(persistConfig, swimtrackerReducer)
const store = createStore(persistedReducer);
const persistor = persistStore(store);
const Stack = createStackNavigator();

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: false,
        };
    }

    async componentDidMount() {
        await Font.loadAsync({
            Roboto: require('native-base/Fonts/Roboto.ttf'),
            Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
            ...Ionicons.font,
        });
        this.setState({ isReady: true });
        this.device = new DeviceReduxCoupling(store);
    }

    render() {
        if (!this.state.isReady) {
            return <AppLoading />;
        }
        const screenOptions = {
            headerShown: false,
        };
        return (
            <Provider store={store}>
                <PersistGate loading={<AppLoading />} persistor={persistor}>
                    <NavigationContainer>
                        <Stack.Navigator initialRouteName="Home">
                            <Stack.Screen
                                name="Home"
                                component={MainMenuView}
                                options={screenOptions}
                            />
                            <Stack.Screen
                                name="Settings"
                                component={SettingsView}
                                options={screenOptions}
                            />
                            <Stack.Screen
                                name="Training"
                                component={TrainingView}
                                options={screenOptions}
                            />
                            <Stack.Screen
                                name="LastSessions"
                                component={LastSessionsView}
                                options={screenOptions}
                            />
                        </Stack.Navigator>
                    </NavigationContainer>
                </PersistGate>
            </Provider>
        );
    }
}