<script setup lang="ts">
import { type Status, useStatusesStore } from '@/stores/statuses.ts'
import { ref, watchEffect } from 'vue'

const statusesStore = useStatusesStore()

const props = defineProps<{ status?: Status }>()
const selected = ref<Status>()

watchEffect(() => props.status && setSelected(props.status))

function setSelected(status: Status) {
  selected.value = status
}

function onSelect(status: Status) {
  console.log(status)
  selected.value = status
}
</script>

<template>
  <v-menu width="200">
    <template v-slot:activator="{ props }">
      <v-btn v-bind="props" color="blue" append-icon="mdi-menu-down">{{ selected?.name }}</v-btn>
    </template>

    <v-list density="compact" class="mt-1">
      <template v-for="el in statusesStore.statuses" :key="el.id">
        <v-list-item @click="onSelect(el)">
          <v-list-item-title>
            <span>{{ el.name }}</span>
          </v-list-item-title>
        </v-list-item>
      </template>
    </v-list>
  </v-menu>
</template>

<style scoped lang="scss"></style>
