<script setup lang="ts">
import {defineProps, defineEmits, ref, watch} from 'vue';
import { timeBookingsNewScheduler } from '@/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewScheduler.vue';
import { SessionUser } from '@/components/session/token/SessionUser.vue';
import ButtonsBox from "@/components/displays/boxes/ButtonsBox.vue";

const date = ref();
// Set the initial date to the current date YYYY-MM-DD format
const formatDate = (date_input) => {
  return date_input.toISOString().split('T')[0];
};
date.value = formatDate(new Date());

watch(timeBookingsNewScheduler.date.selected, (newDate) => {
  // Update the date when the selected date changes
  date.value = formatDate(newDate);
});

watch(date, (newDate) => {
  // Update the selected date in the scheduler when the date input changes
  timeBookingsNewScheduler.date.selected.value = new Date(newDate);
});
</script>

<template>
  <nav class="level is-mobile" style="width: 100%;">
    <div class="level-left" style="width: 20%;">
      <!-- Previous week button -->
      <div class="level-item">
          <button
            class="button is-grey is-light is-fullwidth"
            @click="timeBookingsNewScheduler.date.week.previous()"
          >
            <span class="icon is-small">
              <i class="fas fa-chevron-left"></i>
            </span>
            <span>Forrige uge</span>
          </button>
      </div>
    </div>
    <div class="level-item">
      <!-- Date selection -->
      <div class="field">
        <div class="control">
          <input class="input" type="date" v-model="date"/>
        </div>
      </div>
    </div>
    <div class="level-right" style="width: 20%;">
      <!-- Next week button -->
      <div class="level-item">
          <button
            class="button is-grey is-light is-fullwidth"
            @click="timeBookingsNewScheduler.date.week.next()"
          >
            <span class="icon is-small">
              <i class="fas fa-chevron-right"></i>
            </span>
            <span>Næste uge</span>
          </button>
      </div>
    </div>
  </nav>

</template>

<style scoped>

</style>