// assets/js/App.vue
<template>
    <router-view class="!font-lato" :key="reload"/>
    <div v-show="connectionCheckPending" class="!font-lato">
        <div class="fixed top-0 left-0 z-20 h-full w-full bg-gray-500 opacity-50">
        </div>
        <div class="fixed p-10 top-[50%] left-[50%] -translate-x-2/4  -translate-y-2/4 z-50 bg-gray-50 rounded-modal shadow-xl flex flex-col justify-center items-center">
            <LoadingVue/>
        </div>
    </div>
</template>
  

<script>


import LoadingVue from "./components/elements/Loading.vue";

export default {
    name: 'App',
    components: {LoadingVue},
    data(){
        return {
            reload: 1,
            connectionCheckPending: true
        }
    },
    async beforeCreate(){
        await this.$axios
        .post(this.$basePath +'/token/refresh',{},{withCredentials: true})
        .then(async (response) => {
            if(response.status == 204){
                this.$global.$connected = true
                await this.$axios
                .get(this.$basePath +'/me',
                { 
                    withCredentials: true 
                }).then(response => {
                    if(response.status == 200){
                        this.$global.$me = response.data
                    } 
                })
            } 
            this.connectionCheckPending = false;
            this.reload++
        }).catch(() => {
            this.connectionCheckPending = false;
            this.reload++   
        })
    },

    created(){
        this.getDeviceType()
        this.getOrientation()
        this.$nextTick(() => {
        window.addEventListener('resize', () => {
            var device = this.$device;
            this.getDeviceType()
            this.getOrientation()
            if(this.$device !== device){
                this.reload++
            }
        })})
    },

    methods:{
        isMobile() {
            return this.$device === 'mobile' ||  this.$orientation === 'portrait'
        },
        getDeviceType() {
            var device = null;
            const ua = navigator.userAgent;
            if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
                device = "tablet";
            } else if (/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(ua)) {
                device = "mobile";
            } else {
                device = "desktop";
            }
            this.$global.$device = device
        },
        getOrientation(){
            this.$global.$orientation = window.innerWidth / window.innerHeight > 1 ? 'landscape' : 'portrait'
        }
    },

    watch: {
        $route: {
            immediate: true,
            handler(to, from) {
                document.title = to.name || 'API - Tekshelf';
                if(to.path === "/" 
                && from
                && from.path === "/login" ) {window.location.reload()}
            }
        },
    }
}
</script>