<template>
  <Page
    :extra-fields="extraFields"
    :extra-filters="extraFilters"
    :extra-headers="extraHeaders"
    :extra-rows="extraRows"
    :banner-data="{ page: 'directory', editionEnabled: editionEnabled }"
  >
    <template #default="{ item }">
      <UserCard
        v-bind="item"
        :key="item.uuid"
        :image="$_getContentImage(item.image)"
      />
    </template>
  </Page>
</template>

<script>
import { markRaw } from 'vue'

import Page from '@inside-users/components/pages/DirectoryPage'
import { Link } from 'inside-collection/components'
import UserCard from '../../components/directory/UserCard'

import { isEditionRole } from '../../helpers/index'

export default {
  name: 'DirectoryPage',
  $_i18nRootPath: 'customs.DIRECTORY',
  components: {
    Page,
    UserCard,
    Link
  },
  computed: {
    extraFilters() {
      return [
        {
          modelName: 'departments',
          type: 'selectbox',
          fetch: true,
          reference: 'departments',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.departments')
        },
        {
          modelName: 'users_status',
          type: 'selectbox',
          fetch: true,
          reference: 'users_status',
          fields: ['uuid', 'title', 'name_machine'],
          filters: {
            status: 1,
            sort: 'title:asc'
          },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.usersStatus')
        }
      ]
    },
    extraFields() {
      return [
        'email',
        'city',
        'phone',
        'mobile',
        'function',
        { departments: ['title'] },
        { users_status: ['uuid', 'title', 'name_machine'] },
        { franchised_spaces: ['uuid', 'title'] }
      ]
    },
    extraHeaders() {
      return [
        { value: this.$_tr('headers.usersStatus') },
        { value: this.$_tr('headers.city') },
        { value: this.$_tr('headers.department') },
        { value: this.$_tr('headers.phone') },
        { value: this.$_tr('headers.mobile') },
        { value: this.$_tr('headers.email') }
      ]
    },
    editionEnabled() {
      return isEditionRole()
    }
  },
  methods: {
    extraRows(fields) {
      return [
        {
          id: 'usersStatus',
          class: 'usersStatus',
          value: this.getCheckedData(fields, ['users_status', 'title'])
        },
        {
          id: 'city',
          class: 'city',
          value: fields?.city?.replaceAll(',', '<br>'),
          html: true
        },
        {
          id: 'departments',
          class: 'department',
          children: this.getCheckedData(
            fields,
            ['departments', 'data'],
            []
          ).map(({ title }) => ({ value: title }))
        },
        {
          id: 'phone',
          class: 'phone',
          value: this.getCheckedData(fields, ['phone']),
          tag: fields.phone && markRaw(Link),
          data: {
            href: `tel:${fields.phone}`,
            icon: null,
            external: true
          }
        },
        {
          id: 'mobile',
          class: 'mobile',
          value: this.getCheckedData(fields, ['mobile']),
          tag: fields.mobile && markRaw(Link),
          data: {
            href: `tel:${fields.mobile}`,
            icon: null,
            external: true
          }
        },
        {
          id: 'email',
          class: 'email',
          value: this.getCheckedData(fields, ['email']),
          tag: fields.email && markRaw(Link),
          data: {
            href: `mailto:${fields.email}`,
            icon: null,
            external: true
          }
        }
      ]
    }
  }
}
</script>
