<template>
  <div
    :class="{'user-widget--is-profile': isProfile}"
    class="user-widget">
    <div
      class="user-widget__avatar"
      data-cy="user-widget-avatar"
      @click="openSidebar('profile')">
      <avatar
        :avatar-url="avatarUrl"
        :icon-highlighted="isProfile"/>
    </div>
  </div>
</template>

<script>
  import Avatar from '@/components/profile/Avatar';
  import openSidebar from '@/mixins/open-sidebar';

  export default {
    // todo: clean up unneeded props
    props: {
      firstName: {
        type: String
      },
      lastName: {
        type: String
      },
      avatarUrl: {
        type: String
      },
      mobile: {
        type: Boolean,
        default: false
      },
      showMenu: {
        type: Boolean,
        default: true
      }
    },

    mixins: [openSidebar],

    components: {
      Avatar
    },
    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;
    // todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
    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>
