<script setup lang="ts">
import BoatReservationComponent from '~/components/BoatReservationComponent.vue';
import { useIntervalStore } from '~/stores/interval';
import type { Interval, Reservation } from '~/utils/schedule.types';
import { ref } from 'vue';

const route = useRoute();
const newReservation = ref<Reservation>();

if (typeof route.query.interval === 'string') {
  useIntervalStore()
    .fetchInterval(route.query.interval)
    .then(
      (interval: Interval) =>
        (newReservation.value = <Reservation>{
          resource: interval.resource,
          start: interval.start,
          end: interval.end,
        })
    );
}
</script>

<template>
  <q-page>
    <BoatReservationComponent v-model="newReservation" />
  </q-page>
</template>
