<script setup lang="ts">
import type { AcceptableValue } from 'reka-ui';
import { computed, useAttrs } from 'vue';
import { Listbox as ShadcnListbox } from '@/components/core/listbox';
import { type UiListboxProps } from './types';
import { cn, omitClass } from '@/lib/utils';

defineOptions({
  name: 'UiListbox',
  inheritAttrs: false,
});

const props = withDefaults(defineProps<UiListboxProps>(), {
  disabled: false,
  multiple: false,
  highlightOnHover: false,
});

const model = defineModel<AcceptableValue | AcceptableValue[]>();

const attrs = useAttrs();
const forwardedAttrs = computed(() => omitClass(attrs));
</script>

<template>
  <ShadcnListbox
    v-bind="forwardedAttrs"
    v-model="model"
    :class="
      cn(
        'rounded-md border border-border-surface-default bg-background-surface-floating shadow-md',
        attrs.class ?? '',
      )
    "
    :default-value="props.defaultValue"
    :multiple="props.multiple"
    :orientation="props.orientation"
    :dir="props.dir"
    :disabled="props.disabled"
    :selection-behavior="props.selectionBehavior"
    :highlight-on-hover="props.highlightOnHover"
    :by="props.by"
  >
    <slot />
  </ShadcnListbox>
</template>
