<template>
  <div class="register-participants-container">
    <EventBack v-bind="fetchedData" />

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

    <TemplateContainer>
      <table-listing
        :id="listingId"
        :endpoint="endpoint"
        :fields="requestFields"
        :filters="requestFilters"
        :headers="headers"
        :rows="scaffoldRows"
        :selectable="true"
        :items-per-page="20"
        :mass-actions="[
          {
            id: 'export',
            contentType: 'events_subscriptions',
            drivers: ['csv'],
            defaultFields: [
              `${fetchedData.content_type}.title`,
              'authors.firstname',
              'authors.lastname',
              'message',
              ...insertIf(registerFormType > 1, 'dietary_requirements'),
              ...insertIf(registerFormType > 2, 'transports.title'),
              'languages.title',
              'published_at'
            ],
            listingId,
            editable: false,
            requestFilters: {
              [fetchedData.content_type]: { 'uuid:eq': fetchedData.uuid }
            }
          }
        ]"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import { markRaw } from 'vue'

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

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: 'RegisterParticipants',
  $_i18nRootPath: 'customs.EVENTS.LISTING',
  components: { Banner, TemplateContainer, EventBack, AvatarUsernameUsers },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      listingId: 'participants-listing',
      endpoint: 'content/events_subscriptions',
      requestFields: [
        'uuid',
        'title',
        'published_at',
        'custom_form_type',
        { authors: ['uuid', 'firstname', 'lastname', 'image'] }
      ],
      requestFilters: {
        [this.fetchedData.content_type]: {
          'slug:eq': this.$route.params.event
        }
      }
    }
  },
  computed: {
    headers() {
      return [
        { value: this.$_tr('user') },
        { value: this.$_tr('registeredAt') }
      ]
    },
    registerFormType() {
      return this.fetchedData.register_forms.custom_form_type
    }
  },
  methods: {
    insertIf,
    formatHref,
    scaffoldRows(fields) {
      return [
        {
          tag: markRaw(AvatarUsernameUsers),
          data: { user: fields.authors }
        },
        {
          class: 'joined-at',
          value: this.$_formatDate(fields.published_at),
          cellOptions: {
            width: '16%'
          }
        }
      ]
    }
  }
}
</script>
