<script setup lang="ts">
import { computed } from 'vue'
import { usePrefStore } from '@/store/prefStore'
import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
} from '@/components/ui/select'

interface Props {
  defaultLlm: string
  modelValue: string | null | undefined
  customClass?: string
  hideChevron?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  customClass: 'max-w-[200px]',
  hideChevron: false,
})

const emit = defineEmits<{ (e: 'update:modelValue', v: string): void }>()
const prefs = usePrefStore()

const activeId = computed({
  get: () => props.modelValue ?? props.defaultLlm,
  set: (v) => {
    if (props.modelValue !== undefined) emit('update:modelValue', v)
    else prefs.setBaseLlmid(v)
  },
})
</script>

<template>
  <Select v-model="activeId">
    <SelectTrigger
      :class="props.customClass"
      :hide-chevron="hideChevron"
      class="data-[state=open]:border-primary"
    >
      <slot name="icon" />
      <SelectValue />
    </SelectTrigger>

    <SelectContent>
      <SelectGroup>
        <SelectItem v-for="llm in prefs.llms" :key="llm.id" :value="llm.id" :title="llm.name">
          {{ llm.name }}
        </SelectItem>
      </SelectGroup>
    </SelectContent>
  </Select>
</template>
