<template>
    <div id="app" data-html2canvas-ignore>
        <div v-if="hasAccess"
             id="nav">
            <router-link to="/">Ho11111me</router-link> |
            <router-link to="/protected">Protected</router-link> |
            <a v-if="oidcIsAuthenticated" href @click.prevent="signOut">Sign out</a>
            <a v-else href @click.prevent="authenticateOidc">Sign in</a>
        </div>
        <router-view />
    </div>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'
    export default {
        name: 'App',
        computed: {
            ...mapGetters('oidcStore', [
                'oidcIsAuthenticated'
            ]),
            hasAccess: function() {
                return this.oidcIsAuthenticated || this.$route.meta.isPublic
            }
        },
        methods: {
            ...mapActions('oidcStore', [
                'authenticateOidc',
                'removeOidcUser',
                'signOutOidc'
            ]),
            userLoaded: function(e) {
                console.log('I am listening to the user loaded event in vuex-oidc', e.detail)
            },
            oidcError: function(e) {
                console.log('I am listening to the oidc error event in vuex-oidc', e.detail)
            },
            signOut: function() {
                this.signOutOidc().then(() => {
                    this.$router.push('/')
                })
                // this.removeOidcUser().then(() => {
                //    this.$router.push('/')
                // })
            }
        },
        mounted() {
            window.addEventListener('vuexoidc:userLoaded', this.userLoaded)
            window.addEventListener('vuexoidc:oidcError', this.oidcError)
        },
        created() {
            
        },
        destroyed() {
            window.removeEventListener('vuexoidc:userLoaded', this.userLoaded)
            window.removeEventListener('vuexoidc:oidcError', this.oidcError)
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;
    }

        #nav a {
            font-weight: bold;
            color: #2c3e50;
        }

            #nav a.router-link-exact-active {
                color: #42b983;
            }
</style>
