<template>
  <Directory
    endpoint="content/users"
    :fields="requestFields"
    :request-filters="{
      'status:eq': 1,
      [contentType]: { 'uuid:eq': uuid }
    }"
    :filters="filters"
    :headers="headers"
    :rows="scaffoldRows"
    :items-per-page="16"
  >
    <template #card="{ item }">
      <UserCard
        v-bind="item"
        :key="item.uuid"
        :image="$_getContentImage(item.image, 'avatar')"
        :scaffold-overrides="scaffoldOverrides"
      />
    </template>
  </Directory>
</template>

<script>
import { markRaw } from 'vue'

import Directory from '@inside-users/components/lib/Directory'
import UserCard from '@inside-users/components/lib/Card'

import { Avatar } from 'inside-collection/atoms'

export default {
  name: 'GroupDirectory',
  $_i18nRootPath: 'users.LISTING',
  components: { Directory, Avatar, UserCard },
  props: {
    uuid: {
      type: String,
      required: true
    },
    contentType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      requestFields: [
        'uuid',
        'firstname',
        'lastname',
        'image',
        'content_type',
        'direct_line',
        'email',
        { users_status: ['uuid', 'title'] },
        { [this.contentType]: ['uuid', 'title'] }
      ]
    }
  },
  computed: {
    headers() {
      return [
        {},
        {
          value: this.$_tr('headers.firstname'),
          sortable: true,
          key: 'firstname'
        },
        {
          value: this.$_tr('headers.lastname'),
          key: 'lastname',
          sortable: true,
          default: true,
          order: 'asc'
        },
        { value: this.$_tr('headers.status') },
        { value: this.$_tr(`headers.${this.contentType}`) },
        { value: this.$_tr('headers.phone') }
      ]
    },
    filters() {
      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: this.contentType,
          type: 'selectbox',
          fetch: true,
          reference: this.contentType,
          fields: ['title', 'uuid'],
          objectLabelKey: 'title',
          objectValueKey: 'uuid',
          filters: { sort: 'title:asc' },
          label: this.$_tr(`filters.${this.contentType}`)
        }
      ]
    }
  },
  methods: {
    scaffoldOverrides(fields, { addItemBefore, replaceItem }) {
      const space = this.getCheckedData(fields, ['groups', 'data', 0, 'title'])

      addItemBefore('function', {
        id: 'spaces',
        value: space
      })

      replaceItem('function', {
        id: 'direct_line',
        value: this.getCheckedData(fields, 'direct_line')
      })

      replaceItem('phone', {
        id: 'users_status',
        value: this.getCheckedData(fields, ['users_status', 'title'])
      })
    },
    scaffoldRows(fields) {
      return [
        {
          id: 'image',
          class: 'image',
          tag: markRaw(Avatar),
          data: {
            image: this.$_getContentImage(fields.image, 'avatar'),
            size: 'xs'
          },
          cellOptions: {
            width: '45px'
          }
        },
        {
          id: 'user-firstname',
          class: 'firstname',
          value: fields.firstname,
          cellOptions: {
            width: '16%'
          }
        },
        {
          id: 'user-lastname',
          class: 'lastname',
          value: fields.lastname
        },
        {
          id: 'status',
          class: 'status',
          value: this.getCheckedData(fields, ['users_status', 'title'])
        },
        {
          id: 'spaces',
          class: 'spaces',
          children: this.getCheckedData(
            fields,
            [this.contentType, 'data'],
            []
          ).map(({ title }) => ({
            value: title
          }))
        },
        { id: 'phone', value: fields.direct_line }
      ]
    }
  }
}
</script>

<style></style>
