<script lang="tsx">
import { defineComponent, type PropType } from 'vue'
import RelationSelect from '../../selects/relation-select'
import { RelationSelectFilter } from '../Filters'

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

    return () => (
      <div class="ark-ui-filterbar-relation-select-filter">
        <RelationSelect
          placeholder={props.filter.label}
          modelValue={props.filter.value}
          onValueChange={setValue}
          endpoint={props.filter.endpoint}
          itemConverter={props.filter.itemConverter}
          params={props.filter.params}
          searchKey={props.filter.searchKey}
          paramsSerialization={props.filter.paramsSerialization}
          requestPageKey={props.filter.requestPageKey}
          requestPerPageKey={props.filter.requestPerPageKey}
          responseItemsKey={props.filter.responseItemsKey}
          responseTotalKey={props.filter.responseTotalKey}
          paginationType={props.filter.paginationType}
          additionalItems={props.filter.additionalItems}
          showItemsCount={5}
          appearance='form'
        />
      </div>
    )
  },
})
</script>

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