<script setup>
import upgradeBannerDark from '@images/pro/upgrade-banner-dark.png';
import upgradeBannerLight from '@images/pro/upgrade-banner-light.png';
import VerticalNavLayout from '@layouts/components/VerticalNavLayout.vue';
import VerticalNavLink from '@layouts/components/VerticalNavLink.vue';
import { useRoute, useRouter } from 'vue-router';
import { useTheme } from 'vuetify';
import { useStore } from 'vuex';
const isConferncePage = computed(() => store.getters.getCurrentPage === '/provider/telehealth');
const isConferncePageForPatient = computed(() => store.getters.getCurrentPage === '/queue');
const router = useRouter()
const route = useRoute()
const store = useStore()
const queueUsers = ref([]);
const usertime = ref(null);
const isMuted = ref(false);
const isMicrophoneAllowed = ref(null);
const profileName = ref();
const isCameraAllowed = ref(false);
const toggelUserValue = ref(null)
const isMobile = ref(window.innerWidth <= 768);
const isLoadingVisible = ref(false);
const emailPatient = ref('')
const agePatient = ref('')
const genderPatient = ref('')
const namePatient = ref('')





// Components
import Footer from '@/layouts/components/Footer.vue';
import QueueComponent from '@/layouts/components/QueueComponent.vue';
import UserProfile from '@/layouts/components/UserProfile.vue';
import NotesPatientCall from '@/pages/NotesPatient.vue';
import PatientProfileCall from '@/pages/PatientProfile.vue';
import PrescriptionPatientCall from '@/pages/PrescriptionPatient.vue';
import LabKitOrderCall from '@/pages/patient-lab-kit-order.vue';

import { computed } from 'vue';
const vuetifyTheme = useTheme()
const userRole = localStorage.getItem('user_role'); // Fetch user role from local storage
const isPatient = computed(() => userRole.toLowerCase() === 'patient');
const isAgent = computed(() => userRole.toLowerCase() === 'agent');
//const currentRout = computed(() => localStorage.getItem('getCurrentPage'));queue');
const dialogNote = ref(false);
const dialogLabKit = ref(false);
const dialogPrescription = ref(false);
const dialogProfile = ref(false);


const upgradeBanner = computed(() => {
    return vuetifyTheme.global.name.value === 'light' ? upgradeBannerLight : upgradeBannerDark
})
const isCameraPermissionGranted = ref(false);
const isMicrophonePermissionGranted = ref(false);
const getIsTonalSnackbarVisible = ref(false);
const errorMessage = ref(null);





const checkMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};
const calculateAge = (dateOfBirth) => {
    const today = new Date();
    const birthDate = new Date(dateOfBirth);
    let age = today.getFullYear() - birthDate.getFullYear();
    const monthDiff = today.getMonth() - birthDate.getMonth();

    if (
        monthDiff < 0 ||
        (monthDiff === 0 && today.getDate() < birthDate.getDate())
    ) {
        age--;
    }

    return age;
}
onMounted(async () => {
    console.log("router", store.getters.getCurrentPage)

    window.addEventListener('resize', checkMobile);

    await store.dispatch('getPatientInfoByID')

    namePatient.value = store.getters.getPatient.first_name + ' ' + store.getters.getPatient.last_name;
    emailPatient.value = store.getters.getPatient.email
    agePatient.value = calculateAge(store.getters.getPatient.dob) + ""
    genderPatient.value = store.getters.getPatient.gender
    // console.log("genderPatient.value", store.getters.getPatient);
});
const genderAbbreviation = computed(() => {
    if (store.getters.getPatient.gender) {
        const gender = store.getters.getPatient.gender.toLowerCase();
        if (gender === 'male') {
            return 'M';
        } else if (gender === 'female') {
            return 'F';
        }
        return '';
    }
    return '';
});

