<script setup lang="ts">
import {RouterLink, RouterView} from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import LoginPanel from "@/components/LoginPanel.vue";
import {onMounted, ref} from "vue";
import {Auth} from "@/services/auth";
import DialogHost from "@/components/dialog/DialogHost.vue";

let showPopup = ref(false)
let loggedIn = ref(false)

Auth.loggedInSubject.subscribe((isLoggedIn) => {
    loggedIn.value = isLoggedIn
})

function logout(){
    Auth.logout()
}

function print(){
    window.print()
}

onMounted(() => {
    Auth.checkForToken()
})

</script>

<template>
    <nav class="no-print">
        <div class="left">
            <img src="./assets/minis_logo.png" style="height: 40px"/>
            Miniplan App
        </div>
        <div class="right">
            <button class="flat" @click="print"><i>print</i>Drucken</button>
            <button v-if="!loggedIn" class="flat" @click="showPopup = true"><i>login</i> Einloggen</button>
            <button v-if="loggedIn" class="flat" @click="logout"><i>logout</i> Abmelden</button>
        </div>
    </nav>

    <RouterView/>
    <div class="popup-container" :class="{show: showPopup}" @click.self="showPopup = false">
        <LoginPanel :active="showPopup" @success="showPopup = false"/>
    </div>

    <DialogHost/>
</template>

<style scoped lang="less">
nav {
    display: flex;
    align-items: center;
    padding: 10px 32px;
    border-bottom: 1px solid #d7d5d5;
    font-weight: 700;

    .left {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 20px;
    }

    .right {
        flex-shrink: 0;
    }
    @media print{
        display: none;
    }
}

.popup-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.3);
    transition: 200ms opacity;
    opacity: 0;
    pointer-events: none;

    * {
        pointer-events: none;
    }

    &.show {
        pointer-events: auto;

        * {
            pointer-events: auto;
        }

        opacity: 1;
    }
}


</style>
