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

    <div class="home-news-listing-container">
      <component-listing
        v-if="!getTablet"
        id="homepage-news-listing"
        :static-data="fetchedData"
        :pagination="false"
        :use-grid="getTablet || getMobile"
        :fractions="getTablet || getMobile ? 1 : 3"
        direction="horizontal"
        class="homepage-news-listing mr-xl"
      >
        <template #default="{ item, index }">
          <component
            v-bind="item"
            :is="
              index === 0 && !(getTablet || getMobile)
                ? 'NewsHorizontalCard'
                : 'NewsCard'
            "
            :key="item.uuid"
          />
        </template>
      </component-listing>

      <ActionCard
        v-if="!getTablet"
        :title="$_tr('link')"
        :to="{ name: 'NewsListingPage' }"
        icon-name="I-discover-all-internal-news"
      />

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

          <ActionCard
            v-else
            :title="$_tr('link')"
            :to="{ name: 'NewsListingPage' }"
            icon-name="I-discover-all-internal-news"
          />
        </template>
      </Slider>
    </div>
  </div>
</template>

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

import NewsCard from './cards/NewsCard'
import NewsHorizontalCard from './cards/NewsHorizontalCard'

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

export default {
  name: 'HomeNewsListing',
  $_i18nRootPath: 'customs.HOMEPAGE.news',
  components: {
    ListingSeparator,
    ActionCard,
    NewsCard,
    NewsHorizontalCard,
    Slider
  },
  props: {
    fetchedData: {
      type: Array
    }
  },
  computed: {
    sliderNewsList() {
      return this.fetchedData.concat({})
    }
  }
}
</script>

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

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

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

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

        .news-details {
          word-break: break-word;
        }
      }
    }
  }

  @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>
