<script setup>
import Notes from '@/pages/patient/notes.vue';
import Prescription from '@/pages/patient/prescription.vue';
import store from '@/store';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
// const patientId = route.params.patient_id;
const appointmentId = route.params.appiontment_id;
const currentTab = ref(0)
const appiontmentID = ref();
const dcotorName = ref();
const starttime = ref();
const endtime = ref();
const duration = ref();
const appointmentData = ref(null);
const his = computed(async () => {
    store.dispatch('updateIsLoading', true)
    await store.dispatch('getAppointmentByIdPatient', {
        appointment_id: appointmentId,
    })
    // notes.value = store.getters.getPatientNotes;
    appointmentData.value = store.getters.getSinglePatientAppointment;
    // console.log("appointmentData", appointmentData.value);
    appiontmentID.value = appointmentId;
    dcotorName.value = appointmentData.value.telemedPro.name;
    starttime.value = appointmentData.value.appointment.start_time;
    endtime.value = appointmentData.value.appointment.end_time;
    duration.value = totalCallDuration(starttime.value, endtime.value);
    localStorage.setItem('meetingPatientAppiontmentId', appiontmentID.value)
    // console.log("notesData", notesData.value[0].appointment.id);
    store.dispatch('updateIsLoading', false)
});
const totalCallDuration = (start_time, end_time) => {
    console.log(start_time, end_time);
    const startMoment = moment(start_time);
    const endMoment = moment(end_time);

    // Calculate the duration
    const duration = moment.duration(endMoment.diff(startMoment));
    const hours = duration.hours();
    const thours = `${String(hours).padStart(2, '0')}`;
    const minutes = duration.minutes();
    const tminutes = `${String(minutes).padStart(2, '0')}`;
    const seconds = duration.seconds();
    const tsecond = `${String(seconds).padStart(2, '0')}`;
    let durationText;
    if (hours === 0 && minutes === 0) { //for second
        durationText = ` 00:00:${tsecond}`;
    } else if (hours === 0 && minutes > 0) { //for minutes
        durationText = `00:${tminutes}:${tsecond}`;
    } else if (hours > 0) {  //for hours
        durationText = `${thours}:${tminutes}:${tsecond}`;
    }
    const totalDuration = durationText;
    console.log('Duration:', durationText);
    // You may need to adjust this function based on your actual data structure
    // For example, if you have separate first name and last name properties in each appointment object
    return totalDuration; // For now, just return the first name
}
</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>
    <VCard cols="6">
        <VCardText>
            <h3 v-if="his"> #{{ appiontmentID }} By {{ dcotorName }} </h3>
            <span> Meeting duration: <b> {{ duration }}</b></span>
        </VCardText>
        <div class="d-flex">
            <div>
                <VTabs v-model="currentTab" direction="vertical">
                    <VTab>
                        <VIcon start icon="tabler-edit" />
                        Notes
                    </VTab>

                    <VTab>
                        <VIcon start icon="tabler-lock" />
                        Prescriptions
                    </VTab>
                </VTabs>
            </div>

            <VCardText>
                <VWindow v-model="currentTab" class="ms-3">
                    <VWindowItem>
                        <Notes></Notes>
                    </VWindowItem>

                    <VWindowItem>
                        <Prescription></Prescription>
                    </VWindowItem>
                </VWindow>
            </VCardText>
        </div>
    </VCard>
</template>
