const GetCopy = {
    props: [ 'name', 'href', 'token' ],
    data() { return {showCopied: false} },
    template: `<span><a :href="href" @click="fetchAndSave()">{{name}}</a>&nbsp;<a href="#" class="copy" @click="fetchAndCopy()">&#x1F5D0;</a></span>`,
    methods: {
        fetch() {
            event.preventDefault()
            return fetch(this.href, {
                method: 'GET',
                headers: { 'Authorization': 'Bearer ' + this.token },
            })
        },
        handleFetchError(e) {
            console.log("failed to get value:", e)
            this.$root.toast('failed to get value', 'error')
        },
        fetchAndSave() {
            this.fetch().then(resp => resp.blob()).then((value) => {
                window.open(URL.createObjectURL(value), "_blank")
            }).catch(this.handleFetchError)
        },
        fetchAndCopy() {
            this.fetch()
            .then((resp) => resp.headers.get("content-type") == "application/json" ? resp.json() : resp.text())
            .then((value) => {
                try {
                    window.navigator.clipboard.writeText(value)
                    this.$root.toast('copied!', 'info')
                } catch (e) {
                    this.$root.toast('copy failed', 'error')
                }
            }).catch(this.handleFetchError)
        },
    },
}
