import { Component } from '../../lib/vues6/vues6.js'
import { auth_api } from '../service/AuthApi.service.js'
import { location_service } from '../service/Location.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">
            {{ t['mfa.challenge_prompt'] }}
        </div>
        <div class="form-group">
            <input
                class="form-control"
                type="number"
                :placeholder="t['mfa.mfa_code']"
                v-model="verify_code"
                @keyup="on_key_up"
                name="verify_code"
                maxlength="6"
                :disabled="verify_success"
                ref="verify_input"
                autofocus
            >
        </div>
        <div v-if="error_message" class="error-message">{{ error_message }}</div>
        <div v-if="other_message" class="other-message">{{ other_message }}</div>
        <div class="coreid-loading-spinner" v-if="loading"><div class="inner"></div></div>
        <small
            class="mr-3"
        ><a href="#" class="text-secondary" @click="on_do_recovery">{{ t['mfa.lost_device'] }}</a></small>
    </div>
</div>
`

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

    constructor() {
        super()

        this.loading = false

        this.verify_code = ''
        this.verify_success = false

        this.error_message = ''
        this.other_message = ''
        this.t = {}
    }

    async vue_on_create() {
        this.t = await T(
            'mfa.challenge_prompt',
            'mfa.mfa_code',
            'mfa.lost_device',
            'mfa.invalid_code',
            'mfa.success'
        )

        console.log(this)
    }

    async watch_verify_code(new_verify_code, old_verify_code) {
        if ( new_verify_code.length === 6 ) {
            this.loading = true
            const result = await auth_api.mfa_attempt(new_verify_code)
            this.verify_success = result && result.is_valid
            if ( !this.verify_success ) {
                this.other_message = ''
                this.error_message = this.t['mfa.invalid_code']
                this.loading = false
            } else {
                this.error_message = ''
                this.other_message = this.t['mfa.success']
                await location_service.redirect(result.next_destination, 1500)
            }
        } else if ( new_verify_code.length > 6 ) {
            this.verify_code = old_verify_code
        }
    }

    async on_key_up(event) {
        if ( event.keyCode === 13 ) {
            // Enter was pressed - don't submit the form
            event.preventDefault()
            event.stopPropagation()
            return false
        }
    }

    async on_do_recovery(event) {
        await location_service.redirect('/auth/mfa/recovery', 0)
    }
}
