<template>
  <SearchActions
    :data="data"
    :class="[
      `custom-resume--${normalizeData.content_type}`,
      { 'custom-resume--image': normalizeData.image || isUserType }
    ]"
    class="custom-resume df-center-y"
  >
    <div class="df-center-y resume__main-infos">
      <BaseText v-if="!page" class="custom-resume__content">
        {{
          getContentTypeTranslation(normalizeData.content_type) ||
            $_tr(`contents.${normalizeData.content_type}`)
        }}
      </BaseText>

      <img
        v-if="normalizeData.image && !isUserType"
        :src="$_getContentImage(normalizeData.image, 'thumbnail')"
      />

      <avatar-ui
        v-else-if="isUserType"
        :heritedData="{
          image: $_getContentImage(normalizeData.image, 'small')
        }"
      />

      <i
        v-else-if="page === 'bookmarksProfile' && iconClass"
        :class="iconClass[0]"
      />

      <BaseText class="custom-resume__title">
        {{ unescapeHtml(normalizeData.title) }}
      </BaseText>

      <BaseText v-if="isUserType" class="custom-resume__function">
        {{ normalizeData.function }}
      </BaseText>

      <div v-html="getResumeCustomElement(normalizeData.content_type)" />
    </div>

    <slot />

    <div class="custom-resume__details df-center-y">
      <date-ui
        v-if="normalizeData.date && !isUserType"
        :date="normalizeData.date"
        tag="p"
        class="custom-resume__date"
      />
    </div>
  </SearchActions>
</template>

<script>
import SearchActions from '../SearchActions'

import { BaseText } from 'inside-collection/atoms'

import { unescapeHtml } from '@inside-library/filters/UnescapeHtml'

export default {
  name: 'ResumeSearches',
  components: {
    SearchActions,
    BaseText
  },
  props: {
    data: {
      type: Object,
      required: true
    },
    page: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      normalizeData: this.getNormalizedData(this.data)
    }
  },
  computed: {
    /*
     * Get formatted content type label
     * @param {String} contentType
     * @return {String}
     */
    getContentTypeTranslation() {
      return contentType =>
        this.$store.getters.getSearchFilterTranslation({
          content_type: contentType,
          langcode: this.$_currentLang
        })
    },
    /*
     * Check if content is user
     * @return {Boolean}
     */
    isUserType() {
      return this.normalizeData.content_type === 'users'
    },
    iconClass() {
      return Object.entries(
        this.$_getConfig('resumeIcons', 'inside-searches')
      ).find(([key, value]) => value.includes(this.normalizeData.content_type))
    }
  },
  methods: {
    unescapeHtml,
    /*
     * Get normalize data for current component
     * @param {Object} data
     * @return {Object}
     */
    getNormalizedData(data) {
      const normalized = {
        title: data.title,
        image: data.image,
        date: data.created_at,
        content_type: data.content_type
      }

      if (data.content_type === 'users') {
        normalized.title = this.$_username(data)
        normalized.function = data.function
      }

      if (data.content_type.indexOf('documents') > -1) {
        normalized.file = this.getCheckedData(data, 'file.path')
      }

      return normalized
    },
    /*
     * Function to generate custom html in the component, must be overrided
     * @param {String} contentType
     * @return {String}
     */
    getResumeCustomElement(contentType) {
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
@use '../../../styles/modules/inside-customs/searches/resume.scss' as *;
</style>
