<template>
  <div class="q-mb-md form-header ui-gap-x-xs">
    <slot name="title">
      <span
        v-for="(typeLabel, type) in types"
        @click="changeType(type)"
        class="message-form-type text-h4"
        :key="type"
        :class="{ 'message-form-type_active': type === currentType }"
      >
        {{ typeLabel }}
      </span>
    </slot>
    <slot />
    <q-space />
    <slot name="after" />
  </div>
</template>

<style scoped lang="sass">
.form-header
  display: flex
  align-items: flex-start

.message-form-type
  color: $primary
  cursor: pointer

  &_active
    color: $dark
    pointer-events: none


  &:not(:last-of-type)::after
    content: '•'
    pointer-events: none
    color: $dark
    text-decoration: none
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { MessageType } from '@/widgets/messages/types/Message'
import { QSpace } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QSpace },
})
export default class MessageFormHeader extends Vue {
  @Prop({ type: Object, required: true })
  types!: { [key in MessageType]: string }

  @Prop({ required: true })
  currentType!: string | number

  @Emit()
  changeType(type: string | number) {
    return type
  }
}
</script>
