<script setup>
import ConfigurationSelect from "@/components/displays/superuser/configuration/ConfigurationSelect.vue";
import {SessionUser} from "@/components/session/token/SessionUser.vue";
import {defineEmits, defineProps, ref, watch} from "vue";
import ConfigurationSwitch from "@/components/displays/superuser/configuration/ConfigurationSwitch.vue";
import { timeBookingsNewScheduler } from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewScheduler.vue";
import TimeBookingsNewGridLabel
  from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/grid/TimeBookingsNewGridLabel.vue";
import TimeBookingsNewGridSlot
  from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/grid/TimeBookingsNewGridSlot.vue";
import TimeBookingsNewControls
  from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/TimeBookingsNewControls.vue";
import TimeBookingsNewGridControls
  from "@/views/dashboards/departmentDashboard/modules/time-bookings/book/displays/grid/TimeBookingsNewGridControls.vue";


const props = defineProps({
  timeBookingsNewProcess: {
    type: Object,
    required: true,
  },
});

const emits = defineEmits(['update:selected']);

// Add Some reservation slots
timeBookingsNewScheduler.slots.addReservation(
    new Date(new Date().setHours(12, 0, 0, 0)), // 08:00
    20, // 20 minutes
)

const onSelected = (slot) => {
  // Handle slot click event
  props.timeBookingsNewProcess.selectTimeSlot(slot);
  emits('update:selected', slot);
};

const departmentOpeningHours = ref([]);
const getDepartmentOpeningHours = (departmentId) => {
  // Make sure the departmentId is valid
  if (!departmentId || isNaN(departmentId)) {
    console.warn('Invalid department ID:', departmentId);
    return;
  }
  // Fetch department opening hours
  SessionUser.objects.department_time_bookings_opening_hours.get.single(departmentId).then(options => {
    console.log('Department opening hours:', options, departmentId);
    departmentOpeningHours.value = options;
  });
};

watch(() => props.timeBookingsNewProcess.department.value, (newValue) => {
  if (newValue) {
    getDepartmentOpeningHours(newValue);
  }
});

// If the departmentId is already set, fetch the opening hours
if (props.timeBookingsNewProcess.department.value) {
  getDepartmentOpeningHours(props.timeBookingsNewProcess.department.value);
}

// Watch for changes in the department opening hours
watch(departmentOpeningHours, (newOpeningHours) => {
    // Set the opening hours for the scheduler
    timeBookingsNewScheduler.opening_hours.set({
      /**
       * {
       *     "id": 4,
       *     "department_id": 11,
       *     "monday_start": null,
       *     "monday_end": null,
       *     "tuesday_start": null,
       *     "tuesday_end": null,
       *     "wednesday_start": null,
       *     "wednesday_end": null,
       *     "thursday_start": null,
       *     "thursday_end": null,
       *     "friday_start": null,
       *     "friday_end": null,
       *     "saturday_start": null,
       *     "saturday_end": null,
       *     "sunday_start": null,
       *     "sunday_end": null
       * }
       */
      monday: { start: newOpeningHours.monday_start, end: newOpeningHours.monday_end },
      tuesday: { start: newOpeningHours.tuesday_start, end: newOpeningHours.tuesday_end },
      wednesday: { start: newOpeningHours.wednesday_start, end: newOpeningHours.wednesday_end },
      thursday: { start: newOpeningHours.thursday_start, end: newOpeningHours.thursday_end },
      friday: { start: newOpeningHours.friday_start, end: newOpeningHours.friday_end },
      saturday: { start: newOpeningHours.saturday_start, end: newOpeningHours.saturday_end },
      sunday: { start: newOpeningHours.sunday_start, end: newOpeningHours.sunday_end },
    });
});

timeBookingsNewScheduler.opening_hours.set({
  //monday: { start: '08:00', end: '16:00' },
  //tuesday: { start: '08:00', end: '16:00' },
})

</script>

<template>
  <!-- Weekday selection -->
  <TimeBookingsNewGridControls />
  <div v-bind:class="timeBookingsNewScheduler.layout.grid.days.classes">
    <div class="grid">
      <template v-for="(day, index) in timeBookingsNewScheduler.days.value" :key="index">
        <TimeBookingsNewGridLabel
            v-bind:label="day.label"
            v-bind:class="day.classes"
        />
      </template>
      <!-- Time slots, per day -->
      <template v-for="(day, index) in timeBookingsNewScheduler.days.value" :key="index">
        <div class="cell">
          <div class="grid">
            <template v-for="(slot, slotIndex) in timeBookingsNewScheduler.slots.getDateSlots(day)" :key="slotIndex">
              <TimeBookingsNewGridSlot
                v-bind:slot="slot"
                @update:selected="onSelected"
                />
            </template>
            <!-- If there are no slots for the day, show a message -->
            <div v-if="timeBookingsNewScheduler.slots.getDateSlots(day).length === 0" class="cell is-empty">
              <p class="has-text-centered">{{SessionUser.objects.global.language.closed}}</p>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>

</style>