<template>
  <div v-if="featuredVideo" class="featured-video-container">
    <Title tag="h5" class="mb-m mt-xs">
      {{ $_tr('title') }}
    </Title>

    <Link
      :href="videoLink"
      :inline="false"
      :target="featuredVideo.file ? '_blank' : '_self'"
    >
      <image-ui
        v-if="featuredVideo.image"
        :static="true"
        :path="$_getContentImage(featuredVideo.image, 'image-card')"
        class="mb-s"
      />

      <div v-else class="mb-s video-placeholder">
        <Icon icon="play" size="xl" :color="$_theme('colorLight')" />
      </div>
    </Link>

    <BaseText v-if="featuredVideo.description" :html="true" class="mb-s">
      {{ featuredVideo.description }}
    </BaseText>

    <Link :href="gedLink">{{ $_tr('link') }}</Link>
  </div>
</template>

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

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

export default {
  name: 'FeaturedVideo',
  $_i18nRootPath: 'customs.HOMEPAGE.heromodule.video',
  components: { Link, BaseText, Title, Icon },
  data() {
    return {
      featuredVideo: null
    }
  },
  computed: {
    gedLink() {
      return formatHref({ name: 'GedPage' }, this.$_currentLang)
    },
    videoLink() {
      return this.featuredVideo.file
        ? `/${this.featuredVideo.file.path}`
        : formatHref(
            {
              name: 'GedPage',
              query: {
                contentType: 'documents',
                uuid: this.featuredVideo.uuid,
                folder: this.featuredVideo.folders.uuid
              }
            },
            this.$_currentLang
          )
    }
  },
  async beforeMount() {
    this.featuredVideo = await this.fetchFeaturedVideo()
  },
  methods: {
    async fetchFeaturedVideo() {
      try {
        const { data } = await http.get('content/documents', {
          fields: [
            'uuid',
            'title',
            'image',
            'description',
            'is_featured',
            'file',
            { folders: ['uuid', 'title'] }
          ],
          filters: {
            'status:eq': 1,
            'is_featured:eq': 1,
            sort: 'published_at:desc',
            limit: 1
          }
        })

        return data[0]
      } catch (err) {
        throw new Error(err)
      }
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.featured-video-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
  text-align: center;

  .video-placeholder {
    background-color: var(--color-grey-100);
    height: 140px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include mobile {
    width: 100%;
    margin-top: var(--spacing-xl);
  }

  .ds-link-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;

    .ds-icon-container {
      margin-right: var(--spacing-s);
      margin-left: 0;
    }
  }
}
</style>
