<script setup lang="ts">
import { useReservationStore } from '~/stores/reservation';
import ReservationCardComponent from '~/components/scheduling/ReservationCardComponent.vue';
import { onMounted, ref } from 'vue';

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

const tab = ref('upcoming');
</script>

<template>
  <q-page>
    <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="!reservationStore.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 reservationStore.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 reservationStore.pastUserReservations"
          :key="reservation.$id">
          <ReservationCardComponent :modelValue="reservation" />
        </div>
      </q-tab-panel>
    </q-tab-panels>
  </q-page>
</template>
