<template>
  <Page
    :back="{
      href: { name: 'NominationsListingPage' },
      title: $_tr('back')
    }"
    :extraFields="extraFields"
    :content-options="{
      ...contentOptions,
      categoriesConfig: m_categoriesConfig
    }"
    :related-options="relatedOptions"
    content-type="movements"
    fieldsContentType="news"
    class="movement-page-container"
  />
</template>

<script>
import { Title } from 'inside-collection/atoms'

import Page from '@inside-news/components/pages/NewsPage'

import FullOverridesMixin from '../../mixins/movements-overrides-mixin'

export default {
  name: 'MovementPage',
  $_i18nRootPath: 'customs.MOVEMENT',
  components: {
    Page,
    Title
  },
  mixins: [FullOverridesMixin],
  data() {
    return {
      extraFields: [
        'function',
        'total_views',
        'unique_views',
        'content',
        'image',
        {
          movements_categories: ['uuid', 'title', 'color', 'slug']
        },
        {
          entities: ['uuid', 'title', 'slug']
        }
      ],
      contentOptions: {
        statisticsEnabled: true,
        scaffoldOverrides: this.m_fullOverrides
      },
      relatedOptions: {
        extraFields: [
          'image',
          {
            movements_categories: ['uuid', 'title', 'color', 'slug']
          },
          { entities: ['title', 'uuid', 'slug'] },
          { reactions: ['count', { users: ['uuid'] }] },
          { comments: ['count'] }
        ],
        componentAttributes: data => ({
          scaffoldOverrides: (data, { deleteItems }) => {
            deleteItems('bookmarks')
          },
          to: { name: 'NominationPage', params: { slug: data.slug[0] } },
          extraCategoriesConfig: this.m_categoriesConfig
        })
      }
    }
  }
}
</script>

<style lang="scss">
.movement-page-container {
  .function {
    margin-bottom: var(--spacing-l);
  }
}
</style>
