<template>
  <div>
    <Back
      :href="{
        name: 'ClubsPage',
        params: {
          slug: $route.params.slug
        }
      }"
      size="l"
    >
      {{ $_tc('back', [clubsTitle]) }}
    </Back>

    <TemplateContainer size="l" class="main-content">
      <Title :style="{ 'text-align': 'center' }" tag="h2" class="mb-xxl">
        {{ $_tc('title', [clubsTitle]) }}
      </Title>

      <Full
        :home-with-cards="false"
        :use-tree="false"
        :use-search="false"
        :likes-enabled="false"
        :link-types="null"
        :document-types="documentTypes"
        :folder-types="folderTypes"
      />
    </TemplateContainer>
  </div>
</template>

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

import Back from '@inside-commons/components/lib/Back'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import Full from '@inside-ged/components/lib/Full'

import { CONTENTS } from '@inside-ged/constants/default-contents'

import { http } from '@inside-library/helpers/Http'

const clubsContents = CONTENTS({
  folderContents: ['clubs_folders'],
  documentsContents: ['clubs_documents']
})

export default {
  name: 'ClubsGedPage',
  $_i18nRootPath: 'customs.CLUBS_GED_PAGE',
  components: {
    Title,
    Back,
    TemplateContainer,
    Full
  },
  data() {
    return {
      clubsTitle: null
    }
  },
  computed: {
    folderTypes() {
      return {
        ...clubsContents.folders,
        filters: {
          ...clubsContents.folders.filters,
          clubs: { 'slug:eq': this.$route.params.slug }
        },
        filtersInFields: false
      }
    },
    documentTypes() {
      return clubsContents.documents
    }
  },
  async beforeMount() {
    this.clubsTitle = await this.getClubsTitle()
  },
  methods: {
    async getClubsTitle() {
      try {
        const { data } = await http.get('content/clubs', {
          fields: ['uuid', 'title'],
          filters: {
            'slug:eq': this.$route.params.slug
          }
        })

        return data[0].title
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>
