import { Component } from '../../lib/vues6/vues6.js'
import { location_service } from '../service/Location.service.js'
import { auth_api } from '../service/AuthApi.service.js'

const template = `
<div class="coreid-auth-page col-lg-6 col-md-8 col-sm-10 col-xs-12 offset-lg-3 offset-md-2 offset-sm-1 offset-xs-0 text-left">
    <div class="coreid-auth-page-inner">
        <div class="coreid-header font-weight-light">{{ app_name }}</div>
        <div class="coreid-message">
            To recover access to your account, you can enter one of the generated MFA recovery codes:
        </div>
        <div class="form-group">
            <input
                class="form-control"
                type="text"
                placeholder="Recovery Code"
                v-model="recovery_code"
                @keyup="on_key_up"
                name="recovery_code"
                :disabled="verify_success"
                ref="verify_input"
                maxlength="36"
                autofocus
            >
        </div>
        <div v-if="error_message" class="error-message">{{ error_message }}</div>
        <div v-if="other_message" class="other-message">{{ other_message }}</div>
        <small
            class="mr-3" v-if="!loading"
        ><a href="#" class="text-secondary" @click="on_do_challenge">Have a normal MFA code?</a></small>
        <div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
    </div>
</div>
`

export default class MFARecoveryComponent extends Component {
    static get selector() { return 'coreid-mfa-recovery-page' }
    static get template() { return template }
    static get props() { return ['app_name'] }

    verify_success = false
    loading = false
    recovery_code = ''
    error_message = ''
    other_message = ''

    async vue_on_create() {
        this.$nextTick(() => {
            this.$refs.verify_input.focus()
        })
    }

    async on_key_up($event) {
        if ( this.recovery_code.length === 36 ) {
            this.error_message = ''
            this.other_message = ''
            this.loading = true
            const result = await auth_api.attempt_mfa_recovery(this.recovery_code)
            if ( result && result.success ) {
                this.other_message = `Success! There are only ${result.remaining_codes} recovery codes remaining. Let's get you on your way...`
                await location_service.redirect(result.next_destination, 5000)
            } else {
                this.loading = false
                this.error_message = 'Hm. It doesn\'t look like that code is valid.'
            }
        }
    }

    async on_do_challenge() {
        await location_service.redirect('/auth/mfa/challenge', 0)
    }
}