<template>
    <div>
        <div class="main-header sticky nav nav-item hor-header fixed-header visible-title sticky-pin"
            style="margin-bottom: -63.4286px;">
            <div class="main-container container-fluid">
                <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" @click="toggleMenu">
                        <a class="open-toggle" href="javascript:void(0);" v-show="!isSidebarOpen">
                            <i class="header-icon fe fe-align-left"></i>
                        </a>
                        <a class="close-toggle closeButton" href="javascript:void(0);" v-show="isSidebarOpen">
                            <i class="header-icon fe fe-x closeButton"></i>
                        </a>
                    </div>
                </div>
                <div class="main-header-right">
                    <!-- <button class="navbar-toggler navresponsive-toggler d-lg-none ms-auto" type="button"
                        @click="isMenuOpen = !isMenuOpen">
                        <span class="navbar-toggler-icon fe fe-more-vertical ">
                        </span>
                    </button> -->
                    <div :class="['navbar-collapse', { show: isMenuOpen }]" id="navbarSupportedContent-4">
                        <ul class="nav nav-item  navbar-nav-right ms-auto">
                            <li class="dropdown nav-item main-header-notification">
                                <Notification></Notification>
                            </li>
                            <li class="nav-item full-screen fullscreen-button" @click="toggleFullScreen"
                                title="Toàn màn hình">
                                <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 ref="counterRef" @end="onCountdownEnd" :time="timeRemain"
                                                    :interval="1000" v-slot="{ days, hours, minutes, seconds }">
                                                    {{ days }} ngày, {{ hours }}:{{ minutes }}:{{ seconds }}

                                                </vue-countdown>
                                                <a @click="refreshToken" class="text-white tx-15"
                                                    href="javascript:void(0);">
                                                    <i class="fe fe-refresh-cw"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <router-link to="/ho-so-ca-nhan" class="dropdown-item">
                                        <i class="bx bx-user-circle"></i>Hồ sơ cá nhân
                                    </router-link>
                                    <a class="dropdown-item" href="/doi-mat-khau">
                                        <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>
    <div class="jumps-prevent" style="padding-top: 63.4286px;"></div>
    <div class="sticky is-expanded" style="margin-bottom: -63.4286px;"
        :class="{ 'app sidebar-gone sidenav-toggled': isSidebarOpen }">
        <aside class="app-sidebar sidebar-scroll ps ps--active-y open horizontal-main" ref="targetla">
            <!-- <div class="main-sidebar-header active">
                    <a class="desktop-logo logo-light active" href="index.html">
                        <img src="@/assets/images/logo.png" class="main-logo" alt="logo"></a>
                    <a class="desktop-logo logo-dark active" href="index.html">
                        <img src="@/assets/images/logo-light.png" class="main-logo" alt="logo"></a>
                            </div> -->
            <div class="main-sidemenu is-expanded container-fluid">
                <div class="app-sidebar__user clearfix">
                    <div class="dropdown user-pro-body">
                        <div class="main-img-user avatar-xl"> <img alt="user-img" src="/src/assets/images/6.jpg"><span
                                class="avatar-status profile-status bg-green"></span> </div>
                        <div class="user-info">
                            <h4 class="fw-semibold mt-3 mb-0">{{ fullname }}</h4>
                            <p class="mb-0 text-muted">{{ username }}</p>
                            <vue-countdown :time="timeRemain" :interval="1000"
                                v-slot="{ days, hours, minutes, seconds }">
                                {{ days }} ngày, {{ hours }}:{{ minutes }}:{{ seconds }}

                            </vue-countdown>
                        </div>
                    </div>
                </div>
                <!-- <div class="slide-left disabled active is-expanded d-none" @click="toggleMenu">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="#7b8191" width="24" height="24" viewBox="0 0 24 24">
                            <path d="M13.293 6.293 7.586 12l5.707 5.707 1.414-1.414L10.414 12l4.293-4.293z"></path>
                        </svg>
                    </div> -->
                <HeaderMenu></HeaderMenu>


            </div>
        </aside>
    </div>
</template>
<script setup>
import VueCountdown from '@chenfengyuan/vue-countdown';
import { useUserStore } from '@/stores';
import { ref } from 'vue';
import { onClickOutside } from '@vueuse/core'
import HeaderMenu from './menu.vue';

import Notification from './components/notification.vue';

import { useToast } from "vue-toastification";
const toast = useToast();

const uStore = useUserStore();
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 = ref(expireTime - now);
const counterRef = ref(null);

// Thêm biến trạng thái cho menu mobile
const isMenuOpen = ref(false);


function toggleFullScreen() {

    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();
        }
    }
}

const isSidebarOpen = ref(false);
function toggleMenu() {
    if (isSidebarOpen.value) {
        isSidebarOpen.value = false;
    } else {
        isSidebarOpen.value = true;
    }
}
const targetla = ref(null);
onClickOutside(targetla, (event) => {
    var className = event.target.className;
    if (typeof className == 'string') {
        var isCloseButton = event.target.className.includes('closeButton');
        if (!isCloseButton && isSidebarOpen.value) {
            isSidebarOpen.value = false;
        }
    }

})

function onCountdownEnd() {
    console.log('vao onCountdownEnd');
    console.log(expireTime);
    uStore.logout();
}
async function refreshToken() {
    await uStore.refresh();
    console.log(uStore.errorMessage);
    if (uStore.errorMessage == null || uStore.errorMessage == '') {
        var updatedExpired = new Date(uStore.user.ExpiredTime);
        timeRemain.value = updatedExpired - now;
        counterRef.value.restart();
        toast.success("Duy trì đăng nhập thành công!");
    } else {
        toast.error('Duy trì đăng nhập thất bại');
    }
}
</script>
<style scoped>
.app-sidebar {
    overflow: auto;
}
</style>