<template>
  <div class="card-ged">
    <div class="card-ged__img" @click="defineAction">
      <img
        v-if="
          heritedData.content_type === 'folders'
            ? getCheckedData(heritedData, ['file', 'path']) ||
              (getCheckedData(heritedData, ['image']) && imgLoaded)
            : (getCheckedData(heritedData, ['preview']) ||
              getCheckedData(heritedData, ['image'])) &&
              imgLoaded
        "
        :src="
          $_getContentImage(heritedData.preview, 'image-card') ||
            $_getContentImage(heritedData.image) ||
            getCheckedData(heritedData, ['file', 'path'])
        "
        alt="Card image"
      />
      <gradient-ui v-else />

      <div
        v-if="
          heritedData.preview &&
            getCheckedData(heritedData, ['file', 'mimetype'], []).includes(
              'video'
            )
        "
        class="card-ged__player df-center-xy"
      >
        <i class="sid2-play-button" />
      </div>
    </div>

    <div v-if="albumData" class="card-ged-likes">
      <like-ui
        :heritedData="{
          type: 'like',
          related_uuid: heritedData.uuid,
          related_type: heritedData.content_type,
          reactions: heritedData.reactions
        }"
      />

      <edit-content-btn-ui
        v-if="getCheckedData(heritedData.admin, ['permission', 'update'])"
        :edition-link="`/edit/${heritedData.content_type}/${heritedData.uuid}`"
        class="ml-s"
      />
    </div>

    <div v-if="!albumData" class="card-ged__infos">
      <p class="card-ged__infos-title">
        {{ heritedData.title }}
      </p>

      <date-ui
        tag="p"
        class="card-ged__infos-date"
        :date="heritedData.published_at"
        :relative="true"
      />

      <div class="card-ged__infos-interactions">
        <like-ui
          :heritedData="{
            type: 'like',
            related_uuid: heritedData.uuid,
            related_type: heritedData.content_type,
            reactions: heritedData.reactions
          }"
        />

        <edit-content-btn-ui
          v-if="getCheckedData(heritedData.admin, ['permission', 'update'])"
          :edition-link="`/edit/${heritedData.content_type}/${heritedData.uuid}`"
          class="ml-s"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ReportAction from '@inside-library/components/actions/report/ReportAction'

import GedNavigationMixin from '../../mixins/ged-navigation-mixin'
import GedDateMixin from '../../mixins/ged-date-mixin'
import CheckImgMixin from '@inside-library/mixins/check-img-mixin'
import DownloadFileMixin from '@inside-library/mixins/download-file-mixin'

import videoBackground from '../../../../assets/img/ged/background.jpg'
import videoPlay from '../../../../assets/img/ged/play.png'

export default {
  name: 'CardGed',
  components: {
    ReportAction
  },
  mixins: [GedNavigationMixin, GedDateMixin, CheckImgMixin, DownloadFileMixin],
  props: {
    albumData: {
      type: Array
    },
    index: {
      type: Number
    },
    isMedia: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgLoaded: false,
      videoBackground,
      videoPlay
    }
  },
  computed: {
    isPhotoType() {
      return false
    },
    showReactions() {
      return (
        (!this.getCheckedData(this.heritedData[0], 'disable_comments') &&
          this.isAlive(this.heritedData[0], 'comments')) ||
        this.$_getConfig('showLikes', 'inside-ged')
      )
    },
    contentImage() {
      return this.$_getContentImage(this.heritedData.image, 'medium')
    },
    checkImageData() {
      return this.getCheckedData(
        this.heritedData,
        ['file', 'mimetype'],
        '',
        []
      ).includes('image/')
    },
    checkVideoData() {
      return this.getCheckedData(
        this.heritedData,
        ['file', 'mimetype'],
        '',
        []
      ).includes('video/')
    }
  },
  beforeMount() {
    this.checkImg(
      this.$_getContentImage(this.heritedData.preview, 'image-card') ||
        this.$_getContentImage(this.heritedData.image, 'image-card') ||
        this.getCheckedData(this.heritedData, ['file', 'path'])
    )
  },
  methods: {
    defineAction() {
      if (this.albumData) {
        this.setStoreAction('setPreviewGEDInfos', {
          status: true,
          index: this.index,
          data: this.albumData
        })
      } else {
        const params = {
          data: this.heritedData,
          title: this.heritedData.title
        }

        this.requestFolder(params)
      }
    }
  }
}
</script>

<style lang="scss">
@use '../../../../styles/modules/inside-customs/ged/files/card.scss' as *;
</style>
