<script setup>
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import QuestionProgressBar from '../views/pages/questionere/QuestionProgressBar.vue';
import questionsJson from '../views/pages/questionere/questions_parse.json';

const router = useRouter()
const store = useStore()
const questionsJsonData = ref(questionsJson)
const answers = ref(null)
const QuestionsAnswers = ref([]);
const username = ref(null);
const email = ref(null);
const phone = ref(null);
const address1 = ref(null);
const dob = ref(null);
const agePatient = ref(null);
const isMobile = ref(window.innerWidth <= 768);

onMounted(async () => {
    const navbar = document.querySelector('.layout-navbar');
    const callDiv = document.querySelector('.layout-page-content');
    if (navbar) {
        navbar.style.display = 'block';
    }
    if (callDiv)
        callDiv.style.padding = '1.5rem';
    store.dispatch('updateIsLoading', true)
    await store.dispatch('getPatientInfoByID')
    await store.dispatch('getAgentQuestionsAnswers')
    username.value = store.getters.getPatient.first_name + ' ' + store.getters.getPatient.last_name;
    email.value = store.getters.getPatient.email
    phone.value = store.getters.getPatient.phone_no
    dob.value = changeFormat(store.getters.getPatient.dob)
    agePatient.value = calculateAge(store.getters.getPatient.dob) + " Year"
    address1.value = store.getters.getPatient.address + ' ' +
        store.getters.getPatient.city + ' ' +
        store.getters.getPatient.state + ' ' +
        store.getters.getPatient.country;

    // address.value = patient_address;

    answers.value = store.getters.getPatientAnswers
    // console.log('questionsJsonData', questionsJsonData.value)
    // console.log('API Answers', answers.value)
    createFinalArray();
    store.dispatch('updateIsLoading', false)
    window.addEventListener('resize', checkMobile);
});

function changeFormat(dateFormat) {
    const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
    const year = parseInt(dateParts[0]);
    const month = parseInt(dateParts[1]); // No need for padding
    const day = parseInt(dateParts[2]); // No need for padding

    // Create a new Date object with the parsed values
    const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object

    // Format the date as mm-dd-yyyy
    const formattedDate = month + '-' + day + '-' + date.getFullYear();

    return formattedDate;
}

// function changeFormat(dateFormat) {
//     const dateParts = dateFormat.split('-'); // Assuming date is in yyyy-mm-dd format
//     const year = parseInt(dateParts[0]);
//     const month = String(dateParts[1]).padStart(2, '0'); // Pad single-digit months with leading zero
//     const day = String(dateParts[2]).padStart(2, '0'); // Pad single-digit days with leading zero

//     // Create a new Date object with the parsed values
//     const date = new Date(year, month - 1, day); // Month is zero-based in JavaScript Date object

//     // Format the date as mm-dd-yyyy
//     const formattedDate = month + '-' + day + '-' + date.getFullYear();

//     return formattedDate;
// }
const createFinalArray = () => {
    questionsJsonData.value.forEach(question => {
        const { label, key, type } = question;
        if (answers.value.hasOwnProperty(key)) {
            QuestionsAnswers.value.push({
                label,
                key,
                type,
                value: answers.value[key]
            });
        }
    });
    // console.log('------finalArray ', QuestionsAnswers.value)
};

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;
}
</script>

