<script setup>
import { 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 props = defineProps({
  notesData: {
    type: Object,
    required: true,
  },
})


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 downloadFile = async (fileUrl, fileName = 'downloadedFile.png') => {
      try {
        const response = await fetch(fileUrl);
        if (!response.ok) throw new Error('Network response was not ok');
        const blob = await response.blob();
        const link = document.createElement('a');
        const url = window.URL.createObjectURL(blob);
        link.href = url;
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
      } catch (error) {
        console.error('Download failed', error);
      }
    };


</script>

<template>
     

  <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 props.notesData.patientNotes" :key="index" v-if="props.notesData.patientNotes.length>0">
            <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" v-if="p_note.note_type=='Notes'">
              {{p_note.note}}
            </span>
          <span class="app-timeline-title" v-if="p_note.note_type == 'file'">
              
          <VIcon>ri-attachment-2</VIcon>  <button @click="downloadFile(p_note.note,'noteFile.png')">Download Image</button>
         
          </span>
            <span class="app-timeline-meta">{{ formatDateDate(p_note.created_at) }}</span>
            <!-- <span></span> -->
          </div>

          <!-- 👉 Content -->
          <div class="app-timeline-text mb-1">
          <router-link
                :to="{ name: 'admin-provider-profile', params: { id: p_note.provider_id } }"
                class=""
              >
                <span class="">{{ p_note.provider_name }}</span>
              </router-link>
         
            <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>
