import React, {Component} from 'react'
import {StyleSheet, View, Text, Image, DeviceEventEmitter} from 'react-native'
import SyncStorage from 'sync-storage';
import {connect} from 'react-redux'
import {NavigationActions, createAction, ScreenUtil} from '../utils'
import {ComponentsStyles} from '../components'

@connect(auth => ({...auth}))
class Welcome extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        const {navigation, dispatch} = this.props;

        SyncStorage.init().then((data) => {
            const credential = SyncStorage.get('credential');
            let resetAction;
            if (credential && credential['token'] !== undefined) {
                dispatch({
                    type: 'auth/authLogin',
                    payload: credential,
                    callback: () => {
                        resetAction = NavigationActions.navigate({
                            routeName: "Main",
                            actions: [NavigationActions.navigate({routeName: 'SalesHome'})],
                        })
                        navigation.dispatch(resetAction);
                    },
                    unLogin: () => {
                        resetAction = NavigationActions.navigate({
                            routeName: "Login",
                            actions: [NavigationActions.navigate({routeName: 'Login'})],
                        })
                        navigation.dispatch(resetAction);
                    }
                })
            } else {
                resetAction = NavigationActions.navigate({
                    routeName: "Login",
                    actions: [NavigationActions.navigate({routeName: 'Login'})],
                })
                navigation.dispatch(resetAction);
            }
            // this.timer = setTimeout(
            //     () => {
            //         navigation.dispatch(resetAction);
            //     },
            //     2000
            // );

        });
    }

    componentWillUnmount() {
        // this.timer && clearTimeout(this.timer);
    }

    render() {
        return (
            <View style={ComponentsStyles.container}>
                <View style={styles.up}>
                    <Image source={require('../../assets/images/logo.png')} style={styles.logo}/>
                </View>
                <View style={styles.down}>
                    <Text style={styles.rights}>©2021 装集客 All rights reserved.</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    up: {
        flex: 4,
        paddingTop: ScreenUtil.scaleSize(80),
        textAlign: 'center',
        alignItems: 'center',
    },
    logo: {
        width: ScreenUtil.scaleSize(80),
        height: ScreenUtil.scaleSize(80),
    },
    title: {
        fontSize: ScreenUtil.scaleSize(24),
        color: '#03C762',
        textAlign: 'center',
    },
    down: {
        flex: 1,
        textAlign: 'center',
        justifyContent: 'flex-end'
    },
    rights: {
        height: 50,
        fontSize: ScreenUtil.scaleSize(12),
        color: '#aaaaaa',
        textAlign: 'center',
    }
})


export default Welcome