<template>
  <div v-if="directList.length">
    <ListingSeparator :title="$_tr('title')" />

    <div class="home-direct-container">
      <component-listing
        v-if="!getTablet"
        id="homepage-direct-listing"
        :static-data="directList"
        :fractions="getTablet || getMobile ? 1 : 3"
        :pagination="false"
        :use-grid="getTablet || getMobile"
        direction="horizontal"
        class="homepage-direct-listing mr-xl"
      >
        <template #default="{ item }">
          <DirectCard v-bind="item" :key="item.uuid" />
        </template>
      </component-listing>

      <ActionCard
        v-if="!getTablet"
        :title="$_tr('link')"
        :to="{
          name: 'WallPage',
          params: {
            slug: $_currentLang === 'fr' ? frWallSlug : enWallSlug
          }
        }"
        icon-name="I-contribute"
      />

      <Slider v-if="getTablet" :data="sliderDirectList">
        <template #default="{ item, index }">
          <DirectCard
            v-if="index < sliderDirectList.length - 1"
            v-bind="item"
            :key="item.uuid"
            class="my-m"
          />

          <ActionCard
            v-else
            :title="$_tr('link')"
            :to="{
              name: 'WallPage',
              params: {
                slug: $_currentLang === 'fr' ? frWallSlug : enWallSlug
              }
            }"
            icon-name="I-contribute"
          />
        </template>
      </Slider>
    </div>
  </div>
</template>

<script>
import ListingSeparator from './sub-components/ListingSeparator'
import ActionCard from './sub-components/ActionCard'
import DirectCard from './cards/DirectCard'

import Slider from '@inside-slideshow/components/lib/Slider'

import { http } from '@inside-library/helpers/Http'

export default {
  name: 'HomeDirect',
  $_i18nRootPath: 'customs.HOMEPAGE.direct',
  components: { ListingSeparator, ActionCard, DirectCard, Slider },
  data() {
    return {
      directList: []
    }
  },
  computed: {
    frWallSlug() {
      return this.getStore('getInsideSettings', 'homepage.hp_fr_slug_wall')
    },
    enWallSlug() {
      return this.getStore('getInsideSettings', 'homepage.hp_en_slug_wall')
    },
    sliderDirectList() {
      return this.directList.concat({})
    }
  },
  async beforeMount() {
    this.directList = await this.fetchDirect()
  },
  methods: {
    async fetchDirect() {
      try {
        const { data } = await http.get('content/comments', {
          fields: [
            'uuid',
            'body',
            'file',
            'total',
            'count',
            'total_count',
            'tree',
            'admin',
            'content_type',
            'created_at',
            { authors: ['uuid', 'image', 'firstname', 'lastname', 'image'] },
            {
              reactions: [
                'count',
                {
                  users: ['firstname', 'lastname', 'image', 'uuid']
                }
              ]
            }
          ],
          filters: {
            'pid:ed': null,
            walls: {
              'slug:eq':
                this.$_currentLang === 'fr' ? this.frWallSlug : this.enWallSlug
            },
            limit: 3,
            sort: 'created_at:desc'
          }
        })

        return data
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.home-direct-container {
  @include desktop-only {
    display: flex;

    .homepage-direct-listing {
      width: 75%;

      .data-container {
        justify-content: space-between;
      }
    }
  }

  @include tablet {
    .slider-container {
      margin-top: 0;
      padding-top: 0;
      padding-bottom: var(--spacing-l);

      .swiper-container {
        .swiper-pagination {
          text-align: center;
          height: 22px;
          margin-top: var(--spacing-xs);
        }

        .swiper-slide {
          padding: 0 var(--spacing-s);
        }

        .swiper-button-prev,
        .swiper-button-next {
          top: initial;
          bottom: 7px;
        }

        .swiper-button-prev::after,
        .swiper-button-next::after {
          bottom: 0;
        }
      }
    }
  }
}
</style>