<template>
    <VDialog v-model="store.getters.getIsLoading" 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>
    <v-row class='mb-2'>
        <VCol cols="12" md="12" class="mb-4 ml-5" v-if="username || phone" style="font-size: 16px;">
            <div>
                <h3 class="mb-2"> {{ username }}</h3>
                <div class="mb-1">
                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
                        Email
                    </VTooltip>
                    <VIcon icon="mdi-email" size="20" class="me-2" />{{ email }}
                </div>
                <div class="mb-2">
                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
                        Age
                    </VTooltip>
                    <VIcon icon="mdi-calendar-account" title="Age" size="20" class="me-2" />{{ agePatient }}
                </div>
                <div class="mb-2">
                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
                        Date of birth
                    </VTooltip>
                    <VIcon icon="mdi-calendar" size="20" class="me-2" />{{ dob }}
                </div>

                <div class="mb-2">
                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
                        Address
                    </VTooltip>
                    <VIcon icon="mdi-map-marker" size="20" class="me-2" />{{ address1 }}
                </div>
                <div>
                    <VTooltip location="left" activator="parent" transition="scroll-x-transition">
                        Contact Number
                    </VTooltip>
                    <VIcon icon="mdi-phone" size="20" class="me-2" />{{ phone }}
                </div>
            </div>
        </VCol>
        <v-col cols="12" md="12">
            <VList class="">
                <VListItem class="">
                    <VListItemTitle class="d-flex align-center justify-space-between bg-dark mt-1"
                        style="padding: 5px;">
                        <div :class="isMobile ? '' : 'w-40'">
                            <p class="mb-0" :class="isMobile ? 'heading-text-m' : 'heading-text-d'"><b>SYMPTOM
                                    CHECKLIST</b></p>
                        </div>
                        <div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
                            <p class="mb-0"><b>MILD</b>
                            </p>
                        </div>
                        <div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
                            <p class="mb-0"><b>MODERATE</b>
                            </p>
                        </div>
                        <div class="d-flex align-center" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">
                            <p class="mb-0"><b>SEVERE</b>
                            </p>
                        </div>
                    </VListItemTitle>
                </VListItem>
                <!-- Move the second list item inside the loop -->
                <VListItem class="pt-0 pb-0 ht-li" v-for="(item, index) of QuestionsAnswers" :key="index">
                    <VListItemTitle class="d-flex align-center justify-space-between">
                        <div class="border-right"
                            :class="{ 'bg-silver': (index + 1) % 2 === 0, 'w-custom-m': isMobile, 'w-40': !isMobile }"
                            style="padding-left: 5px;">

                            <p class="text-wrap mb-0" :class="isMobile ? 'heading-text-m' : 'heading-text-d'">{{
        item.label
    }}</p>
                        </div>
                        <div class="d-flex  align-center" :class="isMobile ? 'w-custom-d' : 'w-60'">
                            <QuestionProgressBar :type="item.type" :value="item.value"></QuestionProgressBar>
                        </div>
                    </VListItemTitle>
                </VListItem>
            </VList>



            <!-- <v-table density="compact" fixed-header>
                <thead>
                    <tr class="text-right">
                        <th class="bg-dark">
                            <b>SYMPTOM CHECKLIST</b>
                        </th>
                        <th class="text-right bg-dark">
                            <b>MILD</b>
                            <VIcon icon="mdi-menu-down"></VIcon>
                        </th>
                        <th class="text-right bg-dark">
                            <b>MODERATE</b>
                            <VIcon icon="mdi-menu-down"></VIcon>
                        </th>
                        <th class="text-right bg-dark">
                            <b>SEVERE</b>
                            <VIcon icon="mdi-menu-down"></VIcon>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) of QuestionsAnswers" :key="index">
                        <td class="border-right" v-if="!isMobile">{{ item.label }}</td>
                        <td :colspan="isMobile ? '4' : '3'">
                            <p v-if="isMobile" class="mb-0">{{ item.label }}</p>
                            <QuestionProgressBar :type="item.type" :value="item.value"></QuestionProgressBar>
                        </td>
                    </tr>
                </tbody>
            </v-table> -->
        </v-col>
    </v-row>
</template>

<style lang="scss" scoped>
.mdi-email {
    margin-bottom: 5px;
}

.ht-li {
    min-height: 20px !important;
}

.bg-silver {
    background-color: silver;
}

.text-wrap {
    text-wrap: balance;
}

.w-40 {
    width: 40%;
}

.w-custom-m {
    width: 36%;
}

.w-60 {
    width: 60%;
}

.w-custom-d {
    width: 65%;
}

.v-list-item--density-default.v-list-item--one-line {
    min-height: 40px;
}

.heading-text-m {
    font-size: 9px;
}

.heading-text-d {
    font-size: 12px;
}

.bg-dark {
    background-color: #808080b3 !important;
}

.text-right {
    text-align: right !important;
    width: 23%;
}

.border-right {
    border-right: 1.5px solid black;
}

.hidden-component {
    display: none
}

.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;
}



// 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>
