<template>
  <Link :href="mailToUrl" :inline="false" class="btn-reset">
    <Icon :aria-label="$_tr('altIconShare')" icon="share" />
  </Link>
</template>

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

export default {
  name: 'ShareContent',
  $_i18nRootPath: 'customs.pp.SHARE',
  components: {
    Link,
    Icon
  },
  props: {
    title: {
      type: String,
      required: true
    },
    url: {
      type: String,
      required: true
    }
  },
  computed: {
    encodedTitle() {
      return encodeURIComponent(this.title)
    },
    encodedText() {
      return encodeURI(
        this.$_tr('customs.pp.PAGE.SHARE.email', [
          `${this.getURLsInfos}/${this.url}`
        ])
      )
    },
    getURLsInfos() {
      return this.getStore('getURLsInfos').api
    },
    mailToUrl() {
      return `mailto:?subject=${this.encodedTitle}&body=${this.encodedText}`
    }
  }
}
</script>
