<script setup>
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 notes = ref([]);

const loadHistoryNotes = async () => {
    console.log('Calling loadHistoryNotes');
    store.dispatch('updateIsLoading', true);
    console.log('Dispatching getHistoryPatientNotes action with', { patient_id: patientId, appointment_id: appointmentId });
    // try {
        // console.log('Dispatching getHistoryPatientNotes action with', { patient_id: patientId, appointment_id: appointmentId });
        await store.dispatch('getHistoryPatientNotes', {
            patient_id: patientId,
            appointment_id: appointmentId,
        });
        let notesData = store.getters.getPatientNotes;
        if (Array.isArray(notesData)) {
            console.log('Fetched notesData:', notesData);
            const formattedNotes = notesData
                .filter(data => data.note_type === 'Notes')
                .map(data => ({
                    file_url: data.file_url,
                    note: data.note,
                    doctor: data.telemedPro.name,
                    date: formatDateDate(data.created_at),
                    id: data.id,
                }))
                .sort((a, b) => b.id - a.id);
            notes.value = formattedNotes;
        } else {
            console.error("getPatientNotes did not return an array", notesData);
        }
    // } catch (error) {
    //     console.error("Error loading patient notes:", error);
    // } finally {
    //     store.dispatch('updateIsLoading', false);
    // }
};

onMounted(() => {
    loadHistoryNotes();
});

const formatDateDate = (date) => {
    const messageDate = new Date(date);
    const options = {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    };
    return messageDate.toLocaleDateString('en-US', options).replace(/\//g, '-');
};
const breadcrums = [
    {
        title: 'Meeting',
        disabled: false,
        to: '/admin/patient/meetings/'+patientId,
    },
    {
        title: 'Notes',
        disabled: false,
    }
    
];
const downloadFile = (fileUrl) => {
    const link = document.createElement('a');
    link.href = fileUrl;
    link.download = 'noteFile.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};
</script>

<template>
     <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0 mb-5">
        <template v-slot:divider style="padding-top:0px; padding-bottom:0px">
            >
        </template>
    </v-breadcrumbs>

  <VCard title="Notes">
    <VCardText>
      <VTimeline
        side="end"
        align="start"
        line-inset="8"
        truncate-line="both"
        density="compact"
      >

        <!-- SECTION Timeline Item: Flight -->
        <template v-for="(p_note, index) in notes" :key="index">
            <VTimelineItem
          dot-color="primary"
          size="x-small"
        >
          <!-- 👉 Header -->
          <div class="d-flex justify-space-between align-center gap-2 flex-wrap">
            <span class="app-timeline-title">
              {{p_note.note}}
            </span>
            <span class="app-timeline-meta">{{ p_note.date }}</span>
            <!-- <span></span> -->
          </div>

          <!-- 👉 Content -->
          <div class="app-timeline-text mb-1">
            <span>{{ p_note.doctor }}</span>
            <VIcon
              size="20"
              icon="tabler-arrow-right"
              class="mx-2 flip-in-rtl"
            />
            <!-- <span>Heathrow Airport, London</span> -->
          </div>

          <!-- <p class="app-timeline-meta mb-2">
            6:30 AM
          </p> -->

          <!-- <div class="app-timeline-text d-flex align-center gap-2">
            <div>
              <VImg
                :src="pdf"
                :width="22"
              />
            </div>

            <span>booking-card.pdf</span>
          </div> -->
        </VTimelineItem>
        </template>
        
        
        <!-- !SECTION -->

        <!-- !SECTION -->
      </VTimeline>
    </VCardText>
  </VCard>
</template>
