<template>
  <Parent
    :headers="headers"
    :rows="rows"
    :filters="filters"
    :fields="requestFields"
    :request-filters="requestFilters"
    :search-in="searchIn"
    :banner-data="bannerData"
    modal-size="m"
  />
</template>

<script>
import { markRaw } from 'vue'

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

import Parent from '@inside-users/components/pages/DirectoryPage'

export default {
  name: 'DirectoryPage',
  $_i18nRootPath: 'customs.USERS_DIRECTORY',
  components: {
    Avatar,
    Link,
    Parent
  },
  data() {
    return {
      bannerData: {
        html: true,
        staticDataFallback: {
          title: this.$t(
            'users.DIRECTORY_PAGE.title',
            this.$store.getters.getCurrentLang
          )
        }
      },
      requestFields: [
        'uuid',
        'firstname',
        'lastname',
        { services: ['uuid', 'title'] },
        { entities: ['uuid', 'title'] },
        { locations: ['uuid', 'title'] },
        'image',
        'email',
        'phone',
        'mobile_phone',
        'function',
        'content_type',
        'admin'
      ],
      requestFilters: {
        'status:eq': 1,
        'is_maintenance:eq': 0,
        sort: 'lastname:asc'
      },
      searchIn: ['users']
    }
  },
  computed: {
    headers() {
      return [
        {},
        {
          value: this.$_tr('headers.firstname'),
          sortable: true,
          key: 'firstname'
        },
        {
          value: this.$_tr('headers.lastname'),
          sortable: true,
          key: 'lastname',
          default: true
        },
        { value: this.$_tr('headers.services') },
        { value: this.$_tr('headers.entities') },
        { value: this.$_tr('headers.city') },
        { value: this.$_tr('headers.mobile') }
      ]
    },
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          label: this.$_tr('filters.search')
        },
        {
          modelName: 'services',
          type: 'selectbox',
          fetch: true,
          reference: 'services',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.services')
        },
        {
          modelName: 'entities',
          type: 'selectbox',
          fetch: true,
          reference: 'entities',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.entities')
        },
        {
          modelName: 'locations',
          type: 'selectbox',
          fetch: true,
          reference: 'locations',
          fields: ['uuid', 'title'],
          filters: { status: 1, sort: 'title:asc' },
          objectValueKey: 'uuid',
          objectLabelKey: 'title',
          label: this.$_tr('filters.locations')
        }
      ]
    }
  },
  methods: {
    rows(fields) {
      return [
        {
          id: 'image',
          class: 'image',
          tag: markRaw(Avatar),
          data: {
            image: this.$_getContentImage(fields.image, 'avatar'),
            size: 'xs'
          },
          cellOptions: { width: this.$_theme('spacingXl') }
        },
        {
          id: 'firstname',
          class: 'firstname',
          value: fields.firstname
        },
        {
          id: 'lastname',
          class: 'lastname',
          value: fields.lastname
        },
        {
          id: 'services',
          class: 'services',
          value: this.getCheckedData(fields, ['services', 'data', 0, 'title'])
        },
        {
          id: 'entities',
          class: 'entities',
          value: this.getCheckedData(fields, ['entities', 'data', 0, 'title'])
        },
        {
          id: 'locations',
          class: 'locations',
          value: this.getCheckedData(fields, ['locations', 'data', 0, 'title'])
        },
        {
          id: 'mobile',
          class: 'mobile',
          ...(fields.mobile_phone
            ? {
                tag: markRaw(Link),
                data: {
                  href: `tel:${fields.mobile_phone}`,
                  icon: null,
                  external: true
                }
              }
            : {}),
          value: fields.mobile_phone
        }
      ]
    }
  }
}
</script>
