<template>
  <ui-btn-menu
    class="ui-list-card__menu"
    :class="{ 'ui-list-card__menu_hidden': isEditMode && !isOpen }"
  >
    <ui-menu v-model="isOpen">
      <ui-menu-group>
        <ui-menu-item @click="edit" icon="la la-edit">Изменить</ui-menu-item>
        <ui-menu-item @click="remove" icon="la la-trash">Удалить</ui-menu-item>
      </ui-menu-group>
    </ui-menu>
  </ui-btn-menu>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator'
import UiBtnMenu from '../../buttons/UiBtnMenu.vue'
import UiMenu from '../../menu/UiMenu.vue'
import UiMenuGroup from '../../menu/UiMenuGroup.vue'
import UiMenuItem from '../../menu/UiMenuItem.vue'

@Component({
  components: { UiMenuItem, UiMenuGroup, UiMenu, UiBtnMenu },
})
export default class ScheduleItemMenu extends Vue {
  @Prop({ type: Boolean, required: true })
  isEditMode!: boolean

  isOpen = false

  @Emit()
  edit() {
    this.isOpen = false

    return true
  }

  @Emit()
  remove() {
    this.isOpen = false

    return true
  }
}
</script>
