<template>
  <div class="picker-filter document-filter" :class="{ open: activeFilterPopover === id }">
    <button
      class="picker-trigger filter-btn"
      type="button"
      :aria-expanded="activeFilterPopover === id"
      aria-haspopup="listbox"
      @click="emit('toggle', id)"
    >
      <span class="picker-label">{{ label }}</span>
      <i class="mdi mdi-chevron-down"></i>
    </button>
    <div
      v-if="activeFilterPopover === id"
      class="picker-popover document-filter-menu"
      role="listbox"
      :aria-label="title"
    >
      <button
        v-for="option in options"
        :key="option.value || `all-${id}`"
        type="button"
        role="option"
        :aria-selected="selectedValue === option.value"
        :class="{ active: selectedValue === option.value }"
        @click="emit('select', option.value)"
      >
        {{ option.label }}
      </button>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  name: 'AuditPickerFilter'
})

defineProps({
  id: { type: String, required: true },
  title: { type: String, required: true },
  closeLabel: { type: String, required: true },
  activeFilterPopover: { type: String, default: '' },
  label: { type: String, default: '' },
  options: { type: Array, default: () => [] },
  selectedValue: { type: [String, Number, Boolean], default: '' }
})

const emit = defineEmits(['toggle', 'close', 'select'])
</script>

<style scoped src="../../assets/styles/components/document-list-shared.css"></style>
