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

// Redux
import swimtrackerReducer from './state/Reducer';
import { createStore } from 'redux';
import { DeviceReduxCoupling } from './state/DeviceReduxCoupling';
import { Provider } from 'react-redux';

import ThemedStackNavigation from './components/ThemedStackNavigation';


const store = createStore(swimtrackerReducer);
//const deviceReduxCoupling = new DeviceReduxCoupling(store);


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 />;
        }

        return (
            <Provider store={store}>
                <ThemedStackNavigation/>
            </Provider>
        );
    }
}