<template>
  <Block :title="$_tr('title')" title-tag="h3">
    <GroupWithTabs
      :categories-filters="getPagesCategoriesFilters($route.params.slug)"
      :links-fetched-callback="linksFetchedCallback"
      :content-filters="spacePagesFilters"
      categories-content-type="pages_categories"
      links-content-type="spaces_pages"
      space-content-type="spaces"
    />
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'
import GroupWithTabs from '@inside-links/components/lib/GroupWithTabs'

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

import { getPagesCategoriesFilters } from '../../helpers'

import { spacePagesCategoriesFilters, spacePagesFilters } from '../../constants'

export default {
  name: 'SpaceCategoriesPages',
  $_i18nRootPath: 'customs.SPACES.categories',
  components: {
    Block,
    GroupWithTabs
  },
  data() {
    return {
      spacePagesCategoriesFilters,
      spacePagesFilters
    }
  },
  methods: {
    getPagesCategoriesFilters,
    linksFetchedCallback(data) {
      return data.map(item => ({
        ...item,
        link: formatHref(
          {
            name: { name: 'SpacePagesListing' }.name,
            params: { slug: this.$route.params.slug },
            query: { page: item.uuid }
          },
          this.$_currentLang
        ),
        ...{
          has_section: {},
          content: null
        }
      }))
    }
  }
}
</script>
