<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import Calendar from "@/components/timebookings/displays/Calendar.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";

// Define props and emits
const props = defineProps({
  departmentId: {
    type: Number,
    required: true
  }
});

const showCreateBooking = () => {
  // Show the create booking modal
  SessionUser.objects.department_time_bookings_entries.showCreateObjectForm(
      () => {
        console.log("Booking created");
      },
      {
        department: props.departmentId,
      });
}
</script>

<template>
  <div class="timebookings-calendar">
    <Calendar events="[]"
              calendarId="timebookings-calendar"
              @eventClick="(event) => {
                console.log('Event clicked:', event);
              }"/>
    <button class="button" @click="showCreateBooking">Create Booking</button>
  </div>
</template>

<style scoped>

</style>