const openNotesModel = ref(false)
const patientNotes = ref(null)
const openNotes = async () => {
    await store.dispatch('getAgentPatientNotes')
    patientNotes.value = store.getters.getPatientNotes
    openNotesModel.value = true
};
const openProfile = () => {
    // Resolve the path to the desired route
    const routeData = router.resolve({ path: '/provider/patient-profile' });
    console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
    console.log(route);
    //dialogProfile.value = true
    // Open the resolved route in a new tab
    // if (route.path == '/provider/telehealth') {
    //     window.open(routeData.href, '_blank');
    // } else {
    router.push(routeData.href)
    // }

};
const queueComp = ref(null);
const openCallModel = async (type) => {
    console.log('here')
    if (queueComp.value) {
        console.log(queueComp.value)
        let Calluser = localStorage.getItem('call_user')
        // console.log('Calluser', Calluser)
        queueComp.value.openDialog(JSON.parse(Calluser), type);
    }
};
const openPatientPrescription = () => {
    if (queueComp.value) {
        console.log(queueComp.value)
        let Calluser = localStorage.getItem('call_user')
        // console.log('Calluser', Calluser)
        console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
        console.log(route);
        //dialogPrescription.value = true
        const routeData = router.resolve({ path: '/provider/prescriptions' });
        // if (route.path == '/provider/telehealth') {
        //     window.open(routeData.href, '_blank');
        // } else {
        router.push(routeData.href)
        // }
    }
    // Resolve the path to the desired route


    // Open the resolved route in a new tab

};
const openPatientNotes = () => {
    if (queueComp.value) {
        console.log(queueComp.value)
        let Calluser = localStorage.getItem('call_user')
        // console.log('Calluser', Calluser)
        console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
        console.log(route);
        //dialogNote.value = true
        const routeData = router.resolve({ path: '/provider/notes' });
        // if (route.path == '/provider/telehealth') {
        //     window.open(routeData.href, '_blank');
        // } else {
        router.push(routeData.href)
        // }
    }
    // Resolve the path to the desired route


    // Open the resolved route in a new tab

};
const openPatientLabKitOrder = () => {
    if (queueComp.value) {
        console.log(queueComp.value)
        let Calluser = localStorage.getItem('call_user')
        // console.log('Calluser', Calluser)
        console.log('store.getters.getCurrentPage', store.getters.getCurrentPage)
        console.log(route);
        // dialogLabKit.value = true
        const routeData = router.resolve({ path: '/provider/lab-kit-order' });
        // if (route.path == '/provider/telehealth') {
        //     window.open(routeData.href, '_blank');
        // } else {
        router.push(routeData.href)
        // }
    }
    // Resolve the path to the desired route


    // Open the resolved route in a new tab

};

</script>

