<template>
  <div class='dropdown'>
    <button
      id='dropdown-button'
      rounded-lg
      bg-base2
      c-text
      p2
      b-2
      b-text
      b-solid
      class='dropdown-button'
      aria-haspopup='true'
      :aria-expanded='isOpen'
      @click='() => isOpen = !isOpen'
    >
      {{ selectedOption || defaultOption }}
    </button>
    <ul
      v-if='isOpen'
      bg-base2
      c-text
      list-none
      rounded-lg
      p4
      b-2
      b-text
      b-solid
      class='dropdown-menu'
      role='menu'
      aria-labelledby='dropdown-button'
    >
      <li
        v-for='(option, key) in optionsRef'
        :key='key'
        role='menuitem'
        tabindex='0'
        @click='selectOption(key)'
        @keyup.enter='selectOption(key)'
      >
        {{ option.name }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCookie } from '#imports'

// Define props types
const props = defineProps<{
  options: Record<string, { name: string }>
  modelValue: string
  defaultOption: string
  cookieName: string
}>()

const { options, modelValue, defaultOption, cookieName } = props

const optionsRef = ref(options)

const cookie = useCookie(cookieName)

const isOpen = ref(false)
const selectedOption = ref(options[modelValue]?.name || defaultOption)

const selectOption = (key: string) => {
  const option = options[key]

  // Update classes to use the selected option
  document.body.classList.remove(...Object.keys(options))
  document.body.classList.add(key)

  // Update cookie
  cookie.value = key

  // Update selected option
  selectedOption.value = option.name

  // Close dropdown
  isOpen.value = false
}
</script>
