<template>
  <FullContentPage
    :printable="false"
    :commentsOptions="{ answersEnabled: false }"
    :contentOptions="{
      scaffoldOverrides,
      categoriesConfig,
      dateKey: 'updated_at'
    }"
    :extraFields="extraFields"
    :filters="{ 'uuid:eq': uuid }"
    contentType="articles"
    class="full-article-container"
  >
    <template #related="{ articles_categories: cat }">
      <div class="related-content-container">
        <Title v-if="cat.data.length" tag="h4" class="title">
          {{ $_tr('OTHERS.title') }}
        </Title>

        <component-listing
          v-if="cat.data.length"
          id="other-articles-listing"
          :fields="requestFields"
          :filters="{
            articles_categories: {
              'uuid:in': cat.data.map(({ uuid }) => uuid)
            },
            'uuid:ne': uuid,
            'status:eq': 1
          }"
          :items-per-page="4"
          endpoint="content/articles"
        >
          <template #default="{ item }">
            <MinimalNews
              v-bind="item"
              :key="item.uuid"
              :categories-config="categoriesConfig"
              :to="{
                name: 'GedPage',
                query: {
                  contentType: 'articles',
                  uuid: item.uuid,
                  folder: item.folders.uuid,
                  modal: 'articles',
                  size: 'l'
                }
              }"
              @click.native="handleClick()"
            />
          </template>
        </component-listing>
      </div>
    </template>
  </FullContentPage>
</template>

<script>
import FullContentPage from '@inside-layouts/components/pages/FullContentPage'
import MinimalNews from '@inside-news/components/lib/Minimal'

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

export default {
  name: 'full-article',
  $_i18nRootPath: 'customs.ARTICLES',
  components: { FullContentPage, MinimalNews, Title },
  props: {
    uuid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      categoriesConfig: {
        articles_categories: {
          data: articles => articles.articles_categories?.data
        },
        folders: {
          data: article => [article.folders],
          href: folder => ({
            name: 'GedPage',
            query: { folder: folder.uuid }
          })
        }
      },
      extraFields: [
        'content',
        'image',
        {
          articles_categories: {
            fields: ['uuid', 'title', 'color'],
            filters: { 'status:eq': 1 }
          }
        },
        {
          folders: {
            fields: ['uuid', 'title'],
            filters: { 'status:eq': 1 }
          }
        }
      ],
      requestFields: [
        'uuid',
        'title',
        'published_at',
        'image',
        'slug',
        'content_type',
        {
          folders: {
            fields: ['uuid', 'title'],
            filters: { 'status:eq': 1 }
          }
        },
        {
          articles_categories: {
            fields: ['uuid', 'title', 'color'],
            filters: { 'status:eq': 1 }
          }
        }
      ]
    }
  },
  methods: {
    scaffoldOverrides(data, { deleteItems }) {
      deleteItems('actions')
    },
    handleClick() {
      setTimeout(() => {
        location.reload()
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.full-article-container {
  .related-content-container {
    .title {
      margin-bottom: var(--spacing-m);
      text-align: center;
    }
  }
}
</style>
