<template>
  <Block :title="$_tr('title')" title-tag="h3">
    <GroupWithTabs
      :categories-fields="[
        'uuid',
        'title',
        'content_type',
        'admin',
        'image',
        'icon',
        'weight'
      ]"
      :categories-filters="{
        'status:eq': 1,
        'published_at:lte': 'now()',
        sort: 'title:asc'
      }"
      :content-fields="proceduresFields"
      :content-filters="{
        'status:eq': 1,
        'published_at:lte': 'now()',
        sort: 'title:asc'
      }"
      :links-fetched-callback="linksFetchedCallback"
      links-content-type="procedures"
      categories-content-type="procedures_categories"
    />
  </Block>
</template>

<script>
import { proceduresFields } from './constants'

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

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

export default {
  name: 'ProceduresList',
  $_i18nRootPath: 'customs.PROCEDURES.LISTING',
  components: {
    Block,
    GroupWithTabs
  },
  data() {
    return {
      proceduresFields
    }
  },
  methods: {
    linksFetchedCallback(data) {
      this.$store.commit('setCurrentModalContentType', 'procedures')

      return data.map(item => ({
        ...item,
        link: formatHref(
          {
            name: 'ProcedureModal',
            params: { slug: item.slug[0] }
          },
          this.$_currentLang
        ),
        ...{
          has_section: {},
          content: null
        }
      }))
    }
  }
}
</script>
