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

var html = `
    <div class="nav-functions" v-if="!store.user">
        <a href="#" @click="redirect(loginUrl)" class="main-menu-item w-nav-link">{{ t.login }}</a>
        <a href="#" @click="redirect(registerUrl)" class="button-large w-button">{{ t.register }}</a>
    </div>
    <div class="nav-functions" v-else>
        <a href="#" @click="redirect()" class="button-large-gray-1 button-large w-button">{{ t.account }}</a>
    </div>
`;

Vue.customElement(tag, {
    template: html,
    props: [
        'loginUrl',
        'registerUrl',
        'accountUrl',
        'userAccountUrl'
    ],
    data: () => ({
        t: {
            override: "",
            login: "Inloggen",
            register: "School aanmelden",
            account: 'Mijn account'
        },
        store: app.store,
    }),
    methods: {
        redirect(url) {
            if (url) {
                window.location.href = url;
            } else {
                this.store.user.getRoles().then(() => {
                    window.location.href = this.store.user.teacher ? this.accountUrl : this.userAccountUrl;
                }).catch(error => {
                    console.log(error);
                });
            }
        }
    },
    beforeMount() {
        app.extendFromDOM(this,this.override) // fix for vue's lack of dynamic props/html-attributes
    },
    mounted() {}
});