import { mapState } from 'pinia'

import MentionLink from 'src/components/mention_link/mention_link.vue'

import { useSyncConfigStore } from 'src/stores/sync_config.js'

export const MENTIONS_LIMIT = 5

const MentionsLine = {
  name: 'MentionsLine',
  props: {
    mentions: {
      required: true,
      type: Array,
    },
  },
  data: () => ({ expanded: false }),
  components: {
    MentionLink,
  },
  computed: {
    mentionsComputed() {
      return this.mentions.slice(0, MENTIONS_LIMIT)
    },
    extraMentions() {
      return this.mentions.slice(MENTIONS_LIMIT)
    },
    manyMentions() {
      return this.extraMentions.length > 0
    },
    ...mapState(useSyncConfigStore, ['mergedConfig']),
  },
  methods: {
    toggleShowMore() {
      this.expanded = !this.expanded
    },
  },
}

export default MentionsLine