<script setup lang="ts">
import Select from 'primevue/select';
import Tag from 'primevue/tag';
import type { TealVersion } from '../teal.store';

defineProps<{
  modelValue: TealVersion | null;
  versions: TealVersion[];
  loading?: boolean;
}>();

const emit = defineEmits<{
  'update:modelValue': [value: TealVersion | null];
}>();

function statusSeverity(status: string): string {
  const map: Record<string, string> = {
    DRAFT: 'warn',
    ACTIVE: 'success',
    ARCHIVED: 'secondary',
  };
  return map[status] ?? 'secondary';
}

function statusLabel(status: string): string {
  const map: Record<string, string> = {
    DRAFT: '초안',
    ACTIVE: '활성',
    ARCHIVED: '보관',
  };
  return map[status] ?? status;
}
</script>

<template>
  <Select
    :modelValue="modelValue"
    :options="versions"
    :loading="loading"
    optionLabel="versionNumber"
    placeholder="버전 선택"
    fluid
    @update:modelValue="emit('update:modelValue', $event)"
  >
    <template #value="{ value }">
      <div v-if="value" class="teal-version-option">
        <span>v{{ value.versionNumber }}</span>
        <Tag
          :value="statusLabel(value.status)"
          :severity="statusSeverity(value.status)"
          style="margin-left: 8px"
        />
      </div>
      <span v-else>버전 선택</span>
    </template>
    <template #option="{ option }">
      <div class="teal-version-option">
        <span>v{{ option.versionNumber }} ({{ option.effectiveDate }})</span>
        <Tag
          :value="statusLabel(option.status)"
          :severity="statusSeverity(option.status)"
          style="margin-left: 8px"
        />
      </div>
    </template>
  </Select>
</template>

<style lang="scss" scoped>
.teal-version-option {
  display: flex;
  align-items: center;
  gap: 4px;
}
</style>
