<template>
  <div class="picker-filter" :class="{ open: activeFilterPopover === id }">
    <button
      class="picker-trigger"
      type="button"
      :aria-expanded="activeFilterPopover === id"
      aria-haspopup="dialog"
      @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"
      role="dialog"
      :aria-label="title"
    >
      <header>
        <strong>{{ title }}</strong>
        <button type="button" :aria-label="closeLabel" @click="emit('close')">
          <i class="mdi mdi-close"></i>
        </button>
      </header>
      <div class="picker-option-list">
        <button
          v-for="option in options"
          :key="option.value || `all-${id}`"
          type="button"
          class="picker-option"
          :class="{ active: selectedValue === option.value }"
          @click="emit('select', option.value)"
        >
          {{ option.label }}
        </button>
      </div>
    </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/views/audit-view.css"></style>
<style scoped src="../../assets/styles/views/audit-view-part2.css"></style>
