<template>
  <Parent
    :extra-filters="extraFilters"
    :extra-fields="extraFields"
    :extra-headers="extraHeaders"
    :extra-rows="extraRows"
    pagination="infiniteScroll"
  >
    <template #default="{ item }">
      <UserCard
        v-bind="item"
        :key="item.uuid"
        :image="$_getContentImage(item.image)"
        :scaffold-overrides="scaffoldOverrides"
      />
    </template>
  </Parent>
</template>

<script>
import Parent from '@inside-users/components/pages/DirectoryPage'
import UserCard from '@inside-users/components/lib/Card'

import scaffoldOverrides from '../mixins/card-user-override-mixin'

export default {
  name: 'DirectoryPage',
  $_i18nRootPath: 'users.LISTING',
  components: { Parent, UserCard },
  mixins: [scaffoldOverrides],
  computed: {
    extraFilters() {
      return [
        {
          modelName: 'roles',
          type: 'selectbox',
          fetch: true,
          reference: 'users_roles',
          fields: ['title', 'uuid'],
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.roles')
        },
        {
          modelName: 'status',
          type: 'selectbox',
          fetch: true,
          reference: 'users_status',
          fields: ['title', 'uuid'],
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          filters: { sort: 'title:asc' },
          label: this.$_tr('filters.status')
        },
        {
          modelName: 'spaces',
          type: 'selectbox',
          fetch: true,
          reference: 'spaces',
          filters: { sort: 'title:asc' },
          fields: ['title', 'uuid'],
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.spaces')
        },
        {
          modelName: 'expertises',
          type: 'selectbox',
          fetch: true,
          reference: 'expertises',
          filters: { sort: 'title:asc' },
          fields: ['title', 'uuid'],
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          label: this.$_tr('filters.expertises')
        }
      ]
    },
    extraFields() {
      return [
        'content_type',
        'email',
        'direct_line',
        { users_status: ['uuid', 'title'] },
        { spaces: ['uuid', 'title', 'slug'] },
        { expertises: ['uuid', 'title'] },
        { users_roles: ['uuid', 'title'] }
      ]
    },
    extraHeaders() {
      return [
        { value: this.$_tr('headers.status') },
        { value: this.$_tr('headers.spaces') },
        { value: this.$_tr('headers.phone') }
      ]
    }
  },
  methods: {
    extraRows(fields) {
      const spaces = this.getCheckedData(fields, ['spaces', 'data'], [])

      return [
        {
          id: 'users_status',
          class: 'users-status',
          value: this.getCheckedData(fields, ['users_status', 'title'])
        },
        {
          id: 'spaces',
          class: 'spaces',
          children: spaces.map(({ title }) => ({
            value: title
          }))
        },
        { id: 'phone', value: fields.direct_line }
      ]
    }
  }
}
</script>
