<template>
  <div class="fit row wrap justify-start items-start content-start">
    <div class="q-pa-md">
      <div class="scheduler" style="max-width: 1200px">
        <NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
        <q-calendar-scheduler
          ref="calendar"
          v-model="selectedDate"
          v-model:model-resources="boats"
          resource-key="$id"
          resource-label="name"
          view="week"
          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
          animated
          bordered
          :drag-enter-func="onDragEnter"
          :drag-over-func="onDragOver"
          :drag-leave-func="onDragLeave"
          :drop-func="onDrop"
          day-min-height="50px"
          cell-width="150px"
        >
          <template #day="{ scope }">
            <div
              v-if="filteredIntervals(scope.timestamp, scope.resource).length"
              style="
                display: flex;
                flex-wrap: wrap;
                justify-content: space-evenly;
                align-items: center;
                font-size: 12px;
              "
            >
              <template
                v-for="block in sortedIntervals(
                  scope.timestamp,
                  scope.resource
                )"
                :key="block.id"
              >
                <q-chip class="cursor-pointer">
                  {{ date.formatDate(block.start, 'HH:mm') }} -
                  {{ date.formatDate(block.end, 'HH:mm') }}
                  <!-- <q-popup-edit
                    :model-value="block"
                    v-slot="scope"
                    buttons
                    @save="saveInterval"
                  >
                    TODO: Why isn't this saving?
                    <q-input
                      :model-value="date.formatDate(scope.value.start, 'HH:mm')"
                      dense
                      autofocus
                      type="time"
                      label="start"
                      @keyup.enter="scope.set"
                      @update:model-value="
                        (t) => {
                          block.start = new Date(
                            scope.value.start.split('T')[0] + 'T' + t
                          ).toISOString();
                        }
                      "
                    />
                    TODO: Clean this up
                    <q-input
                      :model-value="date.formatDate(scope.value.end, 'HH:mm')"
                      dense
                      type="time"
                      label="end"
                      @keyup.enter="scope.set"
                      @update:model-value="
                        (t) =>
                          (block.end = new Date(
                            scope.value.end.split('T')[0] + 'T' + t
                          ).toISOString())
                      "
                    />
                  </q-popup-edit>--> </q-chip
                ><q-btn
                  size="xs"
                  icon="delete"
                  round
                  @click="deleteBlock(block)"
                />
              </template>
            </div>
          </template>
        </q-calendar-scheduler>
      </div>
    </div>
    <div class="q-pa-md" style="width: 400px">
      <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-card-actions align="right">
          <q-btn label="Add Template" color="primary" @click="createTemplate" />
        </q-card-actions>
        <q-item v-if="newTemplate.$id === 'unsaved'"
          ><IntervalTemplateComponent
            :model-value="newTemplate"
            :edit="true"
            @cancel="resetNewTemplate"
            @saved="resetNewTemplate"
        /></q-item>
        <q-separator spaced />
        <IntervalTemplateComponent
          v-for="template in intervalTemplates"
          :key="template.$id"
          :model-value="template"
        />
      </q-list>
    </div>
  </div>
  <q-dialog v-model="alert">
    <q-card>
      <q-card-section>
        <div class="text-h6">Warning!</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        Conflicting times! Please delete overlapped items!
        <q-chip v-for="item in overlapped" :key="item.index"
          >{{ boats.find((b) => b.$id === item.boatId)?.name }}:
          {{ date.formatDate(item.start, 'hh:mm') }} -
          {{ date.formatDate(item.end, 'hh:mm') }}
        </q-chip>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn flat label="OK" color="primary" v-close-popup />
      </q-card-actions> </q-card
  ></q-dialog>
</template>

<script setup lang="ts">
import {
  QCalendarScheduler,
  Timestamp,
  today,
} from '@quasar/quasar-ui-qcalendar';
import { Boat, useBoatStore } from 'src/stores/boat';
import { useScheduleStore } from 'src/stores/schedule';
import { onMounted, ref } from 'vue';
import type {
  Interval,
  IntervalTemplate,
  TimeTuple,
} from 'src/stores/schedule.types';
import { date } from 'quasar';
import IntervalTemplateComponent from 'src/components/scheduling/IntervalTemplateComponent.vue';
import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
import { storeToRefs } from 'pinia';
import { buildInterval, intervalsOverlapped } from 'src/utils/schedule';

