<script setup>
import avatar3 from '@images/avatars/avatar-3.png';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const router = useRouter()
const route = useRoute()
const store = useStore();
const currentUser = ref(localStorage.getItem('user_role'));
const access_token = localStorage.getItem('access_token');
const isVisiable = ref(true);
const itemHistory = ref([]);
const notifications = ref([]);
onMounted(async () => {
  if (currentUser.value == 'patient') {
    console.log("currentUserAsif", currentUser.value);
    await store.dispatch('getPatientsNotification')
    itemHistory.value = store.getters.getPatientsNotification.notification;
    console.log("itemHistory", itemHistory.value);
    if (itemHistory.value == '') {
      console.log("itemHistory not found");
      itemHistory.value = [
        {
          "id": 1,
          "created_at": "2024-07-17T19:08:45.000000Z",
          "updated_at": "2024-07-30T19:08:45.000000Z",
          "deleted_at": null,
          "status": "Approved",
          "cart_id": 20,
          "patient_id": 38,
          "message": "Order Update",
          "description": "Your order status has been updated."
        }
      ]
    }
    console.log("second hostory", itemHistory.value);
    appendItemHistoryToNotifications(itemHistory.value);
  }
  else {
    itemHistory.value = '';
  }

});


const appendItemHistoryToNotifications = (itemHistory) => {
  if (itemHistory) {
    itemHistory.forEach(item => {
      notifications.value.push({
        id: item.cart_id,
        img: avatar3, // Placeholder for image
        title: item.message,
        subtitle: item.description,
        time: new Date(item.created_at).toLocaleString(),
        isSeen: false,
      });
    });
  } else {
    notifications.value = [];
  }

  console.log("notifications1", notifications.value);
};
// const notifications = ref([
//   {
//     id: 1,
//     img: avatar4,
//     title: 'Congratulation Flora! 🎉',
//     subtitle: 'Won the monthly best seller badge',
//     time: 'Today',
//     isSeen: true,
//   },
//   {
//     id: 2,
//     text: 'Tom Holland',
//     title: 'New user registered.',
//     subtitle: '5 hours ago',
//     time: 'Yesterday',
//     isSeen: false,
//   },
//   {
//     id: 3,
//     img: avatar5,
//     title: 'New message received 👋🏻',
//     subtitle: 'You have 10 unread messages',
//     time: '11 Aug',
//     isSeen: true,
//   },
//   {
//     id: 4,
//     img: paypal,
//     title: 'Paypal',
//     subtitle: 'Received Payment',
//     time: '25 May',
//     isSeen: false,
//     color: 'error',
//   },
//   {
//     id: 5,
//     img: avatar3,
//     title: 'Received Order 📦',
//     subtitle: 'New order received from john',
//     time: '19 Mar',
//     isSeen: true,
//   },
// ])

const removeNotification = notificationId => {
  notifications.value.forEach((item, index) => {
    if (notificationId === item.id)
      notifications.value.splice(index, 1)
  })
}

const markRead = notificationId => {
  notifications.value.forEach(item => {
    notificationId.forEach(id => {
      if (id === item.id)
        item.isSeen = true
    })
  })
}

const markUnRead = notificationId => {
  notifications.value.forEach(item => {
    notificationId.forEach(id => {
      if (id === item.id)
        item.isSeen = false
    })
  })
}

const handleNotificationClick = notification => {
  console.log("ok", notification);
  if (!notification.isSeen)
    markRead([notification.id])
  const mainDiv = document.querySelector('.v-overlay-container');

  // Remove all child elements
  while (mainDiv.firstChild) {
    mainDiv.removeChild(mainDiv.firstChild);
  }
  router.push('/order-detail/' + notification.id);

}

const handleClick = (event) => {
  // Handle window click event here
  console.log('Window clicked!', event);
};
</script>

<template>
  <!-- <div v-if="history"></div> -->
  <Notifications :notifications="notifications" @remove="removeNotification" @read="markRead" @unread="markUnRead"
    @click:notification="handleNotificationClick" />
</template>
