<script setup lang="ts">
import { timeBookingsNewScheduler } from '../../TimeBookingsNewScheduler.vue';
import { defineProps, ref, computed, defineEmits } from 'vue';
import { SessionUser } from '@/components/session/token/SessionUser.vue';

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

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

const getSlotDateTime = () => {
  // Get the start time of the slot
  const date = props.slot?.date;
  if (!date) {
    return 'Ikke valgt';
  }
  const startTime = SessionUser.functions.date.toLocalTimeHours(date);
  return date ? `${startTime}` : 'Ikke valgt';
}

const onClickSlot = () => {
  // Handle slot click event
  emits('update:onClick', props.slot);
  // Check if the slot is selectable
  if (props.slot.isAvailable) {
    timeBookingsNewScheduler.slots.select(props.slot);
    emits('update:selected', props.slot);
  } else {
    emits('update:onClickUnavailable', props.slot);
    console.warn('Slot is not available for selection:', props.slot);
  }
};
</script>

<template>
  <!-- Grid label for time bookings -->
  <div
      class="cell"
      @click="onClickSlot"
      :class="props.slot.layout.classes"
  >
    <!-- Date from slot -->
    <template v-if="props.slot.isAvailable">
      <span class="label has-text-centered">{{ getSlotDateTime() }}</span>
    </template>
    <template v-else>
      <span class="label">&nbsp;</span>
    </template>
    <!--<span class="label">{{ props.slot }}</span>-->
  </div>
</template>

<style scoped>

</style>