import { useAppConfig } from '#imports'

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

import { omit, get } from '../utils'

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

import { highlight } from '../utils/fuse'

import { pickLinkProps } from '../utils/link'

import { getEstimateSize } from '../utils/virtualizer'

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

import UIcon from './Icon.vue'

import UAvatar from './Avatar.vue'

import UButton from './Button.vue'

const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'disabled', 'multiple', 'modelValue', 'defaultValue', 'highlightOnHover'), emits)

const inputProps = useForwardProps(reactivePick(props, 'loading'))

const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, { estimateSize: 32 }))

const virtualizerProps = toRef(() => {

if (!props.virtualize) return false

return defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {

estimateSize: getEstimateSize(filteredItems.value, 'md', props.descriptionKey as string)

})

})

const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: CommandPaletteItem, group?: CommandPaletteGroup, index: number }>({

props: {

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

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

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

import { getEstimateSize } from '../utils/virtualizer'

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

import UIcon from './Icon.vue'

import UAvatar from './Avatar.vue'

const portalProps = usePortal(toRef(() => props.portal))

const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)

const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)

const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {

estimateSize: ({

xs: 24,

sm: 28,

md: 32,

lg: 36,

xl: 40

})[props.size || 'md']

}))

const virtualizerProps = toRef(() => {

if (!props.virtualize) return false

return defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {

estimateSize: getEstimateSize(items.value, inputSize.value || 'md', props.descriptionKey as string)

})

})

const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)

const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps>(props)

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

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

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

import { getEstimateSize } from '../utils/virtualizer'

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

import UIcon from './Icon.vue'

import UAvatar from './Avatar.vue'

const portalProps = usePortal(toRef(() => props.portal))

const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)

const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)

const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {

estimateSize: ({

xs: 24,

sm: 28,

md: 32,

lg: 36,

xl: 40

})[props.size || 'md']

}))

const virtualizerProps = toRef(() => {

if (!props.virtualize) return false

return defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {

estimateSize: getEstimateSize(items.value, props.size || 'md', props.descriptionKey as string)

})

})

const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t('selectMenu.search'), variant: 'none' }) as InputProps)

const { emitFormBlur, emitFormFocus, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)

import { defu } from 'defu'

import { useAppConfig } from '#imports'

import { get } from '../utils'

import { getEstimateSize } from '../utils/virtualizer'

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

import UIcon from './Icon.vue'

return (level: number) => `calc(var(--spacing) * ${(level - 1) * config.perLevel + config.base})`

})

const virtualizerProps = toRef(() => !!props.virtualize && defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {

estimateSize: ({

xs: 24,

sm: 28,

md: 32,

lg: 36,

xl: 40

})[props.size || 'md']

}))

const virtualizerProps = toRef(() => {

if (!props.virtualize) return false

return defu(typeof props.virtualize === 'boolean' ? {} : props.virtualize, {

estimateSize: getEstimateSize(props.items || [], props.size || 'md')

})

})

const [DefineTreeTemplate, ReuseTreeTemplate] = createReusableTemplate<{ items?: TreeItem[], level: number }, TreeSlots<T>>()

const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: TreeItem, index: number, level: number }, TreeSlots<T>>({

import { get } from './index'

function hasDescription(item: any, descriptionKey: string): boolean {

if (typeof item !== 'object' || item === null) {

return false

}

const value = get(item, descriptionKey)

return value !== undefined && value !== null && value !== ''

}

function getSize(size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', hasDescription: boolean): number {

if (hasDescription) {

return ({

xs: 44,

sm: 48,

md: 52,

lg: 56,

xl: 60

})[size]

}

return ({

xs: 24,

sm: 28,

md: 32,

lg: 36,

xl: 40

})[size]

}

/**

* Get estimate size for virtualizers that checks each item individually

* NOTE: This requires Reka UI to support functions for estimateSize (https://github.com/unovue/reka-ui/pull/2288)

* Until then, we check if ANY item has a description and use that for all items

*/

export function getEstimateSize(items: any[], size: 'xs' | 'sm' | 'md' | 'lg' | 'xl', descriptionKey?: string): number {

// TODO: Once Reka UI supports functions, uncomment and change return type to: number | ((index: number) => number)

// return (index: number) => {

// const item = items[index]

// const hasDescription = descriptionKey ? hasDescription(item, descriptionKey) : false

// return getSize(size, hasDescription)

// }

// For now, check if ANY item has a description and use a static size

const anyHasDescription = descriptionKey ? items.some(item => hasDescription(item, descriptionKey)) : false

return getSize(size, anyHasDescription)

}