<template>
  <span v-if="multiple" class="select-display">
    <a-tag
      v-for="v in (value as string[] | null | undefined) ?? []"
      :key="v"
      :color="colorOf(v)"
      size="small"
    >
      {{ labelOf(v) }}
    </a-tag>
  </span>
  <a-tag
    v-else-if="value != null && value !== ''"
    :color="colorOf(value as string)"
    size="small"
  >
    {{ labelOf(value as string) }}
  </a-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Tag as ATag } from 'ant-design-vue'

interface ISelectOption {
  label: string
  value: string
  color?: string
}

const props = defineProps<{
  value: string | string[] | null | undefined
  options: ISelectOption[] | string[] | undefined
  multiple?: boolean
}>()

// Normalize options to a lookup map
const optionMap = computed<Map<string, ISelectOption>>(() => {
  const m = new Map<string, ISelectOption>()
  if (!props.options) return m
  for (const opt of props.options) {
    if (typeof opt === 'string') {
      m.set(opt, { label: opt, value: opt })
    } else {
      const o = opt as ISelectOption
      m.set(o.value, o)
    }
  }
  return m
})

function labelOf(value: string): string {
  return optionMap.value.get(value)?.label ?? value
}

function colorOf(value: string): string {
  return optionMap.value.get(value)?.color ?? 'default'
}
</script>
