<template>
  <div class="message-form">
    <div v-if="$slots.flash" class="flash-wrapper">
      <slot name="flash"></slot>
    </div>
    <message-form-header
      @change-type="changeType"
      :types="types"
      :current-type="currentType"
    >
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #after>
        <slot name="after-title"></slot>
      </template>
      <slot name="header"></slot>
    </message-form-header>
    <slot name="body"></slot>
    <message-form-footer
      @save="save"
      @cancel="cancel"
      :submit-text="submitText"
      :loading="loading"
    />
    <slot></slot>
  </div>
</template>

<style lang="sass" scoped>
.message-form
  padding: 24px
  border-radius: 16px
  background-color: #fff
  position: relative

.flash-wrapper
  margin: -24px -24px 24px
  border-radius: 16px 16px 0 0
  overflow: hidden
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { MessageType } from '@/widgets/messages/types/Message'
import MessageFormHeader from '@/widgets/base/components/message-form/MessageFormHeader.vue'
import MessageFormFooter from '@/widgets/base/components/message-form/MessageFormFooter.vue'

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

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

  @Prop({ type: String, default: 'Отправить сообщение' })
  submitText!: string

  @Prop(Boolean)
  loading!: boolean

  @Emit()
  save() {
    return true
  }

  @Emit()
  changeType(type: MessageType) {
    return type
  }

  @Emit()
  cancel() {
    return true
  }
}
</script>
