<template>
  <Card class="news-card-container">
    <div class="news-card-header mb-s">
      <BaseText :color="$_theme('colorTextLight')" class="mr-s">
        {{ $_formatDate(published_at, 'L') }}
      </BaseText>

      <div
        v-for="subsidiary in subsidiaries.data"
        :key="subsidiary.uuid"
        class="categories"
      >
        <Link
          :href="listingFormattedHref(subsidiary.uuid, subsidiary.content_type)"
          :inline="false"
          class="category-link mr-m"
        >
          {{ subsidiary.title }}
        </Link>
      </div>

      <div
        v-for="category in news_categories.data"
        :key="category.uuid"
        class="categories"
      >
        <Link
          :href="listingFormattedHref(category.uuid, category.content_type)"
          :inline="false"
          class="category-link mr-m"
        >
          {{ category.title }}
        </Link>
      </div>
    </div>

    <Link :href="newsFormattedHref" :inline="false">
      <ratio-image-ui
        :static="true"
        :src="$_getContentImage(image, 'image-card')"
      />
    </Link>

    <Link :href="newsFormattedHref" :inline="false">
      <Title :html="true" tag="h5" class="my-s">{{ title }}</Title>
    </Link>

    <div class="actions-container mt-m">
      <div class="comment mr-m">
        <Icon :color="$_theme('colorGrey')" icon="comment" />

        <BaseText class="ml-xs">
          {{ comments.count || 0 }}
        </BaseText>
      </div>

      <like-ui
        :herited-data="{
          type: 'like',
          related_type: 'news',
          related_uuid: uuid,
          reactions
        }"
      />
    </div>
  </Card>
</template>

<script>
import Card from '../sub-components/Card'

import { formatHref } from '@inside-library/helpers/Langs'

import { BaseText, Icon, Title } from 'inside-collection/atoms'
import { Link } from 'inside-collection/components'

export default {
  name: 'NewsCard',
  components: { Card, BaseText, Icon, Title, Link },
  props: {
    uuid: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    published_at: {
      type: Number,
      required: true
    },
    slug: {
      type: Array,
      required: true
    },
    news_categories: {
      type: Object
    },
    subsidiaries: {
      type: Object
    },
    image: {
      type: Object
    },
    reactions: {
      type: Object
    },
    comments: {
      type: Object
    }
  },
  computed: {
    newsFormattedHref() {
      return formatHref(
        {
          name: 'NewsPage',
          params: {
            slug: this.slug[0]
          }
        },
        this.$_currentLang
      )
    }
  },
  methods: {
    listingFormattedHref(uuid, contentType) {
      return formatHref(
        {
          name: 'NewsListingPage',
          query: { [contentType]: uuid }
        },
        this.$_currentLang
      )
    }
  }
}
</script>

<style lang="scss">
.news-card-container {
  min-height: 280px;
  width: 31%;

  .news-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .categories:not(:first-of-type) {
      margin: -6px var(--spacing-m) 0 0;
    }

    .category-link {
      color: var(--color-primary);
      font-family: var(--font-secondary);
    }
  }

  .actions-container {
    display: flex;

    .comment {
      display: flex;
      align-items: center;

      .ds-base-text-container {
        height: fit-content;
      }
    }
  }
}
</style>
