<template>
    <div id="app" class="flex flex-column items-center">
        <div id="logo" class="w-100 flex justify-center items-end">
            <a href="/" class="logo-titla f1 lh-title tracked">BIT4SAT</a>
        </div>
        <div class="main h-100 w-100 flex mt4 items-start justify-center">
            <router-view  />
        </div>
    </div>
</template>

<script charset="utf-8">
import GetWorker from './workerInterface.js';
const Worker = GetWorker('main');
import { mapState, mapGetters } from 'vuex'

const dlUrlRegex = /d\/(\w+)\/?/
const adminUrlRegex = /r\/(\w+)\/?/

export default {

    mounted(){

        this.worker = Worker

        // listen and route
        this.worker.listenTo('upload-invoice', (e) => {
            console.log("received invoice ", e.data)
                this.$store.commit('setInvoice', e.data.invoice)
                this.$store.commit('setUpStatus', e.data.status)

                // if we are not on upload route go there
                if ( this.$router.currentRoute.name !== 'upload' ) {
                    this.$router.push({name: 'upload', params: { uploadId: e.data.upload_id }})
                }
        })

        // On load if the url is a download url route to download path
        let loc = window.location
        if (loc.pathname.match(dlUrlRegex)) {
            let dlId = dlUrlRegex.exec(loc.pathname)[1]
            history.replaceState("", `download ${dlId}`, '/' )
            this.$router.replace({
                name: 'download',
                replace: true,
                params: {dlId}
            })
        }
        if (loc.pathname.match(adminUrlRegex)) {
            let adminToken = adminUrlRegex.exec(loc.pathname)[1]
            history.replaceState("", `admin`, '/' )
            this.$router.replace({
                name: 'admin',
                replace: true,
                params: {adminToken}
            })
        }

    },
}
</script>

<style>
#app {
    height: 100vh;
}

#logo {
    height: 25%;
}

#logo a {
    color: #FF725C;
    font-style: italic;
    font-weight: bolder;
    text-shadow: 2px 3px #444, -2px -2px #444;
    text-decoration: none;
}

</style>
