<template>
  <div class="flex no-wrap ui-gap-x-sm">
    <template v-if="isCheckDelete">
      <div>
        <div class="text-white q-mb-sm">
          Вы уверены, что хотите удалить сообщение?
        </div>
        <div class="flex no-wrap justify-center ui-gap-x-sm">
          <ui-btn @click="remove" label="Удалить" rounded color="negative" />
          <ui-btn
            @click="isCheckDelete = false"
            label="Отменить"
            color="blue-grey"
            rounded
          />
        </div>
      </div>
    </template>
    <template v-else>
      <ui-btn @click="edit" rounded icon="la la-pencil-alt" label="Изменить" />
      <ui-btn
        @click="isCheckDelete = true"
        color="negative"
        icon="la la-trash-alt"
        label="Удалить"
        rounded
      />
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiInputMaterial from '@/lib-components/form/UiInputMaterial.vue'
import UiBtn from '@/lib-components/buttons/UiBtn.vue'
import { Message } from '@/widgets/messages/types/Message'

@Component({
  components: {
    UiBtn,
    UiInputMaterial,
  },
})
export default class MessageControls extends Vue {
  @Prop({ type: Object, required: true })
  message!: Message

  isCheckDelete = false

  @Emit()
  edit() {
    return true
  }

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