import React, { PureComponent } from 'react'
import { View, StatusBar, StyleSheet } from 'react-native'
import { StorageService, } from './src/others'
import { store, } from './src/redux/store'
import { AppGlobalAC, } from './src/redux/actionCreators'
import Colors from './src/constants/Colors'



export default class App extends PureComponent
{
    constructor(props)
    {
        super(props)
        this.initialMethodsForStartApp = this.initialMethodsForStartApp.bind(this)

        this.state = {
            MainComponent : null,
            isAppReady : false
        }
    }


    componentDidMount()
    {
        this.initialMethodsForStartApp()
    }


    async initialMethodsForStartApp()
    {
        try {
            await this.fillGlobalStates()

            this.setState({
                MainComponent : (await import('./AppStart.js')).default,
                isAppReady: true,
            })
        }
        catch(err)
        {
            this.setState({
                isAppReady: false,
            })
        }
    }

    async fillGlobalStates()
    {
        let voicePrankCategory = await StorageService.getVoicePrankCategory()
        store.dispatch(AppGlobalAC.changeVoicePrankCategory(voicePrankCategory))
    }


    render()
    {
        if(!this.state.isAppReady)
            return null // <LaunchPage/>

        return (
            <>
                <StatusBar
                    barStyle = 'dark-content'
                    backgroundColor = { Colors.d_Header }
                />

                <View style={ styles.appView }>

                    <this.state.MainComponent/>

                </View>
            </>
        )
    }

}



const styles = StyleSheet.create({
    appView: {
        flex: 1,
    },
})