<template>
  <GroupWithTabs
    :categories-fields="categoriesFields"
    :categories-filters="{
      sort: 'weight:asc'
    }"
    :links-fetched-callback="linksFetchedCallback"
    :content-fields="contentFields"
    :content-filters="{ 'status:eq': 1, sort: 'title:asc' }"
    :links-content-type="['p_and_p', 'p_and_p_france']"
    categories-content-type="p_and_p_categories"
    class="block-pp-listing-groups mt-m"
  />
</template>

<script>
import { formatHref } from '@inside-library/helpers/Langs'
import GroupWithTabs from '@inside-links/components/lib/GroupWithTabs'

import { categoriesFields, contentFields } from '../../constants'

export default {
  name: 'BlockPPListingGroups',
  components: {
    GroupWithTabs
  },
  data() {
    return {
      categoriesFields,
      contentFields
    }
  },
  methods: {
    linksFetchedCallback(data) {
      return data.map(item => ({
        ...item,
        link: formatHref(
          {
            name: item.content_type === 'p_and_p' ? 'PPPage' : 'PPFrenchPage',
            params: {
              slug: item.slug[0]
            }
          },
          this.$_currentLang
        )
      }))
    }
  }
}
</script>

<style lang="scss">
.block-pp-listing-groups {
  .group-with-tabs-category-item-container {
    font-weight: 600;
  }
}
</style>