<template>
    <VDialog v-model="openNotesModel" refs="myDialog" persistent width="500">

        <!-- <template v-slot:default="{ isActive }"> -->
        <v-card>
            <v-card-text>
                <div class="mt-2 mb-2">
                    <h4>Patient Notes.</h4>
                </div>
                <p v-for="note in patientNotes" :key="note.id"> {{ note.note }}</p>

            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn text="Close" @click="openNotesModel = false"></v-btn>
            </v-card-actions>
        </v-card>
        <!-- </template> -->
    </VDialog>
    <VDialog v-model="isLoadingVisible" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog>
    <VSnackbar v-model="getIsTonalSnackbarVisible" :timeout="5000" location="top end" variant="flat" color="red">
        {{ errorMessage }}
    </VSnackbar>
    <VerticalNavLayout>

        <!-- 👉 navbar -->
        <template #navbar="{ toggleVerticalOverlayNavActive }">
            <div class="d-flex h-100 align-center">
                <!-- 👉 Vertical nav toggle in overlay mode -->
                <IconBtn class="ms-n3 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
                    <VIcon icon="bx-menu" />
                </IconBtn>

                <!-- 👉 Search -->
                <div class="d-flex align-center cursor-pointer" style="user-select: none;">

                </div>

                <VSpacer />

                <UserProfile />

            </div>
        </template>

        <template #vertical-nav-content>

            <v-row class='mx-2'>

                <v-list class="custom-class" style="background-color: rgb(var(--v-theme-yellow)) ;">
                    <v-list-item>
                        <!-- <template v-slot:prepend>
                            <v-icon icon="mdi-account" size="20"></v-icon>
                        </template> -->
                        <v-list-item-title>
                            <h4>{{ namePatient }}, {{ agePatient }}, {{ genderAbbreviation }}</h4>
                        </v-list-item-title>
                    </v-list-item>
                    <!-- <v-list-item class="mb-0">
                        <template v-slot:prepend>
                            <v-icon icon="mdi-email" size="20"></v-icon>
                        </template>
                        <v-list-item-title>{{ emailPatient }}</v-list-item-title>
                    </v-list-item> -->
                    <!-- <v-list-item>
                        <template v-slot:prepend>
                            <v-icon icon="mdi-calendar-account" size="20"></v-icon>
                        </template>
                        <v-list-item-title>{{ agePatient }}</v-list-item-title>
                    </v-list-item> -->
                    <!-- <v-list-item>
                        <template v-slot:prepend>
                            <v-icon icon="mdi-gender-male-female" size="20"></v-icon>
                        </template>
                        <v-list-item-title>{{ genderPatient }}</v-list-item-title>
                    </v-list-item> -->
                </v-list>


            </v-row>

            <QueueComponent v-if="!isMobile" ref="queueComp" :isVisable="true" />
            <VerticalNavLink v-if="isAgent" @click=openProfile() :item="{
        title: 'Profile',
        icon: 'bx-user',
    }" />
            <VerticalNavLink v-if="isAgent" @click=openPatientNotes() :item="{
        title: 'Notes',
        icon: 'mdi-clipboard',
    }" />

            <VerticalNavLink v-if="isAgent" @click="openPatientLabKitOrder()" :item="{
        title: 'Lab Order',
        icon: 'mdi-flask',
    }" />
            <VerticalNavLink v-if="isAgent" @click="openPatientPrescription()" :item="{
        title: 'Prescriptions',
        icon: 'mdi-clipboard-text',
    }" />



            <v-dialog v-model="dialogNote" max-width="800">
                <v-card class="pa-3">
                    <v-row>
                        <v-col cols="12" class="text-right cross">
                            <v-btn icon color="transparent" small @click="dialogNote = false">
                                <v-icon>mdi-close</v-icon>
                            </v-btn>


                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="12" md="12">
                            <NotesPatientCall></NotesPatientCall>
                        </v-col>
                    </v-row>

                </v-card>
            </v-dialog>

            <!-- lab kit model ==== -->
            <v-dialog v-model="dialogLabKit" max-width="1200">
                <v-card class="pa-3">
                    <v-row>
                        <v-col cols="12" class="text-right cross">
                            <v-btn icon color="transparent" small @click="dialogLabKit = false">
                                <v-icon>mdi-close</v-icon>
                            </v-btn>


                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="12" md="12">
                            <LabKitOrderCall></LabKitOrderCall>
                        </v-col>
                    </v-row>

                </v-card>
            </v-dialog>
            <!-- Prescription model model ==== -->
            <v-dialog v-model="dialogPrescription" max-width="1200">
                <v-card class="pa-3">
                    <v-row>
                        <v-col cols="12" class="text-right cross">
                            <v-btn icon color="transparent" small @click="dialogPrescription = false">
                                <v-icon>mdi-close</v-icon>
                            </v-btn>


                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="12" md="12">
                            <PrescriptionPatientCall></PrescriptionPatientCall>
                        </v-col>
                    </v-row>

                </v-card>
            </v-dialog>
            <!-- Profile model model ==== -->
            <v-dialog v-model="dialogProfile" max-width="1200">
                <v-card class="pa-3">
                    <v-row>
                        <v-col cols="12" class="text-right cross">
                            <v-btn icon color="transparent" small @click="dialogProfile = false">
                                <v-icon>mdi-close</v-icon>
                            </v-btn>


                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="12" md="12">
                            <PatientProfileCall></PatientProfileCall>
                        </v-col>
                    </v-row>

                </v-card>
            </v-dialog>
            <!-- <VerticalNavLink v-if="isAgent" @click="openCallModel('Request For Documents')" :item="{
        title: 'Request For Documents',
        icon: 'mdi-file-document-multiple',
    }" /> -->

            <VerticalNavLink @click=logout() v-if="isPatient" :item="{
        title: 'Logout',
        icon: 'bx-log-out',
    }" />
            <QueueComponent v-if="isMobile" ref="queueComp" :isVisable="true" />
        </template>



        <!-- 👉 Pages -->
        <slot />

        <!-- 👉 Footer -->
        <template #footer>
            <Footer />
        </template>
    </VerticalNavLayout>
