<script setup>
import store from '@/store';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const props = defineProps({
    orderData: {
        type: Object,
        required: true,
    },
})

const notes = ref([]);
const historyNotes = computed(async () => {

    let notesData = props.orderData.notes_history;
    for (let data of notesData) {
        if (data.note_type == 'Notes') {
            let dataObject = {}
            dataObject.note = data.note
            dataObject.doctor = data.provider_name;
            dataObject.date = formatDateDate(data.note_date)
            dataObject.appointment_id = data.appointment_id
            dataObject.originalDate = new Date(data.note_date)
            //notes.value.push(dataObject)
        }
    }
    notes.value.sort((a, b) => {
        return b.id - a.id;
    });

    store.dispatch('updateIsLoading', false)
    return notes.value
});
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, '-');
};
onMounted(async () => {
    let notesData = props.orderData.notes_history;
    console.log("notesData", notesData);
    for (let data of notesData) {

        let dataObject = {}
        dataObject.note = data.note
        dataObject.doctor = data.provider_name;
        dataObject.date = formatDateDate(data.note_date)
        dataObject.appointment_id = data.appointment_id
        dataObject.originalDate = new Date(data.note_date)
        notes.value.push(dataObject)

    }
    notes.value.sort((a, b) => {
        return b.originalDate - a.originalDate;
    });
    console.log("getNotes", notes.value);
});
</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 title="Notes" v-if="notes.length > 0">
        <VCardText>
            <VTimeline truncate-line="both" align="start" side="end" line-inset="10" line-color="primary"
                density="compact" class="v-timeline-density-compact">

                <template v-if="historyNotes">
                    <VTimelineItem dot-color="yellow" size="x-small" v-for="(p_note, index) of notes" :key="index">
                        <div class="d-flex justify-space-between align-center mb-3">
                            <span class="app-timeline-title">{{ p_note.note }}</span>
                            <span class="app-timeline-meta">{{ p_note.date }}</span>
                        </div>
                        <p class="app-timeline-text mb-0">
                            {{ p_note.doctor }}
                        </p>
                    </VTimelineItem>
                </template>

            </VTimeline>
        </VCardText>

    </VCard>

    <VCard v-else>
        <VAlert border="start" color="rgb(var(--v-theme-yellow-theme-button))" variant="tonal">
            <div class="text-center">No data found</div>
        </VAlert>
    </VCard>

    <!-- <VList class="pb-0" lines="two" v-if="historyNotes">
        <template v-if="notes.length > 0" v-for="(p_note, index) of notes" :key="index">
            <VListItem class="pb-0" border>
                <VListItemTitle>
                    <span class="pb-0">{{ p_note.note }}</span>
                    <p class="text-start fs-5 mb-0 pb-0 text-grey">
                        <small> {{ p_note.doctor }}</small>
                    </p>
                    <p class="text-end fs-5 mb-0 pb-0 text-grey">
                        <small> {{ p_note.date }}</small>
                    </p>
                </VListItemTitle>
            </VListItem>
            <VDivider v-if="index !== notes.length - 1" />
        </template>
        <template v-else>
            <VCard>
                <VAlert border="start" color="rgb(var(--v-theme-yellow))" variant="tonal">
                    <div class="text-center">No data found</div>
                </VAlert>

            </VCard>
        </template>
    </VList> -->
</template>
