<template>
  <div class="fit row wrap justify-start items-start content-start">
    <div class="col-9 q-pa-md">
      <div class="scheduler">
        <q-calendar-scheduler
          ref="calendar"
          v-model="selectedDate"
          v-model:model-resources="resources"
          view="week"
          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
          hoverable
          animated
          bordered
          :day-min-height="50"
          :day-height="0"
        ></q-calendar-scheduler>
      </div>
    </div>
    <div class="col-3 q-pa-md">
      <q-list padding bordered class="rounded-borders">
        <q-item>
          <q-item-section>
            <q-item-label overline>Availability Templates</q-item-label>
            <q-item-label caption
              >Drag and drop a template to a boat / date to create booking
              availability</q-item-label
            >
          </q-item-section>
        </q-item>
        <q-separator spaced />
        <q-expansion-item
          v-for="template in timeblockTemplates"
          :key="template.$id"
          dense
          dense-toggle
          expand-separator
          :label="template.name"
          style="font-size: 0.8em"
          draggable="true"
        >
          <q-card>
            <q-card-section>
              <q-badge v-for="item in template.timeTuple" :key="item.$id">
                {{ item[0] }} - {{ item[1] }}
              </q-badge>
            </q-card-section>
          </q-card>
        </q-expansion-item></q-list
      >
    </div>
  </div>
</template>

<script setup type="ts">
import {QCalendarScheduler, today} from '@quasar/quasar-ui-qcalendar'
import { useBoatStore } from 'src/stores/boat';
import { useScheduleStore } from 'src/stores/schedule';
import { onMounted, ref } from 'vue';

const selectedDate = ref(today())
const scheduleStore = useScheduleStore()
const boatStore = useBoatStore()
const resources = boatStore.boats
const timeblockTemplates = scheduleStore.timeblockTemplates
onMounted(async() => {
  await boatStore.fetchBoats();
  await scheduleStore.fetchTimeBlockTemplates();
  await scheduleStore.fetchTimeBlockTemplates()})
</script>
