<template>
  <div class="bookmark-page">
    <Banner page="bookmarks" :background-color="$_theme('colorSecondary')" />

    <TemplateContainer>
      <BookmarksListingWithData />
    </TemplateContainer>
  </div>
</template>

<script>
import { withFetch } from 'inside-collection/hocs'
import { http } from '@inside-library/helpers/Http'
import { storage } from '@inside-library/helpers/Storage'
import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

import BookmarksListing from '../components/bookmarks/BookmarksListing'

const fetchItems = async () => {
  try {
    const { data } = await http.get(
      `users/reactions/bookmark/${storage.get('current-user').uuid}`,
      {
        fields: [
          'title',
          'uuid',
          'file',
          'description',
          'published_at',
          'slug',
          'content_type',
          'created_at',
          {
            reactions: ['count', { users: ['uuid'] }]
          }
        ]
      }
    )

    return data
  } catch (err) {
    throw new Error(err)
  }
}

export default {
  name: 'BookmarkPage',
  components: {
    Banner,
    TemplateContainer,
    BookmarksListingWithData: withFetch(BookmarksListing, {
      size: 'xxl'
    })(fetchItems)
  }
}
</script>
