<template>
  <div class="user-teaser-popover">
    <badges
      v-if="$env.BADGES_ENABLED && user.badgeVerification"
      :badges="[user.badgeVerification, ...user.badgeTrophiesSelected]"
    />
    <location-info
      v-if="user.location"
      :location-data="user.location"
      :is-owner="userId === $store.getters['auth/user'].id"
      class="location-info"
    />
    <!-- No :animated on OsNumber — popover appears on hover, animation would be distracting -->
    <ul class="statistics">
      <li>
        <os-number :count="user.followedByCount" :label="$t('profile.followers')" />
      </li>
      <li>
        <os-number
          :count="user.contributionsCount"
          :label="$t('common.post', null, user.contributionsCount)"
        />
      </li>
      <li>
        <os-number
          :count="user.commentedCount"
          :label="$t('common.comment', null, user.commentedCount)"
        />
      </li>
    </ul>
    <os-button
      v-if="isTouchDevice && userLink"
      as="nuxt-link"
      :to="userLink"
      class="link"
      variant="primary"
    >
      {{ $t('user-teaser.popover.open-profile') }}
    </os-button>
  </div>
</template>

<script>
import { OsButton, OsNumber } from '@ocelot-social/ui'
import Badges from '~/components/Badges.vue'
import LocationInfo from '~/components/LocationInfo/LocationInfo.vue'
import touchDevice from '~/mixins/touchDevice'
import { userTeaserQuery } from '~/graphql/User.js'

export default {
  name: 'UserTeaserPopover',
  mixins: [touchDevice],
  components: {
    Badges,
    LocationInfo,
    OsButton,
    OsNumber,
  },
  props: {
    userId: { type: String },
    userLink: { type: Object },
  },
  computed: {
    user() {
      return (this.User && this.User[0]) ?? null
    },
  },
  apollo: {
    User: {
      query() {
        return userTeaserQuery(this.$i18n)
      },
      variables() {
        return { id: this.userId }
      },
    },
  },
}
</script>

<style scoped>
.user-teaser-popover {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  gap: 16px;
  min-width: 200px;
}

@media (max-height: 800px) {
  .user-teaser-popover {
    padding: 0;
    gap: 0;
  }
}

.location-info {
  margin-bottom: 12px;
}

.link {
  margin-top: 16px;
}

.statistics {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
</style>
