<template>
  <q-expansion-item
    expand-icon-toggle
    draggable="true"
    @dragstart="onDragStart($event, template)"
    v-model="expanded">
    <template v-slot:header>
      <q-item-section>
        <q-input
          label="Template name"
          :borderless="!edit"
          dense
          v-model="template.name"
          v-if="edit" />
        <q-item-label
          v-if="!edit"
          class="cursor-pointer">
          {{ template.name }}
        </q-item-label>
      </q-item-section>
    </template>
    <q-card flat>
      <q-card-section horizontal>
        <q-card-section class="q-pt-xs">
          <q-list dense>
            <q-item
              v-for="(item, index) in template.timeTuples"
              :key="item[0]">
              <q-input
                class="q-mx-sm"
                dense
                v-model="item[0]"
                type="time"
                label="Start"
                :borderless="!edit"
                :readonly="!edit" />
              <q-input
                class="q-mx-sm"
                dense
                v-model="item[1]"
                type="time"
                label="End"
                :borderless="!edit"
                :readonly="!edit">
                <template v-slot:after>
                  <q-btn
                    v-if="edit"
                    round
                    dense
                    flat
                    icon="delete"
                    @click="template.timeTuples.splice(index, 1)" />
                </template>
              </q-input>
            </q-item>
          </q-list>
          <q-btn
            v-if="edit"
            dense
            color="primary"
            size="sm"
            label="Add interval"
            @click="template.timeTuples.push(['00:00', '00:00'])" />
        </q-card-section>
        <q-card-actions vertical>
          <q-btn
            v-if="!edit"
            color="primary"
            icon="edit"
            label="Edit"
            @click="toggleEdit" />
          <q-btn
            v-if="edit"
            color="primary"
            icon="save"
            label="Save"
            @click="saveTemplate($event, template)" />
          <q-btn
            v-if="edit"
            color="secondary"
            icon="cancel"
            label="Cancel"
            @click="revert" />
          <q-btn
            color="negative"
            icon="delete"
            label="Delete"
            v-if="template.$id !== ''"
            @click="deleteTemplate($event, template)" />
        </q-card-actions>
      </q-card-section>
    </q-card>
  </q-expansion-item>
  <q-dialog v-model="alert">
    <q-card>
      <q-card-section>
        <div class="text-h6">Overlapped blocks!</div>
      </q-card-section>
      <q-card-section class="q-pt-none">
        <q-chip
          square
          icon="schedule"
          v-for="item in overlapped"
          :key="item.start">
          {{ item.start }}-{{ item.end }}
        </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 { useIntervalTemplateStore } from 'src/stores/intervalTemplate';
import { IntervalTemplate } from 'src/stores/schedule.types';
import { copyIntervalTemplate, timeTuplesOverlapped } from 'src/utils/schedule';
import { ref } from 'vue';
const alert = ref(false);
const overlapped = ref();
const intervalTemplateStore = useIntervalTemplateStore();
const props = defineProps<{ edit?: boolean; modelValue: IntervalTemplate }>();
const edit = ref(props.edit);
const expanded = ref(props.edit);
const template = ref(copyIntervalTemplate(props.modelValue));

const emit = defineEmits<{ (e: 'cancel'): void; (e: 'saved'): void }>();

const revert = () => {
  template.value = copyIntervalTemplate(props.modelValue);
  edit.value = false;
  emit('cancel');
};

const toggleEdit = () => {
  edit.value = !edit.value;
};

const deleteTemplate = (
  event: Event,
  template: IntervalTemplate | undefined
) => {
  if (template?.$id) intervalTemplateStore.deleteIntervalTemplate(template.$id);
};

function onDragStart(e: DragEvent, template: IntervalTemplate) {
  if (e.dataTransfer) {
    e.dataTransfer.dropEffect = 'copy';
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('ID', template.$id || '');
  }
}
const saveTemplate = (evt: Event, template: IntervalTemplate | undefined) => {
  if (!template) return false;
  overlapped.value = timeTuplesOverlapped(template.timeTuples);
  if (overlapped.value.length > 0) {
    alert.value = true;
  } else {
    edit.value = false;
    if (template.$id && template.$id !== 'unsaved') {
      intervalTemplateStore.updateIntervalTemplate(template, template.$id);
    } else {
      intervalTemplateStore.createIntervalTemplate(template);
      emit('saved');
    }
  }
};
</script>
