import * as React from 'react';
import { View, Text, TouchableOpacity, Image, SafeAreaView } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import NetInfo from "../../components/netstatus";
import Theme from '../../components/theme.style.js';
import Assets from '../../components/assets.manager.js';
import DB from '../../components/storage';
import CustomSafeArea from '../../components/safeArea.component';


class SuccessUpdateMpin extends React.Component {

    constructor(props) {
        super(props)
    }

    state = {
        loading: false
    }

    componentDidMount() {
        this.init()
    }

    componentWillUnmount() {

    }

    init = async () => {
        NetInfo.netstatus(isConnected => {
            if(isConnected) {
              this.getUserInfo()
            }
        })
    }

    getUserInfo = async () => {
        const SESSION = await DB.session()
        this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(data => {
            if(data.status == 1) {
                DB.updateProfile(data, res => {
                    this.setState({ loading: false })
                }, err => {
                    Alert.alert("Information", `\n${err.message}`)
                    this.setState({ loading: false })
                })            
            }
        })
        .catch(error => {})
    }

    backToMpin = () => {
        this.props.navigation.reset({
            index: 0,
            routes: [{name: 'Mpin'}],
        })
    }

    render() {
        return(
            <CustomSafeArea>
                <View>
                    <View style={{flexDirection: 'row', height: this.props.height ? this.props.height : 55, padding: 5, backgroundColor: Theme.colors.primary, top: Platform.OS =='ios' && this.props.top ? this.props.top : 0}}>
                        <View style={{flex:3, justifyContent: 'center'}}>
                            <Text style={{textAlign:'center', fontSize: 17, color: '#fff'}}></Text>
                        </View>
                    </View>
                </View>                
                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={Assets.icons.successmpinupdate} style={{ width: 200, height: 200 }}/>
                    <Text style={{ color: Theme.colors.primary, fontSize: 22, fontFamily: 'arial', textAlign: 'center', padding: 30, fontWeight: 'bold' }}>Reset MPIN Successful!</Text>
                    <Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black, fontSize: 17, fontFamily: 'arial', textAlign: 'center', padding: 10, marginHorizontal: 30 }}>You have successfully reset your MPIN! For your protection, please do not share your MPIN to anyone.</Text>
                </View>
                <TouchableOpacity style={{ marginHorizontal: 30, padding: 20, backgroundColor: Theme.colors.primary, alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: 3 }} onPress={() => this.backToMpin()}>
                    <Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white  }}>OK</Text>
                </TouchableOpacity>
            </CustomSafeArea>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        userinfo: state.appUserInfoReducer.userinfo,
        app_theme: state.appThemeReducer.theme
    }
}
  
const mapDispatchToProps = {
    saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(SuccessUpdateMpin)