import React, {useState, useEffect} from 'react';
import EnterPasswordSmartOTPView from './EnterPasswordSmartOTPView';
import {getOTPApiSmartOTP} from '../../apis/Functions/users';
import {showAlert, TYPE} from '../../components/DropdownAlert';
import I18n from '../../helper/i18/i18n';
import {connect} from 'react-redux';
import {hideLoading, showLoading} from '../../actions/loadingAction';
import {OTP_TYPE} from '../../Config/constants';

const EnterPasswordSmartOTP = (props) => {
    const [firstNumber, setFirstNumber] = useState(null);
    const [secondsNumber, setSecondsNumber] = useState(null);
    const [thirdNumber, setThirdNumber] = useState(null);
    const [fourNumber, setFourNumber] = useState(null);
    useEffect(() => {
        if (fourNumber) {
            onCheckPINSmartOTPPin();
        }
    }, [fourNumber]);
    const onNumberPress = (number) => {
        if (!firstNumber) {
            setFirstNumber(number.toString());
        } else if (!secondsNumber) {
            setSecondsNumber(number.toString());
        } else if (!thirdNumber) {
            setThirdNumber(number.toString());
        } else if (!fourNumber) {
            setFourNumber(number.toString());
        }
    };

    const onCheckPINSmartOTPPin = async () => {
        let pinCode = `${firstNumber}${secondsNumber}${thirdNumber}${fourNumber}`;
        props.showLoading();
        const res = await getOTPApiSmartOTP({
            platform: Platform.OS,
            otp_by: props.user.email,
            otp_password: pinCode,
            type: props.route.params.type == 'DEPOSIT' ? OTP_TYPE.CUSTOMER_REQUEST_DEPOSIT : OTP_TYPE.REQUEST_WITHDRAW,
        });
        props.hideLoading();
        if (res.data.code == 200) {
            props.route.params.onGoToSmartOTP(pinCode, res.data.data.otp);
        } else {
            showAlert(TYPE.ERROR, I18n.t('Notification'), res.data.message);
            setFirstNumber(null);
            setSecondsNumber(null);
            setThirdNumber(null);
            setFourNumber(null);
        }
    };
    const onDeletePress = () => {
        if (fourNumber) {
            setFourNumber(null);
        } else if (thirdNumber) {
            setThirdNumber(null);
        } else if (secondsNumber) {
            setSecondsNumber(null);
        } else if (firstNumber) {
            setFirstNumber(null);
        }
    };
    const onReactivationSmartOTP = () => {

    };

    const onForgotPINCode = () => {

    };
    return <EnterPasswordSmartOTPView
        firstNumber={firstNumber}
        secondsNumber={secondsNumber}
        thirdNumber={thirdNumber}
        fourNumber={fourNumber}
        onNumberPress={onNumberPress}
        onDeletePress={onDeletePress}
        onForgotPINCode={onForgotPINCode}
        onReactivationSmartOTP={onReactivationSmartOTP}
    />;
};
const mapStateToProps = (state) => {
    return {
        user: state.userReducer,
    };
};

export default connect(mapStateToProps, {showLoading, hideLoading})(EnterPasswordSmartOTP);

