<script setup>
const props = defineProps({
  models: Array,
  selectedModelIdentifier: String,
  activeModelColor: String,
  showModelMenu: Boolean,
});
const emit = defineEmits(['update:model', 'update:menu']);

const selectedModelName = computed(() => {
  const model = props.models.find((m) => m.identifier === props.selectedModelIdentifier);
  return model ? model.name : 'Select Model';
});
</script>

<template>
  <VMenu :model-value="showModelMenu" location="top" @update:model-value="emit('update:menu', $event)">
    <template v-slot:activator="{ props: menuProps }">
      <VBtn
        v-bind="menuProps"
        :color="activeModelColor"
        variant="text"
        class="text-none model-select-btn"
        density="comfortable"
      >
        <span class="d-none d-sm-block">{{ selectedModelName }}</span>
        <span class="d-block d-sm-none">Model</span>
        <VIcon icon="tabler-chevron-down" class="ms-1" />
      </VBtn>
    </template>

    <VList density="compact" max-height="300">
      <VListItem
        v-for="model in models"
        :key="model.identifier"
        :value="model.identifier"
        @click="emit('update:model', model.identifier); emit('update:menu', false)"
      >
        <template v-slot:prepend>
          <div
            class="model-color-indicator"
            :style="`background-color: var(--v-theme-${model.color})`"
          ></div>
        </template>
        <VListItemTitle>{{ model.name }}</VListItemTitle>
      </VListItem>
    </VList>
  </VMenu>
</template>

<style scoped>
.model-select-btn {
  min-width: auto;
  padding: 0 8px;
}

.model-color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}
</style>
