<template>
  <div class="confucius-listing-container">
    <filters-container :id="filtersId" :filters="filters" />

    <table-listing
      id="archived-content-listing"
      v-bind="getAttrs($attrs)"
      endpoint="content/article_blog"
      :fields="fields"
      :filters="requestFilters"
      :headers="headers"
      :rows="rows"
      :on-row-click="onClick"
      :filter-id="filtersId"
      :search-in="['article_blog']"
      :items-per-page="50"
      :actions="actions()"
      :mass-actions="massActions"
    />
  </div>
</template>

<script>
import { markRaw } from 'vue'

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

import { getAttrs } from '@inside-library/helpers/Attrs'

export default {
  name: 'ConfuciusListing',
  $_i18nRootPath: 'customs.CONFUCIUS',
  components: {
    Avatar
  },
  data() {
    return {
      filtersId: 'archived-content-filters',
      fields: [
        'uuid',
        'title',
        'published_at',
        'slug',
        'content_type',
        'admin',
        'total_count',
        'count',
        'tree',
        'pid',
        'content',
        'start_date',
        'end_date',
        'image',
        'is_headline',
        'langcode',
        'status',
        'article_availability',
        { authors: ['uuid', 'lastname', 'firstname', 'image'] }
      ],
      requestFilters: {
        sort: 'published_at:desc'
      }
    }
  },
  computed: {
    headers() {
      return [
        {
          value: this.$_tr('HEADER.title'),
          sortable: true,
          key: 'title'
        },
        {
          value: this.$_tr('HEADER.authors'),
          key: 'authors'
        },
        {
          value: this.$_tr('HEADER.publishedAt'),
          sortable: true,
          key: 'published_at'
        },
        {
          value: this.$_tr('HEADER.articleAvailability'),
          key: 'article_availability'
        },
        {
          value: this.$_tr('HEADER.isHeadline'),
          key: 'is_headline'
        },
        {
          value: this.$_tr('HEADER.status'),
          key: 'status'
        }
      ]
    },
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          placeholder: this.$_tr('filters.search')
        },
        {
          modelName: 'users',
          type: 'selectbox',
          async: {
            contentType: 'users',
            fields: ['lastname', 'firstname', 'uuid'],
            filters: { status: 1 }
          },
          reference: 'authors',
          equality: 'eq',
          label: this.$_tr('filters.author'),
          labelCallback: fields => this.$_username(fields),
          objectValueKey: 'uuid'
        }
      ]
    },
    massActions() {
      return [
        {
          id: 'export',
          contentType: 'article_blog',
          label: this.$_tr('common.actions.export'),
          drivers: ['csv', 'excel'],
          defaultFields: [
            'uuid',
            'title',
            'published_at',
            'authors.firstname',
            'authors.lastname',
            'article_availability',
            'is_headline'
          ]
        }
      ]
    }
  },
  methods: {
    getAttrs,
    onClick(item) {
      this.$router.push({
        name: 'Edition',
        params: {
          content: 'article_blog',
          uuid: item.uuid
        }
      })
    },
    actions() {
      return ['edit']
    },
    rows(fields) {
      return [
        {
          id: 'title',
          class: 'title',
          tag: 'p',
          value: fields.title
        },
        {
          id: 'authors',
          class: 'authors',
          tag: 'div',
          children: [
            {
              tag: 'p',
              class: 'username',
              value: this.$_username(fields.authors)
            },
            {
              id: 'image',
              class: 'image',
              tag: markRaw(Avatar),
              data: {
                image: this.$_getContentImage(fields.authors.image, 'avatar'),
                size: 'xs'
              },
              cellOptions: { width: '48px' }
            }
          ]
        },
        {
          id: 'published_at',
          class: 'published_at',
          tag: 'p',
          value: this.$_formatDate(
            new Date(fields.published_at),
            'L',
            this.$_currentLang
          )
        },
        {
          id: 'article_availability',
          class: 'article_availability',
          tag: 'p',
          value: this.getCheckedData(fields, ['article_availability', 'data'])
            .map(({ title }) => title)
            .join('<br>'),
          html: true
        },
        {
          id: 'is_headline',
          class: 'is_headline',
          tag: 'p',
          value: fields.is_headline ? this.$_tr('yes') : this.$_tr('no')
        },
        {
          id: 'status',
          class: 'status',
          tag: 'p',
          value: fields.status
            ? this.$_tr('published')
            : this.$_tr('unpublished')
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.confucius-listing-container {
  .authors {
    display: flex;
    flex-direction: row-reverse;
    justify-content: left;

    p {
      height: min-content;
      margin: auto 0 auto var(--spacing-s);
    }
  }
}
</style>
