<template>
  <q-tabs
    v-model="tab"
    inline-label
    class="text-primary">
    <q-tab
      name="upcoming"
      icon="schedule"
      label="Upcoming" />
    <q-tab
      name="past"
      icon="history"
      label="Past" />
  </q-tabs>
  <q-separator />

  <q-tab-panels
    v-model="tab"
    animated>
    <q-tab-panel
      name="upcoming"
      class="q-pa-none">
      <q-card
        clas="q-ma-md"
        v-if="!futureUserReservations.length">
        <q-card-section>
          <div class="text-h6">You don't have any upcoming bookings!</div>
          <div class="text-h8">Why don't you go make one?</div>
        </q-card-section>
        <q-card-actions>
          <q-btn
            color="primary"
            icon="event"
            :size="`1.25em`"
            label="Book Now"
            rounded
            class="full-width"
            :align="'left'"
            to="/schedule/book" />
        </q-card-actions>
      </q-card>
      <div v-else>
        <div
          v-for="reservation in futureUserReservations"
          :key="reservation.$id">
          <ReservationCardComponent :modelValue="reservation" />
        </div>
      </div>
    </q-tab-panel>
    <q-tab-panel
      name="past"
      class="q-pa-none">
      <div
        v-for="reservation in pastUserReservations"
        :key="reservation.$id">
        <ReservationCardComponent :modelValue="reservation" />
      </div>
    </q-tab-panel>
  </q-tab-panels>
</template>
<script setup lang="ts">
import { useReservationStore } from 'src/stores/reservation';
import ReservationCardComponent from 'src/components/scheduling/ReservationCardComponent.vue';
import { onMounted, ref } from 'vue';

const { futureUserReservations, pastUserReservations } = useReservationStore();

onMounted(() => useReservationStore().fetchUserReservations());

const tab = ref('upcoming');

// const showMarker = (
//   index: number,
//   items: Reservation[] | undefined
// ): boolean => {
//   if (!items) return false;

//   const currentItemDate = new Date(items[index].start);
//   const nextItemDate = index > 0 ? new Date(items[index - 1].start) : null;

//   // Show marker if current item is past and the next item is future or vice versa
//   return (
//     isPast(currentItemDate) && (nextItemDate === null || !isPast(nextItemDate))
//   );
// };
</script>
