<template lang="html">
    <SvgIconSet />
    <!-- Menu Główne -->
    <nav class="navbar navbar-dark bg-dark nav-menu d-flex flex-row align-content-center align-items-center">
        <div class="logo-container p-2 bd-highlight">
            <img src='./../assets/img/logov3.svg' class="logo-img"/>
        </div>

        <div class="bt-set-container d-flex flex-row justicy-content-start align-items-center p-2 bd-highlight">
            <AnimeBtSet v-if="animeSet" />
            <ControlBtSet v-if="controlSet" />
        </div>

        <div class="user-container d-flex align-items-center justicy-content-between ms-auto p-2 bd-highlight">
            <div class="user-box" @click="$router.push('/control-panel')">
                <img :src='userAvatar' class="user-img"/>
                <div class="user-name-container">
                    {{userName}}
                </div>
            </div>

            <button class="bt-circle bt-danger user-bt-logout" @click="LogoutProcess">
                <svg width="16" height="16" fill="currentColor" class="bi bi-database-fill-add">
                    <use xlink:href="#ico-logout"/>
                </svg>
            </button>

        </div>
    </nav>
</template>
<script>
import SvgIconSet from './iconset.vue';
import { useAuterizationStore } from '@/stores/auterization';
import { ref, watch } from 'vue';

import AnimeBtSet from './anime_menu_button_set.vue';
import ControlBtSet from './control_menu_button_set.vue';

export default {
    name: 'MenuNav',
    components: {
        SvgIconSet,
        AnimeBtSet,
        ControlBtSet,
  },

  props: {
    menuSet: String
  },

  data() {
    return {
        //Menu set ayzwalacze
        animeSet: false,
        controlSet: false,
    }
  },

  setup() {
    //User
    const auterization = useAuterizationStore();

    const userName = ref(auterization.userName);
    const userAvatar = ref(auterization.userAvatar);

    watch(
        () => auterization.userName, (newValue) => {
            userName.value = newValue;
        },

        () => auterization.userAvatar, (newValue) => {
            userAvatar.value = newValue;
        }
    );

    return {
        userName,
        userAvatar,
        
        LogoutUser: auterization.LogoutUser,
    };
  },

  mounted() {
    switch(this.menuSet) {
            case "ANIME":
                this.animeSet = true;
                break;

            case "CONTROL":
                this.controlSet = true;
                break;

            default:
                this.animeSet = false;
                this.controlSet = false;
                break;
        }
  },

  methods: {
    async LogoutProcess() {
        const res = await this.LogoutUser();
        if(res){
            console.log("TEST WYLOGOWANIA");
            this.$router.push('/login');
        }
        else {
            console.log("TEST NIE WYSZEDŁ");
        }
    },
    
    ToggleUserMenu() {
        this.userMenuVisible = !this.userMenuVisible;
    },

  }
}
</script>
