<template>
  <div class="picker-filter document-filter" :class="[rootClass, { open: isOpen }]">
    <button
      class="picker-trigger filter-btn"
      :class="triggerClass"
      type="button"
      :aria-expanded="isOpen"
      aria-haspopup="listbox"
      @click="emit('toggle', id)"
    >
      <i v-if="icon" :class="icon"></i>
      <span class="picker-label">{{ label }}</span>
      <i class="mdi mdi-chevron-down"></i>
    </button>
    <div
      v-if="isOpen"
      class="picker-popover document-filter-menu"
      :class="menuClass"
      role="listbox"
      :aria-label="title || label"
    >
      <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>
import { computed } from 'vue'

const props = defineProps({
  id: { type: String, required: true },
  title: { type: String, default: '' },
  activeFilterKey: { type: String, default: '' },
  label: { type: String, default: '' },
  options: { type: Array, default: () => [] },
  selectedValue: { type: [String, Number, Boolean], default: '' },
  rootClass: { type: [String, Array, Object], default: '' },
  triggerClass: { type: [String, Array, Object], default: '' },
  menuClass: { type: [String, Array, Object], default: '' },
  icon: { type: String, default: '' }
})

const emit = defineEmits(['toggle', 'select'])
const isOpen = computed(() => props.activeFilterKey === props.id)
</script>

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