<template>
  <thread-header-btn icon="la la-link" color="secondary">
    <ui-menu v-model="isShowMenu" class="q-pb-md">
      <ui-menu-group title="Тема">
        <ui-menu-item
          v-for="subject in subjects"
          @click="changeSubject(subject)"
          :key="subject.id"
          :active="subject.id === thread.subjectId"
        >
          {{ subject.label }}
        </ui-menu-item>
      </ui-menu-group>
      <subject-order-select
        @input="changeOrder"
        v-if="isShowMenu"
        :value="orderName"
        :client-id="thread.client.id"
      />
    </ui-menu>
  </thread-header-btn>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { ThreadSubject } from '@/widgets/messages/types/ThreadSubject'
import { MessageThread } from '@/widgets/messages/types/MessageThread'
import UiBtnMenu from '@/lib-components/buttons/UiBtnMenu.vue'
import UiMenu from '@/lib-components/menu/UiMenu.vue'
import UiMenuGroup from '@/lib-components/menu/UiMenuGroup.vue'
import UiMenuItem from '@/lib-components/menu/UiMenuItem.vue'
import SubjectOrderSelect from '@/widgets/messages/components/thread/header/SubjectOrderSelect.vue'
import UiBtnIcon from '@/lib-components/buttons/UiBtnIcon.vue'
import ThreadHeaderBtn from '@/widgets/messages/components/thread/header/ThreadHeaderBtn.vue'

@Component({
  components: {
    ThreadHeaderBtn,
    UiBtnIcon,
    SubjectOrderSelect,
    UiMenuItem,
    UiMenuGroup,
    UiMenu,
    UiBtnMenu,
  },
})
export default class ThreadMenu extends Vue {
  @Prop({ type: Object, required: true })
  thread!: MessageThread

  @Prop({ type: String })
  orderName!: string
  @Prop({ type: Array, required: true })
  subjects!: ThreadSubject[]

  isShowMenu = false

  @Emit()
  changeOrder(orderName: string) {
    this.isShowMenu = false

    return orderName
  }

  @Emit()
  changeSubject(subject: ThreadSubject) {
    this.isShowMenu = false

    return subject
  }
}
</script>
