<template>
  <FormGroup :label="t('showMeta.owners')" class="tw-order-last" :is-saving="owners.isSaving">
    <ComboBoxSimple
      v-model="owners.value"
      :disabled="!authStore.isSuperuser"
      :search-provider="searchUsers"
    >
      <template #default="{ choice, ...itemAttrs }">
        <li v-bind="itemAttrs">
          <UserPreview :user="choice as SteeringUser" transparent />
        </li>
      </template>
      <template #selected="{ deselect }">
        <template v-for="user in owners.value" :key="user.id">
          <UserPreview :user="user" removable @remove="deselect(user)" />
        </template>
      </template>
    </ComboBoxSimple>
  </FormGroup>
</template>

<script lang="ts" setup>
import { useI18n } from '@/i18n'
import { Show } from '@/types'
import FormGroup from '@/components/generic/FormGroup.vue'
import ComboBoxSimple from '@/components/ComboBoxSimple.vue'
import UserPreview from '@/components/UserPreview.vue'
import { useAuthStore, useShowStore, useUserStore } from '@/stores'
import { useRelationList } from '@/form'
import { SteeringUser } from '@/stores/auth'

const props = defineProps<{
  show: Show
}>()

const { t } = useI18n()
const authStore = useAuthStore()
const userStore = useUserStore()
const showStore = useShowStore()
const owners = useRelationList(showStore, () => props.show, 'ownerIds', userStore, {
  sortBy: ['lastName', 'firstName', 'username', 'email'],
})

function searchUsers(query: string, signal: AbortSignal) {
  return userStore.list({
    query: new URLSearchParams({ search: query }),
    requestInit: { signal },
  })
}
</script>