<template>
  <q-page padding>
    <div class="subcontent">
      <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
      <div class="row justify-center">
        <q-calendar-scheduler
          ref="calendar"
          v-model="selectedDate"
          v-model:model-resources="boatStore.boats"
          resource-key="$id"
          resource-label="displayName"
          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
          view="week"
          bordered
          animated
          cell-width="150px"
          day-min-height="50px"
          @change="onChange"
          @moved="onMoved"
          @click-date="onClickDate"
          @click-time="onClickTime"
          @click-interval="onClickInterval"
          @click-head-day="onClickHeadDay"
        >
          <template #day="{ scope }">
            <div v-for="event in boatReservationEvents(scope)" :key="event.id">
              <div v-if="event.start !== undefined" class="booking-event">
                <span class="title q-calendar__ellipsis">
                  {{ useAuthStore().getUserNameById(event.user) }}
                  <q-tooltip>{{
                    event.start +
                    ' - ' +
                    boatStore.getBoatById(event.resource)?.name
                  }}</q-tooltip>
                </span>
              </div>
            </div>
          </template>
        </q-calendar-scheduler>
      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { useReservationStore } from 'src/stores/reservation';
import { onMounted, ref } from 'vue';
import { useAuthStore } from 'src/stores/auth';

const reservationStore = useReservationStore();
import { getDate, today } from '@quasar/quasar-ui-qcalendar';
import { QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
import { Timestamp } from '@quasar/quasar-ui-qcalendar';
import { Boat, useBoatStore } from 'src/stores/boat';
import NavigationBar from 'src/components/scheduling/NavigationBar.vue';

const selectedDate = ref(today());
const boatStore = useBoatStore();
const calendar = ref();

interface DayScope {
  timestamp: Timestamp;
  columnIndex: number;
  resource: object;
  resourceIndex: number;
  indentLevel: number;
  activeDate: boolean;
  droppable: boolean;
}

onMounted(() => boatStore.fetchBoats());
// Method declarations

// function slotStyle(
//   event: Reservation,
//   timeStartPos: (time: TimestampOrNull) => string,
//   timeDurationHeight: (minutes: number) => string
// ) {
//   const s = {
//     top: '',
//     height: '',
//     'align-items': 'flex-start',
//   };
//   if (timeStartPos && timeDurationHeight) {
//     s.top = timeStartPos(parsed(event.start)) + 'px';
//     s.height =
//       timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
//       'px';
//   }
//   return s;
// }

function boatReservationEvents({ timestamp, resource }: DayScope) {
  return reservationStore.getReservationsByDate(
    getDate(timestamp),
    (resource as Boat).$id
  );
}
function onMoved(data: Event) {
  console.log('onMoved', data);
}
function onChange(data: Event) {
  console.log('onChange', data);
}
function onClickDate(data: Event) {
  console.log('onClickDate', data);
}
function onClickTime(data: Event) {
  console.log('onClickTime', data);
}
function onClickInterval(data: Event) {
  console.log('onClickInterval', data);
}
function onClickHeadDay(data: Event) {
  console.log('onClickHeadDay', data);
}
function onToday() {
  calendar.value.moveToToday();
}
function onPrev() {
  calendar.value.prev();
}
function onNext() {
  calendar.value.next();
}
</script>

<style lang="sass" scoped>

.booking-event
  position: absolute
  font-size: 12px
  justify-content: space-evenly
  margin: 0 1px
  text-overflow: ellipsis
  overflow: hidden
  color: white
  max-width: 100%
  background: #027BE3FF
  cursor: pointer

.title
  position: relative
  display: flex
  justify-content: center
  align-items: center
  height: 100%
</style>
