<template>
  <div>
    bannerData => {{ bannerData }}
    <Parent
      :banner-data="bannerData"
      :endpoint="endpoint"
      :fields="fields"
      :filters="filters"
      :component-attributes="
        item => ({
          to: {
            name: 'EventsManagerPage',
            params: { slug: item.slug[0] }
          }
        })
      "
    />
  </div>
</template>

<script>
import Parent from '@inside-events/components/pages/CalendarPage'

import checkManagerAccess from '../../mixins/check-manager-access'

export default {
  name: 'EventsCalendarManagerPage',
  $_i18nRootPath: 'customs.MANAGER.events.back',
  components: {
    Parent
  },
  mixins: [checkManagerAccess],
  data() {
    return {
      bannerData: {
        back: {
          title: this.$t('customs.MANAGER.events.back.title'),
          href: {
            name: 'SpaceManagerPage',
            params: { slug: this.$route.params.slug }
          }
        },
        add: ['manager_spaces_events', 'manager_events_categories']
      },
      endpoint: 'content/manager_spaces_events',
      fields: [
        'uuid',
        'title',
        'date',
        'end_date',
        'place',
        'disable_comments',
        'display_hours',
        'slug',
        'content_type',
        { reactions: ['count', { users: ['uuid'] }] },
        { comments: { fields: ['count'], filters: { reverse: true } } },
        {
          manager_events_categories: {
            fields: ['color'],
            filters: { 'status:eq': 1 }
          }
        }
      ],
      filters: {
        modelName: 'categories',
        type: 'selectbox',
        fetch: true,
        label: this.$t('events.CALENDAR.filters.label'),
        reference: 'manager_events_categories',
        fields: ['uuid', 'title'],
        filters: { 'status:eq': 1, sort: 'title:asc' },
        objectValueKey: 'uuid',
        objectLabelKey: 'title'
      }
    }
  },
  beforeMount() {
    if (!this.$_checkManagerAccess) {
      this.$router.push({ name: 'HomePage' })
    }
  }
}
</script>
