<template>
    <li class="nav-item dropdown">
        <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" @click="toggleDropdown">
            <i class="align-middle" data-feather="settings"></i>
            <b-icon-person class="bi-valign-middle"></b-icon-person>
        </a>

        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" @click="toggleDropdown">
            <authenticated-image :src="profilePictureSrc" :owner="username" :alt="username" :title="username"
                                 img-class="avatar img-fluid rounded mr-1" :width="36" :height="36" fit="cover"/>

        </a>

        <div class="dropdown-menu dropdown-menu-right" id="userDropdown">
            <div class="dropdown-header">
                <span class="text-dark">
                {{ username }}
            </span>
            </div>
            <div class="dropdown-divider"></div>
            <router-link to="/profile" class="dropdown-item">
                <b-icon-person class="bi-valign-middle mr-1"></b-icon-person>
                Profile
            </router-link>
            <router-link to="/settings" class="dropdown-item">
                <b-icon-sliders class="bi-valign-middle mr-1"></b-icon-sliders>
                Settings &
                Privacy
            </router-link>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#" @click="logout"> Log out</a>
        </div>
    </li>
</template>

<script>
import * as BIcons from 'bootstrap-icons-vue';
import {mapActions, mapMutations, mapState} from "vuex";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";

export default {
    name: "UserDropdown",
    components: {
        AuthenticatedImage,
        ...BIcons
    },
    methods: {
        ...mapActions(['fetchUserProfile']),
        ...mapMutations(['logout']),
        toggleDropdown() {
            closeAllDropdowns();
            document.getElementById("userDropdown").classList.toggle("show");
        }
    },
    computed: {
        ...mapState(['user', 'user_profile']),
        username() {
            return this.user;
        },
        profilePictureSrc() {
            return this.user_profile?.profile_picture?.name || null;
        }
    },
    mounted() {
        if (!this.user_profile) {
            this.fetchUserProfile();
        }
    }
}
</script>

<style scoped>
</style>