<template>
  <Block
    :title="$_tr('title')"
    :link="{ name: 'GedPage' }"
    :link-label="$_tr('moreArticles')"
    title-tag="h3"
    class="home-documents-listing"
  >
    <component-listing
      id="homepage-documents-listing"
      :pagination="false"
      :fractions="1"
      :items-per-page="5"
      :filters="filters"
      :fields="fields"
      direction="vertical"
      endpoint="content/documents,articles"
    >
      <template #default="{ item }">
        <CardDocument
          v-if="item.content_type === 'documents'"
          v-bind="item"
          :key="item.uuid"
          :date="item.updated_at"
          class="card-document"
        >
          {{ item.title }}
        </CardDocument>

        <Card
          v-else
          v-bind="item"
          :key="item.uuid"
          :border="true"
          :border-color="$_theme('colorPrimary')"
          class="card-document"
          @click="handleClick(item.content_type, item.uuid)"
        >
          <Icon size="l" icon="file" :color="$_theme('colorGrey')" />

          <div class="data-articles">
            <Title tag="h5">{{ item.title }}</Title>

            <date-ui :date="item.updated_at">{{ item.updated_at }}</date-ui>
          </div>
        </Card>
      </template>
    </component-listing>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'
import CardDocument from '@inside-ged/components/lib/CardDocument'
import { Card } from 'inside-collection/components'
import { Icon, Title } from 'inside-collection/atoms'

export default {
  name: 'HomeDocumentsListing',
  $_i18nRootPath: 'customs.HOMEPAGE.articles',
  components: { Block, CardDocument, Card, Icon, Title },
  props: {
    fetchedData: {
      type: Object
    }
  },
  computed: {
    filters() {
      return {
        'status:eq': 1,
        sort: 'updated_at:desc',
        limit: 6
      }
    },
    fields() {
      return [
        'uuid',
        'title',
        'content',
        'file',
        'published_at',
        'updated_at',
        'content_type',
        'chapo',
        'slug',
        { folders: ['uuid', 'title', 'color'] },
        { reactions: ['count', { users: ['uuid'] }] },
        { comments: ['count'] },
        { authors: ['uuid', 'lastname', 'firstname'] }
      ]
    }
  },
  methods: {
    handleClick(contentType, uuid) {
      if (contentType === 'articles') {
        this.triggerModal(
          'articles',
          'fetch',
          {
            item: { uuid: uuid },
            content: 'articles'
          },
          { layout: 'right', size: 'l', transition: 'fadeInLeft' }
        )
      }
    }
  }
}
</script>

<style lang="scss">
.home-documents-listing {
  .card-document {
    display: flex;

    .data-articles {
      display: flex;
      flex-direction: column;
      margin-left: var(--spacing-m);
    }
  }
}

.inside-radius {
  .home-documents-listing .card-document {
    border-radius: var(--radius-s);
  }
}
</style>
