<template>
  <task-level :level="currentLevel" class="level-menu-btn">
    <q-menu
      v-on="$attrs"
      v-bind="$listeners"
      :offset="[12, -45]"
      content-class="level-menu"
    >
      <div class="flex column ui-gap-y-sm">
        <task-level
          @click="change(level)"
          v-for="level in levels"
          :level="level"
          :key="level"
          v-close-popup
        />
      </div>
    </q-menu>
  </task-level>
</template>

<style lang="sass">
.level-menu
  padding: 12px
  background-color: #fff
  border-radius: 16px
</style>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import TaskLevelHelper from '@/widgets/tasks/helpers/TaskLevelHelper'
import TaskLevel from '@/widgets/tasks/components/tasks/task/TaskLevel.vue'
import { QMenu } from 'quasar'

@Component({
  components: { TaskLevel, QMenu },
  inheritAttrs: false,
})
export default class TaskLevelMenu extends Vue {
  @Prop(Number)
  currentLevel!: number

  get levels(): number[] {
    return TaskLevelHelper.getLevels()
  }

  @Emit()
  change(level: number) {
    return level
  }
}
</script>
