<template>
    <div class="d-flex align-items-center justify-content-center vh-100 bg-image">
        <div class="card mx-auto p-3" style="width: 32rem;">
            <div class="card-body">
                <h2 class="text-center mb-3 fw-bold">Log In to 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 py-1" method="post" @submit.prevent="login">
                    <div class="mb-3">
                        <label for="username" class="form-label fw-bold">Username</label>
                        <input type="text" class="form-control" id="username" v-model="username" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" 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">Log In</button>
                        <p class="pt-2">Doesn't have account?<router-link :to="{ name: 'auth.register' }"
                                class="text-decoration-none"> Register Now!</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';
import { setToken } from '@/utils/token.js';

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

            try {
                api.post('/accounts/login/', userData)
                    .then(response => {
                        const token = response.data.token;
                        setToken(token);

                        this.$router.push('/');
                    })
                    .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>