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

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

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>
