<template>
    <div class="register-page">
        <page-title pagetitle="S'Inscrire"/>
        <form action="#" @submit.prevent="onSubmit">
            <div class="form-content">
                <text-input id="mail" label="Email"/>
                <text-input id="pseudo" label="Pseudo"/>
                <pwd-input id="password1" label="Mot de passe"/>
                <pwd-input id="password2" label="Confirmer"/>
                <error-message id="error-password" errormessage="Les mots de passe ne correspondent pas." v-show="this.showPwdError"/>
                <error-message id="error-mail" errormessage="Le mail rentré n'est pas valide" v-show="this.showMailError"/>
                <error-message id="error-back"  errormessage="Cet email ou ce pseudo est déjà pris." v-show="this.showBackError"/>
                <error-message id="error-back"  errormessage="Tous les champs obligatoires ne sont pas remplis." v-show="this.showNotFilledError"/>
                
            </div>
            <svg-button id="back" svg="/icons/back.svg"/>
            <svg-button id="validate" svg="/icons/validate.svg"/>
        </form>
    </div>
</template>

<script>
import PageTitle from '@/components/PageTitle.vue'
import SvgButton from '@/components/SvgButton.vue'
import TextInput from '@/components/form/TextInput.vue'
import PwdInput from '@/components/form/PwdInput.vue'
import ErrorMessage from '@/components/form/ErrorMessage.vue'
export default {
    name: 'Register',
    components: {
        PageTitle,
        SvgButton,
        TextInput,
        PwdInput,
        ErrorMessage
    },
    data() {
        return {
            showPwdError : false,
            showBackError : false,
            showMailError : false,
            showNotFilledError : false,
        }
    },
    methods: {
        updateShowBackError: function(){
            this.showBackError = false; //TODO
        },
        onSubmit: async function(){
            // If we press back, we go back
            if (event.submitter.id=='back') {
                this.$router.push('/');
            }

            // Test if all fields are filled
            this.showNotFilledError = (
                document.getElementById('pseudo').value == ''
            || document.getElementById('mail').value == ''
            || document.getElementById('password1').value == ''
            || document.getElementById('password2').value == ''
            );
            if (this.showNotFilledError) {
                return;
            }

            // Test if password match the confirm password
            this.showPwdError = (document.getElementById('password1').value !== document.getElementById('password2').value);
            if (this.showPwdError) {
                return;
            }

            // Test if mail is valid
            this.showMailError = !validateEmail(document.getElementById('mail').value);
            if (this.showMailError) {
                return;
            }

            // Test if Email exist/Pseudo exist
            this.showBackError = false; //TODO
            if (this.showBackError) {
                return;
            }

            // Post new user if all tests are ok
            if (event.submitter.id=='validate') {
                let request = await fetch('http://localhost/index.php/user',
                {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                    },
                body: JSON.stringify({
                        login: document.getElementById('pseudo').value,
                        pwd: document.getElementById('password1').value,
                        avatar: "default.png",
                        lastname: "",
                        firstname: "",
                        mail: document.getElementById('mail').value
                })
                }); //creating the content and sending the request

                let response = await request;
                if (response.ok){
                    this.$router.push('lobby');
                }
            }
        }
    }
}
// Function to check if the str email is valide (true if this is the case)
function validateEmail (email) {
    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(String(email).toLowerCase());
}
</script>

<style>

.register-page .form-content{
    flex-direction: column;
    display: flex;
    width: 900px;
    background-color: rgba(196, 196, 196, 0.6);
    margin: 0 auto;
    padding-top: 50px;
}


*, ::before, ::after {
    box-sizing: border-box;
}
</style>