import Vue from 'vue'
import './SntLink.scss'

export default Vue.extend({
  name: 'SntLink',
  props: {
    label: {
      type: [String, Number],
      default: ''
    },
    href: {
      type: String,
      default: ''
    },
    to: {
      type: [String, Object],
      default: undefined
    },
    target: {
      type: String,
      default: '_self'
    }
  },
  data () {
    return {

    }
  },
  computed: {
    fullHref () {
      const href = this.href
      if (this.$_.isURL(href)) {
        if (this.$_.isHTTP(href)) {
          return href
        }
        return `http://${href}`
      }
      return `${window.location.href}${href}`
    }
  },
  template: `
    <div class="snt-link">
      <slot
        :label="label"
        :to="to"
        :href="fullHref"
        :target="target">
        <template v-if="to">
          <router-link
            v-slot="{ href: internalHref, navigate }"
            :to="to"
            custom>
            <a
              :href="internalHref"
              :target="target"
              class="snt-link__link"
              @click="navigate">
              <slot
                name="activator"
                :label="label">
                {{ label }}
              </slot>
            </a>
          </router-link>
        </template>
        <a
          v-else
          :href="fullHref"
          :target="target"
          class="snt-link__link">
          <slot
            name="activator"
            :label="label">
            {{ label }}
          </slot>
        </a>
      </slot>
    </div>
  `
})
