<script>
import { mapState } from 'pinia'
import { UserStore } from '@/stores/user'

export default {
  setup() {
    const userStore = UserStore()

    return { userStore }
  },
  computed: {
    ...mapState(UserStore,['isloggedin', 'isAdmin', 'mail', 'name'])
  },
  methods: {
    // ...mapActions({
    //   userLogout: 'User/userLogout'
    // }),
    onLogout () {
      console.log('UserTools onLogout')
      this.userStore.userLogout().then(() => {
        console.log('UserTools user logged-out then')
      })
    }
  },
  components: {
    // Loggout
  }
}
</script>

<template>
  <div id="user-tools">
    <a class="mdi mdi-account" href="/api/user">
      <span>{{ name }}</span>
      <!-- <span v-else>{{ mail }}</span> -->
    </a><br/>
    <a
      v-if="isAdmin"
      class="api" 
      href="/api/admin/content/concernements">
      <span>API</span>
    </a><br/>
    <a href="/user/logout"
      @click.prevent="onLogout()"
      class="mdi mdi-logout"
      title="logout"
    />
  </div>
</template>


<style lang="scss" scoped>
  #user-tools{
    display: flex;
    flex-direction: row;
    gap: 0em;
    a{
      padding: $pad_btn;
    }
  }
</style>
