<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { ElPopover } from 'element-plus'
import { computed } from 'vue'

interface Props {
  label: string
  placeholder: string
  modelValue: string
  options: string[]
  popoverProps: Record<string, any>
  wide?: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'update:modelValue': [value: string]
  close: []
}>()

const isActive = computed(() => {
  return !!props.modelValue
})

const displayLabel = computed(() => {
  return props.modelValue || props.placeholder
})

function selectOption(value: string) {
  emit('update:modelValue', value)
  emit('close')
}
</script>

<template>
  <el-popover v-bind="popoverProps" :width="220">
    <template #reference>
      <button
        class="filter-chip"
        :class="{ active: isActive, wide }"
        type="button"
      >
        <span>{{ displayLabel }}</span>
        <el-icon><ArrowDown /></el-icon>
      </button>
    </template>
    <div class="filter-menu">
      <button
        type="button"
        :class="{ active: !modelValue }"
        @click="selectOption('')"
      >
        {{ placeholder }}
      </button>
      <button
        v-for="item in options"
        :key="item"
        type="button"
        :class="{ active: modelValue === item }"
        @click="selectOption(item)"
      >
        {{ item }}
      </button>
    </div>
  </el-popover>
</template>

<style src="@/styles/home-filters.css"></style>
