<template>
    <div class="card shadow border-white">
        <div class="card-body">
            <ul class="nav flex-column">
                <li class="nav-item mb-2 sidebar-active">
                    <router-link :to="{ name: 'profile.account' }" class="nav-link"
                        :class="{ 'text-primary': isActive === 'profile.account', 'text-secondary': isActive !== 'profile.account' }"><i
                            class="fa-solid fa-user fa-xl me-3"></i> Account</router-link>
                </li>
                <li class="nav-item mb-2">
                    <router-link :to="{ name: 'profile.favorite' }" class="nav-link"
                        :class="{ 'text-primary': isActive === 'profile.favorite', 'text-secondary': isActive !== 'profile.favorite' }"><i
                            class="fa-solid fa-heart fa-xl me-3"></i>Favorite</router-link>
                </li>
                <li class="nav-item mb-2">
                    <router-link :to="{ name: 'profile.history' }" class="nav-link"
                        :class="{ 'text-primary': isActive === 'profile.history', 'text-secondary': isActive !== 'profile.history' }"><i
                            class="fa-solid fa-bowl-rice fa-xl me-3"></i>History</router-link>
                </li>
                <button class="btn btn-primary mt-4 w-100 text-light" @click="logout">Log Out</button>
            </ul>
        </div>
    </div>
</template>

<script>
import api from '@/api'
import { getToken, removeToken } from '@/utils/token';

export default {
    data() {
        return {
            token: '',
            isActive: 'profile.account'
        };
    },
    mounted() {
        this.token = getToken();
        this.isActive = this.$route.name;
    },
    methods: {
        logout() {
            const userData = {
                token: this.token,
            };

            api.post('/accounts/logout/', userData)
                .then(response => {
                    removeToken(this.token);
                    this.isActive = '';
                    window.location.href = '/';
                })
                .catch(error => {
                    console.error(error);
                });
        }
    }
};
</script>