import * as React from 'react';
import { 
    View, 
    Text, 
    TouchableOpacity, 
    ScrollView, 
    Alert, 
    Dimensions } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import Crypto from '../../components/crypto.js';
import Elements from '../../components/elements.js';
import NetInfo from "../../components/netstatus";
import CustomOTPInput from '../../components/otpinput';
import REQUEST from '../../components/api/';
import Theme from '../../components/theme.style.js';
import DB from '../../components/storage/';
import CustomSafeArea from '../../components/safeArea.component';


class Setmpin extends React.Component {

    constructor(props) {
        super(props)
    }

    state = {
        loading: false,
        mpin: "",
        confirmMpin: "",
        valid: ""
    }

    componentDidMount() {
        DB.set('set_mpin', 'true', success => {}, error => {})
        console.log(this.props)
    }

    componentWillUnmount() {

    }

    checkValidMpin = () => {
        if(this.state.mpin.length < 4 || this.state.mpin == null) return false
        return this.state.mpin == this.state.confirmMpin
    }

    setAppMpin = () => {
        if(this.checkValidMpin()) {
            NetInfo.netstatus(async isConnected => {
                if(isConnected) {
                    this.setState({ loading: true })
                    this.requestSetMpin(success => {
                        DB.set('set_mpin', 'false', onSuccess => {}, onError => {})
                        this.getUserInfo(onSuccess => {
                            this.setState({ loading: false })
                            if(this.props.route.params == undefined) {
                                this.props.navigation.reset({
                                    index: 0,
                                    routes: [{name: 'Mpin'}],
                                })
                            } else {
                                if(
                                    this.props.route.params.type != undefined && 
                                    this.props.route.params.type == "addcard"
                                ) {
                                    this.props.navigation.reset({
                                        index: 0,
                                        routes: [{name: 'Mpin'}],
                                    })
                                } else {
                                    this.props.navigation.navigate("OnBoarding", { token: this.props.route.params?.token })
                                }
                            }
                        }, onError => {
                            this.setState({ loading: false })
                        })
                    }, error => {
                        Platform.OS == 'ios' ? setTimeout(() => {
                            Alert.alert("Mpin.", "Failed to set mpin. Please try again.")
                          }, 300) : Alert.alert("Mpin.", "Failed to set mpin. Please try again.")
                    })
                } else {
                    this.setState({ loading: false })
                    Elements.nointernet2()
                }
            })
        } else {
            Platform.OS == 'ios' ? setTimeout(() => {
                Alert.alert("Mpin.", "Please ensure that your MPIN is matched")
              }, 300) : Alert.alert("Mpin.", "Please ensure that your MPIN is matched")
        }
    }

    requestSetMpin = async (successCallback, errorCallback) => {
        const SESSION = await DB.session()
        const { mpin } = this.state
        const lcard_uuid = this.props.route.params?.sessiondata?.lcard_uuid || SESSION.user.lcard_uuid

        this.getCurrentUserInfo(async (onSuccess) => {
            let hash = onSuccess.data.customer_number.substring(0, 8)
            let ciphermpin = Crypto.encrypt(mpin, hash)
            const params = {
                lcard_uuid: lcard_uuid,
                mpin: ciphermpin
            }
            await REQUEST("setup_mpin", "post", {}, {}, params, function(data){
                console.log(data)
                successCallback(data)
            }, function(error){
                console.log(error)
                errorCallback(error)
            })
        }, (onError) => {
            errorCallback(onError)
        })
    }

    getCurrentUserInfo = async (successCallback, errorCallback) => {
        const SESSION = await DB.session()
        this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(data => {
            if(data.status == 1) {
                successCallback(data)
            } else {
                errorCallback({})
            }
        })
        .catch(error => errorCallback(error))
    }

    getUserInfo = async (successCallback, errorCallback) => {
        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 })
                    successCallback(data)
                    console.log("USER PROFILE SAVED ON ON BOARDING! ")
                }, error => {
                    this.setState({ loading: false })
                    errorCallback(error)
                    console.log("Error saving profile", error)
                })            
            }
        })
        .catch(error => errorCallback(error))
    }

    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: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : '#fff'}}>Set your mobile PIN</Text>
                        </View>
                    </View>
                </View>
                <Elements.loaderView 
                    title="Validating"
                    message="Please wait..."
                    isDarkMode={this.props.app_theme?.theme.dark}
                    backgroundColor={this.props.app_theme?.theme.colors.border}
                    color={this.props.app_theme?.theme.colors.text}
                    visible={this.state.loading} />
                <ScrollView style={{ flex: 1 }}>
                    <View style={{ flex: 1, marginTop: 45, }}>
                        <Text style={{ padding: 10, textAlign: 'center', fontFamily: 'arial', fontSize: 16, fontStyle: 'italic', marginBottom: 50, marginHorizontal: 30, fontWeight: 'bold', color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>To keep your app secure, you will be asked for an MPIN to open your app.</Text>
                        <View style={{ flex: 1, alignItems: 'center' }}>
                            <Text style={{ padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Enter 4-digit MPIN</Text>
                            <CustomOTPInput
                                containerStyle={{ marginBottom: 30 }} 
                                secureTextEntry={true}
                                textColor={this.props.app_theme?.theme.colors.text}
                                isDarkMode={this.props.app_theme?.theme.dark}
                                onChangeText={(v) => {
                                    this.setState({ mpin: v, valid: v.length == 4 ? true : false })
                                }}/>
                            <Text style={{ marginTop: 30, padding: 15, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 40, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : 'gray', marginBottom: 15 }}>Confirm 4-digit MPIN</Text>
                            <CustomOTPInput 
                                secureTextEntry={true}
                                textColor={this.props.app_theme?.theme.colors.text}
                                isDarkMode={this.props.app_theme?.theme.dark}
                                onChangeText={(v) => {
                                    this.setState({ confirmMpin: v, valid: v.length == 4 ? true : false })
                                }}/>
                            {(this.state.confirmMpin.length > 0 && !this.checkValidMpin()) && (
                                <Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 12, marginLeft: 45, color: Theme.colors.primary, alignSelf: 'flex-start', marginTop: 5 }}>Please ensure that your MPIN is matched</Text>
                            )}
                        </View>
                    </View>
                </ScrollView>
                <TouchableOpacity disabled={!this.checkValidMpin()} style={{ marginHorizontal: 30, padding: 20, backgroundColor: this.state.valid && this.checkValidMpin() ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15", alignItems: 'center', justifyContent: 'flex-end', borderRadius: 10, marginBottom: 10, elevation: this.state.valid ? 3 : 0 }} onPress={() => this.setAppMpin()}>
                    <Text style={{ fontFamily: 'arial', fontSize: 18, color: Theme.colors.white  }}>Submit</Text>
                </TouchableOpacity>
            </CustomSafeArea>
        )
    }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(Setmpin)