<template>
  <div class="channel search-card-result">

    <a class="image-container" target="_blank" rel="nofollow noreferrer noopener" :href="channel.url" :title="discoverChannelMessage">
      <img v-if="hasAvatar()" :src="getAvatarUrl()" alt="" />
      <img v-else src="/img/default-avatar.png" alt="" />
    </a>

    <div class="flex-grow-1">
      <h4>
        <strong>
          <a target="_blank" rel="nofollow noreferrer noopener" class="wrap-text" :href="channel.url" :title="discoverChannelMessage">
            {{ channel.displayName }}
          </a>
        </strong>
      </h4>

      <div class="small-separator"></div>

      <!-- eslint-disable vue/no-v-html -->
      <div
        class="description wrap-text mb-3"
        v-html="descriptionHTML"
      ></div>
      <!-- eslint-enable -->

      <div class="metadata">
        <div>
          <label>{{ $gettext('Channel created on platform') }}</label>

          <a class="peertube-link" target="_blank" rel="nofollow noreferrer noopener" :href="platformUrl">{{ host }}</a>
        </div>
      </div>

      <div class="button-link-container">
        <a
          class="peertube-button peertube-primary-button peertube-button-link"
          target="_blank"
          rel="nofollow noreferrer noopener"
          :href="channel.url"
        >
          {{ discoverChannelMessage }}
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    props: {
      channel: Object
    },

    data () {
      return {
        descriptionHTML: ''
      }
    },

    computed: {
      host () {
        const url = this.channel.url

        return new URL(url).host
      },

      platformUrl () {
        const url = this.channel.url

        const parsed = new URL(url)

        return parsed.protocol + '//' + parsed.host
      },

      discoverChannelMessage () {
        return this.$gettext('Discover this channel on %{host}', { host: this.host })
      }
    },

    mounted () {
      this.lazyRenderMarkdown(this.channel.description)
        .then(html => this.descriptionHTML = html)
    },

    methods: {
      hasAvatar () {
        if (this.channel.avatar) return true

        if (!Array.isArray(this.channel.avatars)) return false

        return this.channel.avatars.length !== 0
      },

      getAvatarUrl () {
        if (!Array.isArray(this.channel.avatars)) {
          if (!this.channel.avatar) return ''

          return this.channel.avatar.url
        }

        if (this.channel.avatar.length === 0) return ''

        const biggestAvatar = [ ...this.channel.avatars ].sort((a1, a2) => {
          if (a1.width < a2.width) return 1
          if (a1.width === a2.width) return 0
          return -1
        })[0]

        return biggestAvatar.url
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import '../scss/_variables';

  .channel {
    $size: 140px;

    .image-container {
      img {
        object-fit: cover;
        max-width: $size;
        max-height: $size;
        min-width: $size;
        min-height: $size;
        box-shadow: 4px 4px 0 0 $beige-700;
        border-radius: 5px;
      }
    }
  }
</style>
