import app from './../../js/app.js'
var tag = 'app-logout';
app.init({tag});

var html = `
    <div class="dialog" v-if="!store.user">
        <a href="#" class="nav-signout w-nav-link" @click="redirect($event)">{{ t.login }}</a>
    </div>
    <div v-else>
        <a href="#" class="nav-signout w-nav-link" @click="logout($event)">{{ t.logout }}</a>
    </div>
`;

Vue.customElement(tag, {
    template: html,
    props: [
        'redirectUrl'
    ],
    data: () => ({
        t: {
            override: '',
            logout: 'Uitloggen',
            login: 'Inloggen'
        },
        store: app.store,
    }),
    methods: {
        logout(e) {
            e.preventDefault();
            Parse.User.logOut()
            .then(() => {
                this.store.user = false;
                this.redirect();
            });
        },
        redirect() {
            if (this.redirectUrl) {
                window.location.href = this.redirectUrl;
            }
        }
    },
    beforeMount() {
      app.extendFromDOM(this,this.override) // fix for vue's lack of dynamic props/html-attributes
    },
    mounted() {
    }
});