<template>
  <Card class="direct-card-container">
    <BaseText :color="$_theme('colorTextLight')">
      {{
        `${$_username(authors)}
        ${$_formatDateFromNow(created_at)}`
      }}
    </BaseText>

    <Link :href="directPageLink" :inline="false">
      <RatioImageUi :src="file && `/${file.path}`" class="my-s" />

      <BaseText class="direct-body">
        <template v-for="(word, index) in body.split(' ')">
          <component
            :is="formatMention(word).tag"
            v-if="formatMention(word).tag"
            v-bind="formatMention(word).data"
            :key="`${word}-${index}`"
          >
            {{ formatMention(word).value }}
          </component>

          <template v-else>
            <span
              :key="`${word}-${index}`"
              v-html="formatMention(word).value"
            />
          </template>
        </template>
      </BaseText>
    </Link>

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

        <BaseText class="ml-xs">
          {{ (children && children.length) || 0 }}
        </BaseText>
      </div>

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

<script>
import { markRaw } from 'vue'

import Card from '../sub-components/Card'
import RatioImageUi from '@inside-ui/RatioImageUI'
import MentionedUser from '@inside-comments/components/lib/MentionedUser'

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

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

export default {
  name: 'DirectCard',
  $_i18nRootPath: 'customs.HOMEPAGE.direct',
  components: { Card, BaseText, Icon, Link, RatioImageUi },
  props: {
    uuid: {
      type: String,
      required: true
    },
    body: {
      type: String,
      required: true
    },
    created_at: {
      type: Number,
      required: true
    },
    authors: {
      type: Object,
      required: true
    },
    file: {
      type: Object
    },
    reactions: {
      type: Object
    },
    children: {
      type: Array
    }
  },
  computed: {
    frWallSlug() {
      return this.getStore('getInsideSettings', 'homepage.hp_fr_slug_wall')
    },
    enWallSlug() {
      return this.getStore('getInsideSettings', 'homepage.hp_en_slug_wall')
    },
    directPageLink() {
      return formatHref(
        {
          name: 'WallPage',
          params: {
            slug:
              this.$_currentLang === 'fr' ? this.frWallSlug : this.enWallSlug
          }
        },
        this.$_currentLang
      )
    },
    formatMention() {
      return word => {
        const mention = word.match(/(?:@)(.*?)(?=\])/g) || []

        if (mention.length) {
          const splittedMention = mention[0].split('[')
          const name = splittedMention[0]
          const uuid = splittedMention[1]

          return {
            tag: markRaw(MentionedUser),
            data: {
              name,
              uuid
            }
          }
        }

        return {
          value: `${word} `
        }
      }
    }
  }
}
</script>

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

  .direct-body {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .actions-container {
    display: flex;

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

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