<template>
  <q-chip
    @click.native="openLink"
    class="q-ma-none"
    color="blue-grey-3"
    text-color="white"
    :class="{ 'cursor-pointer': hasLink }"
  >
    {{ label }}
  </q-chip>
</template>

<script lang="ts">
import { Component, Inject, Prop, Vue } from 'vue-property-decorator'
import { MessageThread } from '@/widgets/messages/types/MessageThread'
import { ThreadSubject } from '@/widgets/messages/types/ThreadSubject'
import MessageModule from '@/widgets/messages/modules/MessageModule'
import { QChip } from 'quasar'

@Component({ components: { QChip } })
export default class ThreadSubjectChip extends Vue {
  @Prop({ type: Object, required: true })
  thread!: MessageThread

  @Prop({ type: String })
  orderName!: string

  @Inject('MessageModule')
  messageModule!: MessageModule

  get subject(): ThreadSubject | undefined {
    return this.messageModule.subjects.find(s => s.id === this.thread.subjectId)
  }

  get label(): string {
    return this.orderName ? this.orderName : this.subject?.label || ''
  }

  get hasLink() {
    return !!this.thread.refObject?.url
  }

  openLink() {
    if (this.thread.refObject?.url) {
      window.open(this.thread.refObject?.url, '_blank')
    }
  }
}
</script>
