<template>
    <form @submit.prevent="onSubmit">

        <div class="rs rm col-8 m-col-4">
            <label for="firstname">Voornaam</label>
            <input id="firstname" name="firstname" v-model="naw.firstname" :class="{ 'error': errors.has('firstname') }" v-validate="'required|min:2'" type="text" tabindex="3" />
            <span class="tooltip">{{ errors.first( 'firstname' ) }}</span>
        </div>
        <div class="rs rm col-6 m-col-4">
            <label for="zipcode">Postcode</label>
            <input id="zipcode" name="zipcode" v-model="naw.zipcode" maxlength="7" :class="{ 'error': errors.has('zipcode') }" v-validate="{ required: true, regex: /^[0-9]{4} {0,1}[A-Za-z]{2}$/ }" type="text" tabindex="7" />
            <span class="tooltip">{{ errors.first( 'zipcode' ) }}</span>
        </div>
        <div class="col-3 m-col-3">
            <label for="house_num">Huis nr.</label>
            <input id="house_num" name="house_num" v-model="naw.house_num" :class="{ 'error': errors.has('house_num') }" v-validate="'required|min:1|min_value:1|max:5'" type="number" min="1" tabindex="8"/>
            <span class="tooltip">{{ errors.first( 'house_num' ) }}</span>
        </div>


        <div class="selectable" v-bind:class="{ 'is-checked': naw.age, 'error': errors.has('age-checkbox') }">
            <span class="indicator"></span>
            <input type="checkbox" id="age-checkbox" name="age-checkbox" v-model="naw.age" ref="age" v-validate="'required'" data-vv-validate-on="input" tabindex="14" />
            <label class="text-label" for="age-checkbox">
                Ja, ik ben 18 jaar of ouder en ga akkoord met de <a href="static/pdf/lotto_actievoorwaarden.pdf" target="_blank">actievoorwaarden</a>
            </label>
        </div>


        <button type="submit" v-bind:disabled="waitingForApi" tabindex="16">Doe nu mee<v-spinner v-if="waitingForApi"></v-spinner></button>

        </div>
    </form>
</template>

<style lang="scss" scoped>
</style>

<script>
    import Vue from 'vue';
    import Spinner from '@/app/components/Spinner';

    export default {
        components: {
            'v-spinner': Spinner
        },

        data()
        {
            return {
                waitingForApi: false,
                error: false,
                apiError: false,
                naw: {
                    kit: false
                }
            };
        },

        watch: {
            naw: function( pNew, pOld )
            {
                if( this.error === true )
                {
                    this.$validator.validateAll().then( result =>
                    {
                        if( result )
                        {
                            this.error = false;
                        }
                    });
                }
            }
        },

        methods: {
            onSubmit( e )
            {
                this.$validator.validateAll().then( result =>
                {
                    if( result )
                    {
                        this.waitingForApi = true;

                        return this.$store.dispatch( 'saveEntry', entry ).then( ( response ) =>
                        {
                            console.log( 'response', response );
                        })
                        .catch( ( error ) =>
                        {
                            this.apiError = true;
                            this.waitingForApi = false;

                            throw new Error( error );
                        });
                    }
                    this.error = true;
                    throw new Error( 'invalid' );
                })
                .then( () =>
                {
                    this.waitingForApi = false;
                    this.$router.replace({ path: '/bedankt' });
                })
                .catch( () =>
                {
                    this.waitingForApi = false;
                });
            }
        }
    };
</script>