<template>
    <div v-show="uStore.user" class="main-header sticky nav nav-item hor-header" style="margin-bottom: -63.4286px;">
        <div class="main-container container">
            <div class="main-header-left ">
                <div class="responsive-logo">
                    <a href="/" class="header-logo">
                        <img src="/src/assets/images/logo.png" class="logo-1" alt="logo">
                        <img src="/src/assets/images/logo-light.png" class="dark-logo-1" alt="logo">
                    </a>
                </div>
                <div class="app-sidebar__toggle">
                    <a class="open-toggle" href="javascript:void(0);">
                        <i class="header-icon fe fe-align-left"></i>
                    </a>
                    <a class="close-toggle" href="javascript:void(0);">
                        <i class="header-icons fe fe-x"></i>
                    </a>
                </div>
            </div>
            <div class="main-header-right">
                <button class="navbar-toggler navresponsive-toggler d-lg-none ms-auto" type="button">
                    <span class="navbar-toggler-icon fe fe-more-vertical ">
                    </span>
                </button>
                <div class="mb-0 navbar navbar-expand-lg navbar-nav-right responsive-navbar navbar-dark p-0">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent-4">
                        <ul class="nav nav-item  navbar-nav-right ms-auto">
                            <li class="nav-item full-screen fullscreen-button" @click="toggleFullScreen">
                                <a class="new nav-link full-screen-link" href="javascript:void(0);">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="header-icon-svgs" viewBox="0 0 24 24"
                                        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                        stroke-linejoin="round">
                                        <path
                                            d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3">
                                        </path>
                                    </svg>
                                </a>
                            </li>

                            <li class="dropdown main-profile-menu">
                                <a class="profile-user d-flex" data-bs-toggle="dropdown" href="javascript:void(0);">
                                    <img src="/src/assets/images/6.jpg" class="logo vue" alt="Vue logo" />
                                </a>
                                <div class="dropdown-menu">
                                    <div class="main-header-profile bg-primary p-3">
                                        <div class="d-flex wd-100p">
                                            <div class="main-img-user">
                                                <img src="/src/assets/images/6.jpg" class="logo vue" alt="Vue logo" />
                                            </div>
                                            <div class="ms-3 my-auto">
                                                <h6>{{ fullname }}</h6>
                                                <b> {{ username }}</b>
                                                <vue-countdown :time="timeRemain" :interval="1000"
                                                    v-slot="{ days, hours, minutes, seconds }">
                                                    {{ days }} ngày, {{ hours }}:{{ minutes }}:{{ seconds }}

                                                </vue-countdown>
                                            </div>
                                        </div>
                                    </div>
                                    <a class="dropdown-item" href="profile.html">
                                        <i class="bx bx-user-circle"></i>Tài khoản</a>
                                    <a class="dropdown-item" href="profile.html">
                                        <i class="bx bx-reset"></i> Đổi mật khẩu</a>
                                    <a class="dropdown-item" href="javascript:void(0);" @click="uStore.logout()">
                                        <i class="bx bx-log-out"></i> Đăng xuất
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import VueCountdown from '@chenfengyuan/vue-countdown';

import { userStore } from '@/stores';
const uStore = userStore();
const username = uStore.user ? uStore.user.UserName : "";
const fullname = uStore.user ? uStore.user.FullName : "";

const now = new Date();
let expireTime = new Date();

if (uStore.user) {
    expireTime = new Date(uStore.user.ExpiredTime);
}
const timeRemain = expireTime - now;

function toggleFullScreen() {
    // if (!document.fullscreenElement) {
    //     document.documentElement.requestFullscreen();
    // } else if (document.exitFullscreen) {
    //     document.exitFullscreen();
    // }
    if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

</script>