<template>
    <div class="d-flex align-items-center justify-content-center vh-100 bg-image">
        <div class="card mx-auto p-3" style="width: 35rem;">
            <div class="card-body container">
                <h2 class="card-title text-center mb-3 fw-bold">Register EasyCook</h2>
                <div v-if="errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ errorMessage }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <form class="card-text" method="post" @submit.prevent="registerUser">
                    <div class="mb-3">
                        <label for="first_name" class="form-label fw-bold">Name</label>
                        <input type="text" class="form-control" id="first_name" v-model="first_name" required>
                    </div>
                    <div class="row">
                        <div class="mb-3 col-sm-6">
                            <label for="" class="form-label fw-bold">Username</label>
                            <input type="text" class="form-control" id="username" v-model="username" required>
                        </div>
                        <div class="mb-3 col-sm-6">
                            <label for="" class="form-label fw-bold">E-mail</label>
                            <input type="email" class="form-control" id="email" v-model="email" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label fw-bold">Password</label>
                        <div class="input-group">
                            <input :type="passwordType" class="form-control" id="password" v-model="password" required>
                            <span class="input-group-text">
                                <i :class="{ 'fa-eye-slash': !showPassword, 'fa-eye': showPassword }"
                                    class="fa toggle-password" @click="togglePassword"></i>
                            </span>
                        </div>
                    </div>
                    <div class="text-center mx-auto mt-4">
                        <button type="submit" class="btn btn-primary text-center mx-auto w-50 text-light">Register</button>
                        <p class="pt-3">Have account?<router-link :to="{ name: 'auth.login' }" class="text-decoration-none">
                                Log In!</router-link></p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<style lang="css">
.bg-image {
    background-image: url('@/assets/image/background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<script>
import api from '@/api';

export default {
    data() {
        return {
            first_name: '',
            last_name: '',
            username: '',
            email: '',
            password: '',
            showPassword: false,
            passwordType: 'password',
            errorMessage: '',
        };
    },
    methods: {
        registerUser() {
            const userData = {
                first_name: this.first_name,
                last_name: this.last_name,
                username: this.username,
                email: this.email,
                password: this.password
            };

            try {
                api.post('/accounts/register/', userData)
                    .then(response => {
                        this.$router.push('/login');
                    })
                    .catch(error => {
                        if (error.response && error.response.status === 400) {
                            this.errorMessage = error.response.data.message;
                        } else {
                            console.error(error);
                        }
                    });
            } catch (error) {
                console.error(error);
            }
        },
        togglePassword() {
            this.showPassword = !this.showPassword;
            this.passwordType = this.showPassword ? 'text' : 'password';
        }
    }
};
</script>