<script setup>
import Notes from '@/pages/pages/patient-meetings/notes.vue';
import Prescription from '@/pages/pages/patient-meetings/prescription.vue';
import moment from 'moment';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const router = useRouter();
const route = useRoute();
const patientId = route.params.patient_id;
const appointmentId = route.params.id;
const currentTab = ref(0);
const appointmentID = ref();
const doctorName = ref();
const startTime = ref();
const endTime = ref();
const duration = ref();
const appointmentData = ref(null);

onMounted(async () => {
    store.dispatch('updateIsLoading', true);
    await store.dispatch('getAppointmentByIdAgent', {
        patient_id: patientId,
        appointment_id: appointmentId,
    });
    appointmentData.value = store.getters.getSinglePatientAppointment;
    appointmentID.value = appointmentId;
    doctorName.value = appointmentData.value.agent_name;
    startTime.value = appointmentData.value.start_time;
    endTime.value = appointmentData.value.end_time;
    duration.value = totalCallDuration(startTime.value, endTime.value);
    localStorage.setItem('meetingPatientAppointmentId', appointmentID.value);
    store.dispatch('updateIsLoading', false);
});

const totalCallDuration = (start_time, end_time) => {
    const startMoment = moment(start_time);
    const endMoment = moment(end_time);
    const duration = moment.duration(endMoment.diff(startMoment));
    const hours = duration.hours();
    const minutes = duration.minutes();
    const seconds = duration.seconds();
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
};
</script>

<template>
    <VCard>
        <VCardText>
            <h3 v-if="appointmentID"> #{{ appointmentID }} By {{ doctorName }} </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 />
                    </VWindowItem>
                    <VWindowItem>
                        <Prescription />
                    </VWindowItem>
                </VWindow>
            </VCardText>
        </div>
    </VCard>
</template>
