<template>
  <b-button :block="block" :variant="variant" @click="shareLink" :data-qa="`${dataQaPrefix}-native-share-btn`">
    <span>{{ buttonText || this.$t('Common.Button.NativeShare') }}</span>
  </b-button>
</template>

<script>
import { mapActions } from 'vuex'
import { qrLinkCopyMixin } from '@/app/_global/mixins'
export default {
  name: 'NativeShareButton',
  mixins: [qrLinkCopyMixin],
  props: {
    text: { type: String, default: '' },
    title: { type: String, default: '' },
    link: { type: String, required: true },
    block: { type: Boolean, default: false },
    variant: { type: String, default: 'primary' },
    buttonText: { type: String, required: false },
    nativeShare: { type: Boolean, default: true },
    dataQaPrefix: { type: String, required: true },
  },
  methods: {
    ...mapActions(['isMobile']),
    async shareLink() {
      let success = false
      if (this.nativeShare) {
        let isMobile = await this.isMobile()
        if (navigator.share && isMobile) {
          await navigator
            .share({
              title: this.title,
              text: this.text,
              url: this.link,
            })
            .then(() => {
              success = true
            })
        }
      }
      if (!success) {
        this.copyLink(this.link, this.defaultCopiedCallBack)
      }
    },
  },
}
</script>
