<script lang="tsx">
import { defineComponent, type PropType } from 'vue'
import DefaultSelect from '../../selects/default-select'
import { DefaultSelectFilter } from '../Filters'

export default defineComponent({
  props: {
    filter: {
      type: Object as PropType<DefaultSelectFilter>,
      required: true,
    },
  },
  setup(props) {
    const setValue = (val: { id: string, name: string } | undefined) => {
      props.filter.addValue(val)
    }

    return () => (
      <div class="ark-ui-filterbar-default-select-filter">
        <DefaultSelect
          items={props.filter.options}
          placeholder={props.filter.label}
          modelValue={props.filter.value}
          onValueChange={setValue}
          showItemsCount={5}
          appearance='form'
        />
      </div>

    )
  },
})
</script>

<style lang="scss" scoped>
</style>
