<template>
  <div class="dashboard-listing">
    <filters-container
      :id="filterId"
      :filters="filters"
      :url-params-enabled="['sites']"
    />

    <table-listing
      id="dashboard-listing"
      :endpoint="`content/${endpoint}`"
      :filter-id="filterId"
      :items-per-page="20"
      :headers="headers"
      :rows="rows"
      :filters="requestFilters"
      :fields="fields"
      :actions="actions"
      :search-in="searchIn"
    />
  </div>
</template>

<script>
import FiltersContainer from '@inside-filters/displays/FiltersContainer'
import TableListing from '@inside-listings/components/TableListing'

export default {
  name: 'dashboard-listing',
  $_i18nRootPath: 'customs.DASHBOARD.listing',
  components: {
    FiltersContainer,
    TableListing
  },
  data() {
    const types = 'shared_documents,space_documents,dashboards,cenexi_notes'

    return {
      filterId: 'dashboard-customer-filters',
      defaultEndpoint: types,
      endpoint: types,
      searchIn: types.split(',')
    }
  },
  beforeMount() {
    const { clients, site, site_title: title } = this.$route.query

    if (clients) {
      this.setStoreAction('setUserInformation', {
        key: 'client',
        value: clients
      })
    }

    if (site) {
      this.setStoreAction('setUserInformation', {
        key: 'site',
        value: { uuid: site, title: title }
      })
    }
  },
  computed: {
    fields() {
      return [
        'title',
        'published_at',
        'content_type',
        'archived_at',
        'admin',
        { authors: ['firstname', 'lastname', 'uuid'] },
        { sites: ['sites', 'uuid'] },
        { clients: ['uuid'] }
      ]
    },
    requestFilters() {
      return {
        'archived:eq': 0,
        sort: 'updated_at:desc',
        ...(this.isAlive(this.site, 'uuid') && {
          sites: { 'uuid:eq': this.site.uuid }
        }),
        ...(this.isAlive(this.client, 'uuid') && {
          clients: { 'uuid:eq': this.client.uuid }
        })
      }
    },
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          placeholder: this.$_tr('filters.search')
        },
        {
          modelName: 'contentType',
          type: 'selectbox',
          label: this.$_tr('filters.type'),
          equality: '',
          filterOn: '',
          inputData: [
            {
              label: this.$_tr('types.shared_documents'),
              value: 'shared_documents'
            },
            {
              label: this.$_tr('types.space_documents'),
              value: 'space_documents'
            },
            {
              label: this.$_tr('types.dashboards'),
              value: 'dashboards'
            },
            {
              label: this.$_tr('types.cenexi_notes'),
              value: 'cenexi_notes'
            }
          ],
          listeners: {
            onDataChange: ({ value }) => {
              this.endpoint = value || this.defaultEndpoint
              this.searchIn = value || this.defaultEndpoint.split(',')
            }
          }
        },
        {
          modelName: 'users',
          type: 'selectbox',
          async: {
            contentType: 'users',
            fields: ['lastname', 'firstname', 'uuid'],
            filters: { status: 1 }
          },
          reference: 'authors',
          fields: ['firstname', 'uuid'],
          objectLabelKey: 'firstname',
          equality: 'eq',
          label: this.$_tr('filters.author'),
          labelCallback: fields => this.$_username(fields),
          objectValueKey: 'uuid'
        }
      ]
    },
    headers() {
      return [
        {
          value: this.$_tr('cols.title'),
          sortable: true,
          key: 'title'
        },
        {
          value: this.$_tr('cols.content_type'),
          sortable: true,
          key: 'content_type'
        },
        {
          value: this.$_tr('cols.author')
        },
        {
          value: this.$_tr('cols.published_at'),
          sortable: true,
          key: 'published_at'
        }
      ]
    },
    rows() {
      return fields => [
        {
          id: 'title',
          class: 'title',
          value: fields.title,
          ...(this.isAlive(fields, ['slug', 0])
            ? {
                tag: 'router-link',
                data: {
                  to: fields.slug[0]
                }
              }
            : {
                tag: 'p'
              })
        },
        {
          id: 'type',
          tag: 'p',
          value: this.$_tr(`types.${fields.content_type}`)
        },
        {
          id: 'authors',
          tag: 'p',
          value: this.$_username(fields.authors)
        },
        {
          id: 'date',
          tag: 'p',
          value: this.$_formatDate(fields.published_at, 'LLL')
        }
      ]
    },
    actions() {
      return ['edit', 'access', 'delete']
    },
    site() {
      return this.getStore('getUserInformation', 'site')
    },
    client() {
      return this.getStore('getUserInformation', 'client')
    }
  },
  mounted() {
    if (this.getStore('getUserInformation', 'client')) {
      const client = this.getStore('getUserInformation', 'client')
      const clientTitle = typeof client === 'string' ? client : client.title

      this.$_triggerSuccessToast({
        title: this.$_tr('client', [clientTitle]),
        text: this.$_tr('site', [
          this.getStore('getUserInformation', 'site').title
        ]),
        duration: -100
      })
    }
  }
}
</script>

<style lang="scss">
.dashboard-listing {
  margin-top: var(--spacing-l);
  order: 2;
}
</style>
