<template>
  <div
    class="DropDown"
    :class="{ active }"
    ref="dropdown"
  >
    <button @click="active = !active">
      <span>{{ current.label }}</span>
      <Icon class="icon" name="uil:angle-down" mode="svg" />
    </button>
    <ul>
      <li
        v-for="element in elements"
        @click="click(element)"
        :class="{ selected : element.value === current.value }"
      >
        {{ element.label }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import type { DropDownElement } from '../../../../shared/DropDown'

type Props = {
  elements : DropDownElement[]
  current : DropDownElement
}

const { elements = [] } = defineProps<Props>()
const emit = defineEmits(['click'])

const active = ref(false)
const dropdown = useTemplateRef<HTMLDivElement>('dropdown')

const click = (element : DropDownElement) => {
  emit('click', element)
  active.value = false
}

onMounted(() => {
  onClickOutside(dropdown, () => active.value = false)
})
</script>
