<script setup>
const props = defineProps({
    userData: {
        type: Object,
        required: true,
    },
})
import { useStore } from "vuex";
const store = useStore();
const notes = ref([]);
const historyNotes = computed(async () => {

    let notesData = props.userData.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.userData.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>
    <VRow>
        <VCol cols="12" md="4">

            <VCard class="mb-4">
                <VCardText>


                    <div class="text-body-2 text-disabled mt-6 mb-4">
                        CONTACTS
                    </div>
                    <div class="d-flex flex-column gap-y-4">
                        <div class="d-flex align-center gap-x-2">
                            <v-icon size="24">mdi-email-outline</v-icon>
                            <div class="font-weight-medium">
                                Email :
                            </div>
                            <div class="text-truncate">
                                {{ props.userData.patient_details.email }}
                            </div>
                        </div>
                        <div class="d-flex align-center gap-x-2">
                            <v-icon size="24">mdi-phone-outline</v-icon>
                            <div class="font-weight-medium">
                                Phone :
                            </div>
                            <div class="text-truncate">
                                {{ props.userData.patient_details.phone_no }}
                            </div>
                        </div>
                    </div>



                </VCardText>
            </VCard>
        </VCol>
        <VCol cols="12" md="8">
            <!-- 👉 Activity timeline -->
            <VCard title="Notes">
                <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">
                                    Provider Name: {{ p_note.doctor }}
                                </p>
                            </VTimelineItem>
                        </template>

                    </VTimeline>
                </VCardText>
            </VCard>
        </VCol>
    </VRow>

</template>

<style lang="scss" scoped>
.card-list {
    --v-card-list-gap: 16px;
}
</style>
