<template>
    <nav class="navbar navbar-expand-lg navbar-light border-bottom border-2 shadow-sm">
        <div class="container">
            <router-link :to="{ name: 'home' }" class="navbar-brand"><img :src="logo" height="30"></router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse mx-3 text-center" id="navbarSupportedContent">
                <form class="col" @submit.prevent="search" role="search">
                    <input v-model="searchKeyword" class="form-control me-2" type="search" placeholder="Cari menu"
                        aria-label="Search">
                </form>
                <ul class="navbar-nav me-auto mb-2 mb-lg-0 align-items-center">
                    <li class="nav-item mx-2" :class="{ active: isRouteActive('home') }">
                        <router-link :to="{ name: 'home' }" class="nav-link">Home</router-link>
                    </li>
                    <li class="nav-item mx-2" :class="{ active: isRouteActive('my_pantry') }" v-if="isLoggedIn">
                        <router-link :to="{ name: 'my_pantry' }" class="nav-link">My Kitchen</router-link>
                    </li>
                    <li class="nav-item" v-if="isLoggedIn">
                        <div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"
                                data-bs-display="static" aria-expanded="false">
                                <img :src="profpics" class="rounded-circle" alt="Profile pict"
                                    style="width:40px;height:40px">
                            </button>
                            <ul class="dropdown-menu dropdown-menu-lg-end">
                                <li>
                                    <router-link :to="{ name: 'profile.account' }"
                                        class="dropdown-item">Profile</router-link>
                                </li>
                                <li>
                                    <router-link :to="{ name: 'profile.favorite' }"
                                        class="dropdown-item">Favorite</router-link>
                                </li>
                                <li>
                                    <router-link :to="{ name: 'profile.history' }"
                                        class="dropdown-item">History</router-link>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#" @click="logout">Log Out</a>
                                </li>
                            </ul>
                        </div>
                    </li>

                    <li v-else class="nav-item">
                        <router-link :to="{ name: 'auth.login' }" class="btn btn-primary text-light px-3">Log
                            In</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
import api from '@/api'
import logo from '@/assets/image/brand.png';
import profpics from '@/assets/image/profpics.png';
import { isUserLoggedIn, getToken, removeToken } from '@/utils/token';

export default {
    data() {
        return {
            user: {
                id: null,
                profilePicture: "",
            },
            searchKeyword: "",
            logo: logo,
            token: '',
            profpics: profpics
        };
    },
    mounted() {
        this.token = getToken();
        if (this.isLoggedIn) {
            this.getUserData();
        }
    },
    computed: {
        getLogoPath() {
            return logo
        },
        isLoggedIn() {
            return isUserLoggedIn();
        },
    },
    methods: {
        getUserData() {
            api.get('/profiles/account/')
                .then(response => {
                    this.user.id = response.data.user.id;
                    this.user.profilePicture = response.data.profile_picture;
                })
                .catch(error => {
                    console.error(error);
                });
        },
        isRouteActive(routeName) {
            return this.$route.name === routeName;
        },
        search() {
            this.$router.push({ path: '/search', query: { keyword: this.searchKeyword } });
            this.$emit('searched', this.searchKeyword);
        },
        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>

<style>
.active {
    text-decoration: underline;
    font-weight: bold;
}
</style>