<template>
  <group-by-tools
    root-path="clients.data"
    :fields="fields"
    :filters="filters"
    endpoint="content/sites"
    :onRequestSuccess="onRequestSuccess"
  />
</template>

<script>
import { storage } from '@inside-library/helpers/Storage'

import GroupByTools from '@inside-tools/components/lib/GroupBy'

export default {
  name: 'dashboard-tools-listing-page-customs',
  $_i18nRootPath: 'customs.DASHBOARD.listing',
  components: { GroupByTools },
  data() {
    return {
      onRequestSuccess: ({ data }) =>
        data.map(({ clients, uuid, title, ...rest }) => ({
          ...rest,
          title,
          uuid,
          clients: {
            data: clients.data.map(item => ({
              ...item,
              link: {
                url: {
                  name: this.routeName,
                  query: {
                    site: uuid,
                    clients: item.machine_name,
                    site_title: title
                  }
                }
              }
            }))
          }
        })),
      fields: [
        'uuid',
        'title',
        'content_type',
        'admin',
        {
          clients: {
            fields: [
              'title',
              'uuid',
              'machine_name',
              'link',
              'admin',
              'image',
              'class',
              'content_type'
            ],
            filters: { status: 1, reverse: true, sort: 'title:asc' }
          }
        }
      ],
      filters: { 'status:eq': 1, sort: 'title:asc' }
    }
  },
  computed: {
    routeName() {
      return `Dashboard-${this.$_currentLang}`
    }
  },
  created() {
    if (
      !storage.get('toaster') &&
      this.getStore('getUserInformation', 'client') &&
      this.getUserInfos.is_key_account_manager
    ) {
      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
      })

      storage.set('toaster', 'true')
    }
  }
}
</script>
