<template>
    <div id="app">
        <div id="bg">
            <img src="./assets/lens.jpg" alt="">
        </div>
        <sync-loader :loading="isLoading"></sync-loader>
        <b-alert
                :show="dismissCountDown"
                dismissible
                variant="danger"
                @dismissed="dismissCountDown=0"
                @dismiss-count-down="countDownChanged"
        >
            {{alertMessage}}
            <b-progress
                    variant="error"
                    :max="dismissSecs"
                    :value="dismissCountDown"
                    height="4px"
            ></b-progress>
        </b-alert>
        <div id="nav">
            <b-navbar toggleable="lg" type="dark" variant="dark">
                <b-navbar-brand to="/">
                    <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
                    LRC - <strong>L</strong>ecture <strong>R</strong>ecord <strong>C</strong>ontrol
                </b-navbar-brand>

                <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

                <b-collapse id="nav-collapse" is-nav>
                    <b-navbar-nav>
                        <b-nav-item to="/about">About</b-nav-item>

                        <b-nav-item v-if="authenticated" :to="{name: 'rooms'}">{{ $t('Rooms') }}</b-nav-item>
                        <b-nav-item v-if="authenticated" :to="{name: 'recorders'}">{{ $t('Recorders') }}</b-nav-item>
                        <b-nav-item v-if="authenticated" :to="{name: 'commands'}">{{ $t('Commands') }}</b-nav-item>
                        <b-nav-item :to="{name: 'test'}">Test</b-nav-item>
                    </b-navbar-nav>

                    <!-- Right aligned nav items -->
                    <b-navbar-nav class="ml-auto">
                        <b-nav-form>
                            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
                            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
                        </b-nav-form>

                        <b-nav-item-dropdown split split-to="admin" v-if="authenticated" variant="outline-danger" :text="$t('admin')">
                            <b-dropdown-item :to="{name: 'admin.user'}">{{ $t('user') }}</b-dropdown-item>
                            <b-dropdown-item :to="{name: 'admin.group'}">{{ $t('group') }}</b-dropdown-item>
                            <b-dropdown-item href="#">Something else here...</b-dropdown-item>
                        </b-nav-item-dropdown>

                        <b-nav-item-dropdown text="Lang" right>
                            <b-dropdown-item v-for="(lang, i) in langs"
                                             v-bind:key="lang"
                                             @click="$i18n.locale=lang">{{ lang }}
                            </b-dropdown-item>
                        </b-nav-item-dropdown>

                        <b-nav-item-dropdown v-if="authenticated" right>
                            <!-- Using 'button-content' slot -->
                            <template slot="button-content"><em>User</em></template>
                            <b-dropdown-item :to="{name: 'profile'}">Profile</b-dropdown-item>
                            <b-dropdown-item to="/logout" @click.prevent="logout()">Sign Out</b-dropdown-item>
                        </b-nav-item-dropdown>
                        <b-nav-item v-else to="/login">Login</b-nav-item>
                    </b-navbar-nav>
                </b-collapse>
            </b-navbar>

            <span v-if="tokenValidity">({{$t('Session will timeout in: ')}}{{tokenValidity}})</span>
            <span v-else>{{$t('Session has expired!')}} <a v-if="refreshTokenValidity" href="~"
                                                           @click.prevent="refreshToken()">{{$t('Click here to refresh session')}}</a></span>
            <span v-if="refreshTokenValidity">&nbsp;|&nbsp;({{refreshTokenValidity}})
                <input type="checkbox" id="auto_renew_cb" v-model="autoRenewSession">
                <label for="auto_renew_cb">{{$t('auto renew session')}}</label>
            </span>
            <span v-else>{{$t('Can\'t renew session – please login again!')}}</span>
        </div>
        <div id="content_frame">
            <router-view :style="main_style"/>
        </div>
    </div>

</template>

<script>
    import {EventBus, getRemainingJwtValiditySeconds} from '@/utils';
    import SyncLoader from 'vue-spinner/src/SyncLoader.vue';

    export default {
        components: {
            SyncLoader,
        },
        data() {
            return {
                isLoading: false,
                tokenValidity: -1,
                refreshFailed: false,
                refreshTokenValidity: -1,
                showAlert: true,
                alertMessage: 'NO MESSAGE PROVIDED',
                langs: ['de', 'en', 'es'],
                dismissSecs: 5,
                dismissCountDown: 0,
                autoRenewSession: true,
                main_style: {}
            };
        },
        methods: {
            showErrorMessage(msg) {
                this.isLoading = false;
                this.dismissCountDown = this.dismissSecs;
                this.alertMessage = msg;
            },
            countDownChanged(dismissCountDown) {
                this.dismissCountDown = dismissCountDown;
            },

            logout() {
                this.$store.dispatch('logout', {revokeRefreshToken: true});
                this.$router.push({name: 'home'});
            },
            refreshToken() {
                this.$store.dispatch('refreshToken');
            },
        },
        mounted() {
            EventBus.$on('failedLoadingRecorders', (msg) => {
                this.showErrorMessage(msg);
            });
            EventBus.$on('failedLoadingRooms', (msg) => {
                this.showErrorMessage(msg);
            });
            EventBus.$on('failedRefreshingToken', (msg) => {
                this.refreshFailed = true;
            });
            this.$nextTick(() => {
                window.setInterval(() => {
                    const tokenValidity = getRemainingJwtValiditySeconds(this.$store.state.access_token);

                    // this.tokenValidity = this.tokenValidity.format('mm:ss');
                    const refreshTokenValidity = getRemainingJwtValiditySeconds(this.$store.state.refresh_token);

                    if (tokenValidity < 50 && refreshTokenValidity > 30 && this.autoRenewSession && !this.refreshFailed) {
                        this.$store.dispatch('refreshToken');  // renew access token
                    }
                    if (this.autoRenewSession && this.refreshFailed) {
                        this.$store.dispatch('resetToken');  // delete all token info if refresh fails
                        this.$router.push({name: 'login'});
                        this.refreshFailed = false;
                    }
                    if (isNaN(tokenValidity)) {
                        this.tokenValidity = false;
                    } else {
                        this.tokenValidity = new Date(1000 * tokenValidity).toISOString().substr(14, 5);
                    }
                    if (isNaN(tokenValidity)) {
                        this.refreshTokenValidity = false;
                    } else {
                        this.refreshTokenValidity = new Date(1000 * refreshTokenValidity).toISOString().substr(11, 8);
                    }

                }, 1000);
            });

        },
        computed: {
            authenticated() {
                return this.$store.getters.isAuthenticated;
            },
            profile() {
                return this.$store.state.profile;
            },
        },
    };
</script>

<style lang="scss">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';

    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #385875;
    }

    #bg {
        z-index: -100;
        position: fixed;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
    }
    #bg img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        min-width: 50%;
        min-height: 50%;
    }

    h1 {
        color: #275d37;
    }

    #nav {
        padding: 0px;
        text-align: center;

        a {
            font-weight: bold;
            color: #7ea8d6;

            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }

    /* Absolute Center Spinner */
    .v-spinner {
        position: fixed;
        z-index: 999;
        // height: 2em;
        // width: 2em;
        overflow: visible;
        margin: auto;
        top: 50%;
        left: 50%;
        bottom: 0;
        right: 0;
    }

    /* Transparent Overlay */
    .v-spinner:before {
        content: '';
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
    }

</style>
