<template>
    <div class="user-widget" :class="{'user-widget--is-profile': isProfile}">
      <div class="user-widget__avatar" @click="toggleShowPopover()">
        <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile"/>
      </div>
      <widget-popover v-if="showPopover"
                      @hide-me="showPopover = false"
                      class="user-widget__popover ">
        <li class="popover-links__link popover-links__link--large popover-links__link--emph">{{firstName}} {{lastName}}</li>
        <li class="popover-links__link popover-links__link--large">
          <router-link to="/me/activity" @click="toggleShowPopover()">Aktivität</router-link>
        </li>
        <li class="popover-links__link popover-links__link--large" @click="toggleShowPopover()">
          <router-link to="/me/profile">Profil</router-link>
        </li>
        <li class="popover-links__link popover-links__link--large" @click="toggleShowPopover()">
          <router-link to="/me/myclasses">Klassenliste</router-link>
        </li>
        <li class="popover-links__link popover-links__link--large" data-cy="logout" @click="logout()">
          <a>Logout</a>
        </li>
    </widget-popover>
    </div>
</template>

<script>
  import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
  import Avatar from '@/components/profile/Avatar';
  import WidgetPopover from '@/components/WidgetPopover';

  export default {
    props: ['firstName', 'lastName', 'avatarUrl', 'date'],

    data() {
      return {
        showPopover: false
      }
    },

    methods: {
      toggleShowPopover() {
        this.showPopover = !this.showPopover;
      },
      logout() {
        this.$apollo.mutate({
          mutation: LOGOUT_MUTATION,
        }).then(({data}) => {
          if (data.logout.success) { location.replace('/') }
        });
      }
    },

    components: {
      Avatar, WidgetPopover
    },
    computed: {
      isProfile() {
        return this.$route.meta.isProfile;
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .user-widget {
    color: $color-silver-dark;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-right: $medium-spacing;

    &__popover {
      top: 40px;
      white-space: nowrap;
    }

    &__name {
      padding: 0px $small-spacing;
      color: $color-silver-dark;
      font-family: $sans-serif-font-family;
    }

    &__date {
      font-family: $sans-serif-font-family;
    }

    &__avatar {
      width: 30px;
      height: 30px;
      fill: $color-silver-dark;
      cursor: pointer;
    }

    &--is-profile {
      & > span {
        color: $color-brand;
      }
    }
  }
</style>
