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


class Setnewmpin extends React.Component {

    constructor(props) {
        super(props)
    }

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

    componentDidMount() {
        
    }

    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 => {
                        this.getUserInfo(onSuccess => {
                            this.setState({ loading: false })
                            this.props.navigation.navigate('SuccessUpdateMpin')
                        }, onError => {
                            this.setState({ loading: false })
                        })
                    }, error => {
                        this.setState({ loading: false })
                        Platform.OS == 'ios' ? setTimeout(() => {
                            Alert.alert("New Mpin.", "Failed to set mpin. Please try again.")
                        }, 300) : Alert.alert("New Mpin.", "Failed to set mpin. Please try again.")
                    })
                } else {
                    this.setState({ loading: false })
                    Elements.nointernet2(this.props)
                }
            })
        } 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 { mpin } = this.state
        this.getCurrentUserInfo(async (onSuccess) => {
            let hash = onSuccess.data.customer_number.substring(0, 8)
            let ciphermpin = Crypto.encrypt(mpin, hash)
            const params = {
                lcard_uuid: this.props.route.params.sessiondata.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)
                }, error => {
                    this.setState({ loading: false })
                    errorCallback(error)
                })            
            }
        })
        .catch(error => errorCallback(error))
    }

    onInputFocus = (x) => {
        this.setState({ activeInput: x })
    }

    onBackToPrevious = () => {
        Alert.alert(
            '',
            'Are you sure you want to cancel?',
            [
                {
                    textStyle: 'cancel',
                    text: 'Cancel'
                },
                {
                    text: 'Ok',
                    onPress: async () => {
                        this.props.navigation.navigate('Mpin')
                    },
                },
            ],
            {cancelable: true},
        );
    }

    render() {
        return(
            <CustomSafeArea>
                <CustomHeader title="Account Recovery" menu={false} back={true} backscreen="" navigation={this.props.navigation} />

                <KeyboardAvoidingView 
                    style={{flex: 1}}
                    behavior='padding'
                    keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
                >
                    <ScrollView style={{ flex: 1 }}>
                        <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} />
                        <View style={{ flex: 1, marginTop: 25, }}>
                            <Text style={{ textAlign: 'center', fontFamily: 'arial', fontSize: 20, marginBottom: 10, marginHorizontal: 30, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>Set new MPIN</Text>
                            <Text style={{ padding: 5, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 35, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>In order to protect your account, make sure your password:</Text>
                            <Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Is not weak and easy to guess.</Text>
                            <Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Do not use MPIN such as 1234.</Text>
                            <Text style={{ padding: 1, textAlign: 'left', fontFamily: 'arial', fontSize: 16, marginBottom: 30, marginHorizontal: 45, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>- Do not use your birthdate.</Text>
                            
                            <Text style={{ padding: 10, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 35, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>New MPIN</Text>
                            <TextInput
                                returnKeyType='done'
                                keyboardType="numeric"
                                placeholder="Enter new MPIN"
                                placeholderTextColor="gray"
                                secureTextEntry={true}
                                maxLength={4}
                                value={this.state.mpin}
                                onFocus={() => this.onInputFocus(1)}
                                onBlur={() => {
                                    this.setState({ activeInput: -1 })
                                }}
                                onChangeText={(v) => {
                                    let value = v.includes(".") ? v.replace(".", "") : v
                                    this.setState({ mpin: value, valid: value.length == 4 ? true : false })
                                }}
                                style={{marginTop: 20, marginLeft: 35, width: '75%', fontSize: 17 ,borderBottomColor: this.state.activeInput == 1 ? Theme.colors.accent : "gray", borderBottomWidth: this.state.activeInput == 1 ? 1.5 : 1, paddingBottom: 5, color: this.props.app_theme?.theme.dark ? Theme.colors.white : Theme.colors.black }}
                                />
                            <Text style={{ marginTop: 20, padding: 10, alignSelf: 'flex-start', fontFamily: 'arial', fontSize: 16, marginLeft: 35, color: Theme.colors.black, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.black }}>Verify MPIN</Text>
                            
                            <TextInput
                                returnKeyType='done'
                                keyboardType="numeric"
                                placeholder="Verify your new MPIN"
                                placeholderTextColor="gray"
                                secureTextEntry={true}
                                maxLength={4}
                                value={this.state.confirmMpin}
                                onFocus={() => this.onInputFocus(2)}
                                onBlur={() => {
                                    this.setState({ activeInput: -1 })
                                }}
                                onChangeText={(v) => {
                                    let value = v.includes(".") ? v.replace(".", "") : v
                                    this.setState({ confirmMpin: value, valid: value.length == 4 ? true : false })
                                }}
                                style={{marginTop: 20, marginLeft: 35, width: '75%', fontSize: 17, borderBottomColor: this.state.activeInput == 2 ? Theme.colors.accent : "gray", borderBottomWidth: this.state.activeInput == 2 ? 1.5 : 1, paddingBottom: 5, color: this.props.app_theme?.theme.dark ? Theme.colors.white : Theme.colors.black }}
                                />
                            {(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>
                    </ScrollView>
                </KeyboardAvoidingView>
                <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)(Setnewmpin)

export const styles = StyleSheet.create({

})