<template>
  <TemplateContainer size="s">
    <div class="pedgonews-page">
      <Back :href="{ name: 'PedagonewsListingPage' }" />

      <Title :dark-mode="false" class="title text-center mb-l">
        {{ fetchedData.title }}
      </Title>

      <ParagraphListing
        v-if="fetchedData.nl_introduction"
        :herited-data="[
          { body: fetchedData.nl_introduction, section_type: 'text' }
        ]"
        :herited-options="{ template: true }"
        class="mb-l"
      />

      <component-listing
        v-if="staticData.length"
        :id="`pedagonews-content-${fetchedData.uuid}-listing`"
        :static-data="staticData"
        :items-per-page="10"
        :fractions="1"
      >
        <template #default="{ item }">
          <Link :inline="false" :href="getLink(item)">
            <date-ui :date="item.updated_at" class="date" />

            <Title tag="h3" class="title">
              {{ item.title }}
            </Title>

            <img
              v-if="item.image"
              :src="$_getContentImage(item.image, 'image-section')"
            />

            <BaseText v-if="item.chapo" class="chapo">
              {{ item.chapo }}
            </BaseText>

            <ParagraphListing
              :herited-data="item.content"
              :herited-options="{ template: true }"
              class="content"
            />
          </Link>
        </template>
      </component-listing>
    </div>
  </TemplateContainer>
</template>

<script>
import { Title, BaseText } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Back from '@inside-commons/components/lib/Back'
import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

import ContentTypesMixin from '@inside-library/mixins/content-types-mixin'

export default {
  name: 'PedagonewsPage',
  $_i18nRootPath: 'customs.PEDAGONEWS_PAGE',
  components: {
    Link,
    Banner,
    TemplateContainer,
    Back,
    Title,
    BaseText,
    ParagraphListing
  },
  mixins: [ContentTypesMixin],
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      staticData: [
        ...this.fetchedData.ilnp_news.data,
        ...this.fetchedData.ilnp_events.data,
        ...this.fetchedData.ilnp_articles.data
      ]
    }
  },
  methods: {
    getLink(item) {
      if (item.content_type === 'articles') {
        return {
          name: 'GedPage',
          query: {
            contentType: 'articles',
            uuid: item.uuid,
            modal: 'articles',
            folder: item.folders.uuid,
            size: 'l'
          }
        }
      } else if (item.content_type === 'events') {
        return {
          name: 'EventPage',
          params: { slug: item.slug[0] }
        }
      } else {
        return {
          name: 'NewsPage',
          params: { slug: item.slug[0] }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pedagonews-item-container {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacing-m);

  &:not(:last-of-type) {
    border-bottom: solid 1px var(--color-grey-200);
  }

  > .date {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-s);
  }

  .title {
    margin-bottom: var(--spacing-m);
  }

  .chapo {
    margin-top: var(--spacing-m);
  }

  .content {
    margin-top: var(--spacing-m);
  }
}

.text-center {
  text-align: center;
}
</style>
