Vue.component('create_account', {
    template: `
    <div>

        <div v-if="show_create_form">

            <form @submit="submit">

                <enas_input label="اسمك" id="name_ca" :value_model.sync="name"></enas_input>
                <enas_input label="البريد الإلكتروني" id="email_ca" type="email" :value_model.sync="email"></enas_input>
                <enas_input label="كلمة السر" id="password_ca" type="password" :value_model.sync="password"></enas_input>
                <enas_input label="أعد كلمة السر" id="repeat_password_ca" type="password" :value_model.sync="repeat_password"></enas_input>

                <button type="submit" class="btn btn-primary" v-if="!is_loading">أنشئ</button>

                <div v-if="is_loading">
                    <div class="loader"></div>
                </div>

                <div v-if="show_error">

                    <b-alert show variant="warning">{{error_msg}}</b-alert>

                </div>
                

            </form>

        </div>

        <div v-if="show_success_form">

            <div style="font-size:20px;">
                <br />
                <div style="text-align:center"><span style="color:green"><i class="fas fa-check"></i></span></div>
                <br />
                <br /> تم ارسال رابط للتفعيل إلى : {{ email }}
                <br /> سيتم تحويلك للصفحة الرئيسية.
            </div>

        </div>

    </div>
  

`,
    props: ['api_url', 'site_url'],
    data: function () {
        return {
            valid: true,
            name: '',
            password: '',
            password_show: true,
            repeat_password: '',
            repeat_password_show: true,
            requiredRules: [
                v => !!v || 'This field is required',
            ],
            passwordRules: [
                v => !!v || 'Password is required',
            ],
            email: '',
            emailRules: [
                v => !!v || 'E-mail is required',
                v => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
            ],
            select: null,
            checkbox: false,
            show_error: false,
            error_msg: '',
            is_loading: false,
            show_create_form: true,
            show_success_form: false,
        }

    },
    watch: {},
    methods: {
        submit(e) {
            e.preventDefault();

            var proceed = true;

            if (this.password != this.repeat_password) {
                alert("passwords didn't match.");
                proceed = false;
            } else if (!(/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(this.email))) {
                alert("Please enter a valid email address");
                proceed = false;
            }
            // Native form submission is not yet supported

            var thisCompo = this;

            if(proceed) {
                this.is_loading = true;



                axios.post(this.api_url + '/users/create_account', {
                    'name': thisCompo.name,
                    'email': thisCompo.email,
                    'password': thisCompo.password,
                    'type': 'buyer'
                }).then(function (response) {


                    var responseRes = response.data;

                    if (responseRes.success) {
                        setCookie("access_token", responseRes.data.access_token, 900);
                        thisCompo.show_create_form = false;
                        thisCompo.show_success_form = true;

                        setTimeout(function () {

                            window.location = thisCompo.site_url;

                        }, 5000);

                    } else {
                        if (responseRes.data.error == 'email_used') {
                            thisCompo.show_error = true;
                            thisCompo.error_msg = thisCompo.email + ' is used by another user, if it is you, please try logging in or resetting your password.';
                        }
                    }

                    thisCompo.is_loading = false;
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        },
        clear() {
            this.$refs.form.reset();
        }
    }
});