import theme from '#build/ui/input-menu'

import type { UseComponentIconsProps } from '../composables/useComponentIcons'

import type { AvatarProps, ChipProps, InputProps } from '../types'

import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils'

import type { AcceptableValue, ArrayOrNested, GetItemKeys, GetItemValue, GetModelValue, GetModelValueEmits, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils'

type InputMenu = ComponentConfig<typeof theme, AppConfig, 'inputMenu'>

import { useFormField } from '../composables/useFormField'

import { useLocale } from '../composables/useLocale'

import { usePortal } from '../composables/usePortal'

import { compare, get, isArrayOfArray } from '../utils'

import { compare, get, getDisplayValue, isArrayOfArray } from '../utils'

import { tv } from '../utils/tv'

import UIcon from './Icon.vue'

import UAvatar from './Avatar.vue'

buttonGroup: orientation.value

}))

function displayValue(value: T): string {

const item = items.value.find(item => compare(typeof item === 'object' && props.valueKey ? get(item as Record<string, any>, props.valueKey as string) : item, value))

return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)

function displayValue(value: GetItemValue<T, VK>): string {

return getDisplayValue(items.value, value, {

labelKey: props.labelKey,

valueKey: props.valueKey

}) ?? ''

}

const groups = computed<InputMenuItem[][]>(() =>

: []

)

// eslint-disable-next-line vue/no-dupe-keys

const items = computed(() => groups.value.flatMap(group => group))

const items = computed(() => groups.value.flatMap(group => group) as T[])

const filteredGroups = computed(() => {

if (props.ignoreFilter || !searchTerm.value) {

<TagsInputItem v-for="(item, index) in tags" :key="index" :value="item" :class="ui.tagsItem({ class: [props.ui?.tagsItem, isInputItem(item) && item.ui?.tagsItem] })">

<TagsInputItemText :class="ui.tagsItemText({ class: [props.ui?.tagsItemText, isInputItem(item) && item.ui?.tagsItemText] })">

<slot name="tags-item-text" :item="(item as NestedItem<T>)" :index="index">

{{ displayValue(item as T) ?? item }}

{{ displayValue(item as GetItemValue<T, VK>) }}

</slot>

</TagsInputItemText>