<template>
  <div class="mispace d-flex justify-content-center" v-can:view="'mi-space'">
    <div class="dashboard-panel-element rounded-0 p-4 access-code-container">
      <div class="text-center px-md-5">
        <div>
          <b-img :src="miSpaceLogo" class="icon-size-7 mb-4" />
          <p>
            <b>{{ $t('Mispace.Title') }}, </b>
            <span class="text-medium">{{ $t('MiSpace.Description') }}</span>
          </p>
        </div>

        <div class="mt-4 mb-5">
          <template v-if="getMiSpaceDetails.accessCode">
            <p class="font-size-4 m-0">{{ $t('MiSpace.AccessCode') }}</p>
            <p class="m-0 font-weight-bold font-size-3">{{ getMiSpaceDetails.accessCode }}</p>
          </template>
          <p class="text-medium" v-else>{{ $t('MiSpace.RequestAccessCode.SupportingText') }}</p>
        </div>

        <div>
          <template>
            <b-button
              v-if="getMiSpaceDetails.accessCode"
              block
              size="lg"
              target="_blank"
              variant="primary"
              :href="getMiSpaceDetails.webLink"
              :disabled="!getMiSpaceDetails.webLink"
            >
              <span>{{ $t('Common.LearnMore') }}</span>
            </b-button>

            <b-button v-else block size="lg" variant="primary" @click="requestAccessCode">
              <b-spinner v-show="isLoading('requestMiSpaceAccessCode')" small class="mr-2 align-middle" />
              <span class="text-capitalize">{{ $t('MiSpace.RequestAccessCode') }}</span>
            </b-button>
          </template>

          <b-button
            variant="outline-primary"
            block
            size="lg"
            target="_blank"
            :href="getDownloadLink"
            :disabled="getDownloadLink === '#'"
          >
            {{ $t('MiSpace.GetTheApp') }}
          </b-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import MiSpaceLogo from '@/assets/img/logo-mispace.svg'
import { isSafari } from '@/helpers/browser-detector'

export default {
  name: 'MispaceAccessCode',
  data() {
    return {
      miSpaceLogo: MiSpaceLogo,
      miSpaceDetails: {},
    }
  },
  computed: {
    ...mapGetters(['getMyAccountMemberDetails', 'isLoading']),
    getMiSpaceDetails() {
      return this.miSpaceDetails || {}
    },
    getDownloadLink() {
      let { appStoreLink, playStoreLink, webLink } = this.getMiSpaceDetails
      return (isSafari() && appStoreLink) || playStoreLink || webLink || '#'
    },
  },
  mounted() {
    let self = this
    this.loadMyAccountInfo().then(() => {
      let { app_store_link, play_store_link, web_link, access_code } = self.getMyAccountMemberDetails.mi_space || {}
      self.miSpaceDetails = {
        accessCode: access_code || '',
        appStoreLink: app_store_link,
        playStoreLink: play_store_link,
        webLink: web_link,
      }
    })
  },
  methods: {
    ...mapActions(['loadMyAccountInfo', 'requestMiSpaceAccessCode']),
    requestAccessCode() {
      let self = this
      this.requestMiSpaceAccessCode().then(response => {
        if (response === false) {
          self.$swal({
            type: 'error',
            title: self.$t('MiSpace.RequestAccessCode.Fail'),
            text: self.$t('Common.Error.ActionFailure.HelpText'),
          })
        }
        self.miSpaceDetails.accessCode = (response && response.access_code) || ''
      })
    },
  },
}
</script>
