<template>
  <ul class="ods-actions-menu__ul ods-actions-menu--user__ul">
    <li class="user-ul__user-name">{{ currentUser.name }} {{ currentUser.email }}</li>
    <li class="ods-actions-menu__separator"></li>
    <li>
      <lang-selector cssClass="user-ul__languages" :mobile="mobile"></lang-selector>
    </li>
    <li class="ods-actions-menu__separator"></li>
    <router-link tag="li" to="/profile">
      <a>
        <ods-icon name="user"></ods-icon>Profile
      </a>
    </router-link>
    <li class="ods-actions-menu__separator" data-id="logout-option" @click="logout">
        <a>
          <ods-icon name="logout"></ods-icon>Log out
        </a>
    </li>
  </ul>
</template>

<script>
import {mapGetters} from 'vuex';
import LangSelector from '@/components/shared/LangSelector';

export default {
  name: 'UserMenu',
  components: {LangSelector},
  methods: {
    logout() {
      sessionStorage.clear();
      this.$router.push({name: 'Login'});
    },
    ...mapGetters([
      'getCurrentUser',
      'getIsMobile',
    ]),
  },
  computed: {
    currentUser() {
      return this.getCurrentUser();
    },
    mobile() {
      return this.getIsMobile();
    },
  },
};
</script>

<style lang="scss" scoped>
  li.ods-actions-menu__separator {
    cursor: pointer;
  }
</style>