</template>

<style lang="scss" scoped>
.meta-key {
    border: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
    border-radius: 6px;
    block-size: 1.5625rem;
    line-height: 1.3125rem;
    padding-block: 0.125rem;
    padding-inline: 0.25rem;
}

::v-deep .custom-menu {
    position: relative;
}

::v-deep .custom-menu::before {
    content: "" !important;
    position: absolute !important;
    transform: translateY(-50%);
    top: 50% !important;
    left: -8px !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-bottom: 8px solid #fff !important;
}

.custom-class .v-list-item {
    min-height: 21px;
    color: #fff !important;
}

.custom-class .v-list-item h4 {
    color: #fff !important;
}

.custom-class {
    margin-bottom: 12px;
    background-color: rgb(var(--v-theme-yellow)) !important;
    color: #fff !important;
}

// Styles for the VList component


.more .v-list-item-title {
    color: rgb(106 109 255);
}

.more .menu-item:hover {
    cursor: pointer;
}

.slide-enter-active,
.slide-leave-active {
    transition: transform 0.3s ease;
}

.slide-enter,
.slide-leave-to {
    transform: translateX(-100%);
}

.start-call-btn {
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
}

.button_margin {
    margin: 2px;
}

.dialog_padding {
    padding: 5px;

}



.custom-menu .v-menu__content {
    background-color: #333;
    color: #fff;
    border-radius: 4px;
    padding: 8px 0;
}

.user-info {
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease;
}

.list-item-hover {
    transition: background-color 0.3s ease;

    &:hover {
        background-color: rgba(var(--v-theme-primary), 0.1);

        .start-call-btn {
            opacity: 1;
            display: block;
            position: relative;
            left: -35px;
        }

        .user-info {
            opacity: 0;
            display: none;
        }
    }
}

.pop_card {

    overflow: hidden !important;
    padding: 10px;
}

.v-overlay__content {

    max-height: 706.4px;
    max-width: 941.6px;
    min-width: 24px;
    --v-overlay-anchor-origin: bottom left;
    transform-origin: left top;
    top: 154.4px !important;
    left: 204px !important;


}

.button_margin {
    margin-top: 10px;
    font-size: 10px;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    .pop_card {
        max-width: 100%;
        margin: 0 auto;
    }
}

.container_img {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

.image {
    order: 2;
    /* Change the order to 2 in mobile view */
}

.text {
    order: 1;
    /* Change the order to 1 in mobile view */
}

/* Media query for mobile view */
@media (max-width: 768px) {
    .container_img {
        flex-direction: row;
        margin-top: 10px;
    }

    .button_margin_mobile {
        width: 100%;
    }

    .image {
        width: 20%;
        padding: 0 10px;
    }

    .text {
        width: 80%;
        /* Each takes 50% width */
        padding: 0 10px;
        /* Optional padding */
    }

}

::-webkit-scrollbar {
    width: 10px;
    /* Width of the scrollbar */
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Color of the track */
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
    /* Color of the handle */
    border-radius: 5px;
    /* Roundness of the handle */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Color of the handle on hover */
}

/* Container for the content */
.scroll-container {
    max-height: 191px;
    /* Maximum height of the scrollable content */
    overflow-y: scroll;
    /* Enable vertical scrolling */
}

/* Content within the scroll container */
.scroll-content {
    padding: 20px;
}

/* Example of additional styling for content */
.scroll-content p {
    margin-bottom: 20px;
}

.cross button {

    padding: 0px;
    margin: 0px;
    /* font-size: 10px; */
    background: none;
    border: none;
    box-shadow: none;
    height: 23px;

}

.v-data-table-header {
    display: table-header-group;
}
</style>
