<template>
  <div class="feedback-listing-container">
    <EventBack v-bind="fetchedData" />

    <Banner :static-data="{ title: $_tr('feedbacksListing') }" />

    <TemplateContainer>
      <table-listing
        :id="listingId"
        :fields="requestFields"
        :filters="requestFilters"
        :headers="headers"
        :rows="scaffoldRows"
        :selectable="true"
        :mass-actions="[
          {
            id: 'export',
            contentType: 'events_feedbacks',
            drivers: ['csv'],
            defaultFields: [
              `${fetchedData.content_type}.title`,
              'authors.firstname',
              'authors.lastname',
              'speakers',
              'presentation',
              'topic',
              'timing',
              'location',
              ...insertIf(feedbackFormType > 1, 'catering'),
              'message',
              'published_at'
            ],
            listingId,
            editable: false,
            requestFilters: {
              [fetchedData.content_type]: { 'uuid:eq': fetchedData.uuid }
            }
          }
        ]"
        endpoint="content/events_feedbacks"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { markRaw } from 'vue'

import { insertIf } from '@inside-library/helpers/Arrays'

import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import AvatarUsernameUsers from '@inside-users/displays/AvatarUsernameUsers'
import EventBack from '../events/EventBack'

export default {
  name: 'FeedbacksListing',
  $_i18nRootPath: 'customs.EVENTS.LISTING',
  components: { TemplateContainer, Banner, EventBack, AvatarUsernameUsers },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      listingId: 'feedbacks-listing',
      requestFields: [
        'uuid',
        'title',
        'published_at',
        { authors: ['uuid', 'image', 'firstname', 'lastname'] }
      ],
      requestFilters: {
        [this.fetchedData.content_type]: { 'slug:eq': this.$route.params.event }
      }
    }
  },
  computed: {
    headers() {
      return [{ value: this.$_tr('user') }, { value: this.$_tr('answeredAt') }]
    },
    feedbackFormType() {
      return this.fetchedData.feedback_forms.custom_form_type
    }
  },
  methods: {
    insertIf,
    scaffoldRows(fields) {
      return [
        {
          tag: markRaw(AvatarUsernameUsers),
          data: { user: fields.authors }
        },
        {
          class: 'joined-at',
          value: this.$_formatDate(fields.published_at),
          cellOptions: {
            width: '16%'
          }
        }
      ]
    }
  }
}
</script>
