<script setup lang="ts">
import { useReservationStore } from '~/stores/reservation';
import { ref } from 'vue';
import { useAuthStore } from '~/stores/auth';
import type { Timestamp } from '@quasar/quasar-ui-qcalendar';
import { getDate, QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
import type { Boat } from '~/utils/boat.types';
import NavigationBar from '~/components/scheduling/NavigationBar.vue';
import { useQuasar } from 'quasar';
import { formatTime } from '~/utils/schedule';
import { useIntervalStore } from '~/stores/interval';
import type { Interval, Reservation } from '~/utils/schedule.types';
import { storeToRefs } from 'pinia';

const reservationStore = useReservationStore();
const boatStore = useBoatStore();
const calendar = ref();
const $q = useQuasar();
const { getAvailableIntervals } = useIntervalStore();
const { selectedDate } = storeToRefs(useIntervalStore());
const currentUser = useAuthStore().currentUser;

const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
  return getAvailableIntervals(timestamp, boat)
    .value.concat(boatReservationEvents(timestamp, boat))
    .sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
};

const createReservationFromInterval = (interval: Interval | Reservation) => {
  if (interval.user) {
    if (interval.user === currentUser?.$id) {
      navigateTo(`/schedule/edit/${interval.$id}`);
    } else {
      return false;
    }
  } else {
    navigateTo({ path: '/schedule/book', query: { interval: interval.$id } });
  }
};

function handleSwipe({ ...event }: { direction: string }) {
  if (event.direction === 'right') {
    calendar.value?.prev();
  } else {
    calendar.value?.next();
  }
}

const boatReservationEvents = (
  timestamp: Timestamp,
  resource: Boat | undefined
): Reservation[] => {
  if (!resource) return [] as Reservation[];
  return reservationStore.getReservationsByDate(
    getDate(timestamp),
    (resource as Boat).$id
  ).value;
};

function onToday() { calendar.value.moveToToday(); }
function onPrev() { calendar.value.prev(); }
function onNext() { calendar.value.next(); }
</script>

<template>
  <q-page>
    <div class="col">
      <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
    </div>
    <div class="col q-ma-sm">
      <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="$q.screen.gt.md ? 'week' : 'day'"
        v-touch-swipe.mouse.left.right="handleSwipe"
        :max-days="$q.screen.lt.sm ? 3 : 7"
        animated
        bordered
        style="--calendar-resources-width: 40px">
        <template #day="{ scope }">
          <div
            v-for="interval in getSortedIntervals(scope.timestamp, scope.resource)"
            :key="interval.$id"
            class="q-pb-xs row"
            @click="createReservationFromInterval(interval)">
            <q-badge
              multi-line
              :class="!interval.user ? 'cursor-pointer' : null"
              class="col-12 q-pa-sm"
              :transparent="interval.user != undefined"
              :color="interval.user ? 'secondary' : 'primary'"
              :outline="!interval.user"
              :id="interval.$id">
              {{
                interval.user
                  ? useAuthStore().getUserNameById(interval.user)
                  : 'Available'
              }}
              <br />
              {{ formatTime(interval.start) }} to
              <br />
              {{ formatTime(interval.end) }}
            </q-badge>
          </div>
        </template>
      </q-calendar-scheduler>
    </div>
  </q-page>
</template>

<style lang="sass">
.q-calendar-scheduler__resource
  background-color: $primary
  color: white
  font-weight: bold
</style>
