<template>
    <div class="flex flex-column items-center justify-center" id="upload-view">
        <pay :uploadId="uploadId" :status="status" :invoice="invoice"></pay>
        <div class="hr"></div>
        <!--<upload></upload>-->
        <!--<download-link v-if="uploadId && paid" :id="uploadId"></download-link>-->

    </div>
</template>

<script charset="utf-8">
import { mapState, mapGetters } from 'vuex'

import Upload from './Upload.vue';
import Pay from './Pay.vue';
import DownloadLink from './DownloadLink.vue';

import GetWorker from './workerInterface.js';
import Api from './api.js';

const Worker = GetWorker('main');


export default {
    name: 'UploadView',
    data() {
        return {
        }
    },
    props: ['uploadId'],
    mounted (){
        let self = this;
        this.worker = Worker;


        // First check the status to get the invoice
        Api.checkUploadStatus(this.uploadId)
        .then((data)=>{

            // Set upload metadata
            this.$store.commit('setInvoice', data.invoice)
            this.$store.commit('setStatus', data.status)

            // if payment required, poll for invoice paid
            if (data.status.pay_status === 'waiting') {
               Api.pollUploadStatus(this.uploadId)
                .then((data)=>{
                    console.log(data)
                    this.$store.commit('setInvoice', data.invoice)
                    this.$store.commit('setStatus', data.status)

                })
            }


        })
        .catch((err)=>{
            console.error(err)
        })


    },
    computed: {
        ...mapState({
            status: state => state.upload.status,
            invoice: state => state.upload.invoice,
        }),
    },
    components: {
        Upload,
        Pay,
        DownloadLink,
    }
}
</script>

<style>
</style>
