<template>
  <Groups />
</template>

<script>
import { withFetch } from 'inside-collection/hocs'
import { http } from '@inside-library/helpers/Http'

import Container from './GroupsContainer'

const fetchData = async () => {
  try {
    const { data } = await http.get('content/spaces_categories', {
      fields: [
        'uuid',
        'title',
        'image',
        'admin',
        'content_type',
        {
          spaces: {
            fields: ['uuid', 'title', 'slug', 'content_type'],
            filters: { 'status:eq': 1, reverse: true, sort: 'weight:asc' }
          }
        }
      ],
      filters: { 'status:eq': 1, sort: 'published_at:asc' }
    })

    return data.map(cat => ({
      ...cat,
      spaces: {
        data: cat.spaces.data.map(item => ({
          ...item,
          link: { name: 'GroupPage', params: { slug: item.slug[0] } }
        }))
      }
    }))
  } catch (err) {
    throw new Error(err)
  }
}

export default {
  name: 'GroupsPage',
  components: { Groups: withFetch(Container, { size: 'xxl' })(fetchData) }
}
</script>
