import React, { Component } from 'react';
import { WalletType, FreechargePersonalBindResult, MobikwikPersonalBindResult, PaytmPersonalBindResult, PhonePePersonalBindResult } from 'rnwalletman';
import { OTPBindUI } from './OTPBindUI';

export class FreeChargeBind extends Component<{
    onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
    onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
    onSuccess: (result: FreechargePersonalBindResult) => void;
    onError: (error: string) => void;
    isDebug: boolean;
}> {
    render() {
        return (
            <OTPBindUI
                walletType={WalletType.FREECHARGE_PERSONAL}
                title="Freecharge 绑定"
                otpLength={4}
                onRequestOTP={this.props.onRequestOTP}
                onVerifyOTP={this.props.onVerifyOTP}
                onSuccess={this.props.onSuccess}
                onError={this.props.onError}
                isDebug={this.props.isDebug}
            />
        );
    }
}

export class MobikwikOTPBind extends Component<{
    onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
    onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
    onSuccess: (result: MobikwikPersonalBindResult) => void;
    onError: (error: string) => void;
    isDebug: boolean;
    deviceId: string;
    tuneUserId: string;
}> {
    render() {
        return (
            <OTPBindUI
                walletType={WalletType.MOBIKWIK_PERSONAL}
                title="Mobikwik 绑定"
                otpLength={6}
                onRequestOTP={this.props.onRequestOTP}
                onVerifyOTP={this.props.onVerifyOTP}
                onSuccess={this.props.onSuccess}
                onError={this.props.onError}
                isDebug={this.props.isDebug}
                additionalParams={{
                    deviceId: this.props.deviceId,
                    tuneUserId: this.props.tuneUserId,
                }}
            />
        );
    }
}

export class PayTmPersonalOTPBind extends Component<{
    onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
    onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
    onSuccess: (result: PaytmPersonalBindResult) => void;
    onError: (error: string) => void;
    isDebug: boolean;
}> {
    render() {
        return (
            <OTPBindUI
                walletType={WalletType.PAYTM_PERSONAL}
                title="Paytm 绑定"
                otpLength={6}
                onRequestOTP={this.props.onRequestOTP}
                onVerifyOTP={this.props.onVerifyOTP}
                onSuccess={this.props.onSuccess}
                onError={this.props.onError}
                isDebug={this.props.isDebug}
            />
        );
    }
}

export class PhonePePersonalOTPBind extends Component<{
    onRequestOTP: (walletType: WalletType, params: any) => Promise<any>;
    onVerifyOTP: (walletType: WalletType, params: any) => Promise<any>;
    onSuccess: (result: PhonePePersonalBindResult) => void;
    onError: (error: string) => void;
    isDebug: boolean;
}> {
    render() {
        return (
            <OTPBindUI
                walletType={WalletType.PHONEPE_PERSONAL}
                title="PhonePe 绑定"
                otpLength={8}
                onRequestOTP={this.props.onRequestOTP}
                onVerifyOTP={this.props.onVerifyOTP}
                onSuccess={this.props.onSuccess}
                onError={this.props.onError}
                isDebug={this.props.isDebug}
            />
        );
    }
}