<template>
    <div>
        <div class="row">
            <div class="col">
                <div class="row m-b-20">
                    <div class="col">
                        <div class="fs-11 muted">{{status.message}}</div>
                    </div>
                </div>
                <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
                    <label class="text-primary">Email Address</label>
                    <div class="controls">
                        <input type="text" autocomplete="nope" class="form-control fs-12" v-model="watchCheckEmail">
                    </div>
                </validation-wrapper-component>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col">
                        <button type="button" class="btn btn-sm p-t-10 p-b-10 btn-default bg-master-lighter b-rad-none" @click="changeStep('back')">
                            <div class="row align-items-center">
                                <div class="col-auto p-r-10">
                                    <i class="fa fa-angle-left fs-16" style="margin-top: 1px;"></i>
                                </div>
                                <div class="col p-l-5">Back To Login</div>
                            </div>
                        </button>
                    </div>
                    <div class="col text-right">
                        <button type="button" class="btn btn-sm p-t-10 p-b-10 p-r-35 p-l-35 btn-primary b-rad-none" @click="changeStep('next')" :disabled=!status.error>Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
    import registrationCheckEmailValidation from '../../../general/mixins/accounts/validation/registrationCheckEmailValidation';
    export default {
        data() {
            return {
                parameters : {
                    email: '',
                },
                status:{
                    error:false,
                    message:null,
                    direction:null,
                    email:null
                },
                watchCheckEmail:null,
            }
        },
        watch: {
            watchCheckEmail(value){
                this.parameters.email = value;
                if(this.validate()){
                    this.submit(this.route('api.account.authentication.authenticate.email.check'), 'post', 'registrationSection', false, false);
                }                
            }
        },
        methods:{
            changeStep(direction){
                if(direction === 'next'){
                    if(this.validate()){
                        this.step += 1;
                        this.status.direction = direction;
                        this.status.email = this.parameters.email;
                        this.$emit('updateStatus',this.status);
                    }
                    return;
                }
                this.$v.$reset();
                this.$store.dispatch('toggleSection', {name: 'registrationSection', status: false});
            },
        },
        beforeDestroy: function(){
        },
        mixins: [registrationCheckEmailValidation]
    }
</script>