const selectedDate = ref(today());
const { fetchBoats } = useBoatStore();
const scheduleStore = useScheduleStore();
const { boats } = storeToRefs(useBoatStore());
const intervalTemplates = scheduleStore.getIntervalTemplates();
const calendar = ref();
const overlapped = ref();
const alert = ref(false);
const newTemplate = ref<IntervalTemplate>({
  $id: '',
  name: 'NewTemplate',
  timeTuples: [['09:00', '12:00']],
});

/* TODOS:
 * Need more validation:
   - Interval start < end
   - Intervals don't overlap
 * Need to handle case of overnight blocks.
*/

onMounted(async () => {
  await fetchBoats();
  await scheduleStore.fetchIntervalTemplates();
});

const filteredIntervals = (date: Timestamp, boat: Boat) => {
  return scheduleStore.getIntervals(date, boat);
};

const sortedIntervals = (date: Timestamp, boat: Boat) => {
  return filteredIntervals(date, boat).sort(
    (a, b) => Date.parse(a.start) - Date.parse(b.start)
  );
};

function resetNewTemplate() {
  newTemplate.value = {
    $id: 'unsaved',
    name: 'NewTemplate',
    timeTuples: [['09:00', '12:00']],
  };
}
function createTemplate() {
  newTemplate.value.$id = 'unsaved';
}
function createIntervals(boat: Boat, templateId: string, date: string) {
  const intervals = intervalsFromTemplate(boat, templateId, date);
  intervals.forEach((interval) => scheduleStore.createInterval(interval));
}

function getIntervals(date: Timestamp, boat: Boat) {
  return scheduleStore.getIntervals(date, boat);
}

function intervalsFromTemplate(
  boat: Boat,
  templateId: string,
  date: string
): Interval[] {
  const template = scheduleStore
    .getIntervalTemplates()
    .value.find((t) => t.$id === templateId);
  return template
    ? template.timeTuples.map((timeTuple: TimeTuple) =>
        buildInterval(boat, timeTuple, date)
      )
    : [];
}

function deleteBlock(block: Interval) {
  if (block.$id) {
    scheduleStore.deleteInterval(block.$id);
  }
}

function onDragEnter(e: DragEvent, type: string) {
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
    if (
      e.target instanceof HTMLDivElement &&
      (e.target.classList.contains('q-calendar-scheduler__head--day') ||
        e.target.classList.contains('q-calendar-scheduler__day'))
    )
      e.target.classList.add('bg-secondary');
  }
}

function onDragOver(e: DragEvent, type: string) {
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
  }
}

function onDragLeave(e: DragEvent, type: string) {
  if (type === 'day' || type === 'head-day') {
    e.preventDefault();
    if (
      e.target instanceof HTMLDivElement &&
      (e.target.classList.contains('q-calendar-scheduler__head--day') ||
        e.target.classList.contains('q-calendar-scheduler__day'))
    )
      e.target.classList.remove('bg-secondary');
  }
}

function onDrop(
  //TODO: Move all overlap checking to the store.  This is too messy right now.
  e: DragEvent,
  type: string,
  scope: { resource: Boat; timestamp: Timestamp }
) {
  if (e.target instanceof HTMLDivElement)
    e.target.classList.remove('bg-secondary');

  if ((type === 'day' || type === 'head-day') && e.dataTransfer) {
    const templateId = e.dataTransfer.getData('ID');
    const date = scope.timestamp.date;
    const resource = scope.resource;
    const existingIntervals = getIntervals(scope.timestamp, resource);
    const boatsToApply = type === 'head-day' ? boats.value : [resource];
    overlapped.value = boatsToApply
      .map((boat) =>
        intervalsOverlapped(
          existingIntervals.concat(
            intervalsFromTemplate(boat, templateId, date)
          )
        )
      )
      .flat(1);
    if (overlapped.value.length === 0) {
      boatsToApply.map((b) => createIntervals(b, templateId, date));
    } else {
      alert.value = true;
    }
  }
  if (e.target instanceof HTMLDivElement)
    e.target.classList.remove('bg-secondary');
  return false;
}

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