<template>
  <div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
    <div>
      <label for="title">Einsatztitel</label>
      <input type="text" id="title" v-model="title" />
    </div>
    <div class="flex flex-col sm:flex-row gap-2">
      <ForceSelect title="Einsatzleiter" :available-forces="availableForces" v-model="command" />
      <ForceSelect title="Bericht Ersteller" :available-forces="availableForces" v-model="secretary" />
    </div>
    <div class="flex flex-col sm:flex-row gap-2">
      <div class="grow">
        <label for="start">Einsatzbeginn</label>
        <input type="datetime-local" id="start" v-model="start" />
      </div>
      <div class="grow">
        <label for="end">Einsatzende</label>
        <input type="datetime-local" id="end" v-model="end" :min="start" />
      </div>
      <div class="w-full sm:w-fit min-w-fit">
        <p>Dauer</p>
        <p
          class="rounded-md shadow-sm relative block w-full sm:w-fit px-3 py-2 border border-gray-300 text-gray-900 sm:text-sm"
        >
          <span v-if="duration.days != '00'">{{ duration.days }}d</span> {{ duration.hours }}h {{ duration.minutes }}m
        </p>
      </div>
    </div>
    <div>
      <label for="mission_short">Stichwort</label>
      <input type="text" id="mission_short" v-model="mission_short" />
    </div>
    <div>
      <label for="location">Einsatzort</label>
      <input type="text" id="location" v-model="location" />
    </div>
    <div>
      <label for="others">Weitere Anwesende (andere Wehren, Polizei, Rettungsdienst)</label>
      <input type="text" id="others" v-model="others" />
    </div>
    <div class="flex flex-col sm:flex-row gap-2">
      <div class="w-full">
        <label for="rescued">Anzahl getretteter Personen</label>
        <input type="number" id="rescued" min="0" v-model="rescued" />
      </div>
      <div class="w-full">
        <label for="recovered">Anzahl geborgener Personen</label>
        <input type="number" id="recovered" min="0" v-model="recovered" />
      </div>
    </div>
    <div class="flex flex-col">
      <label for="summary">Einsatzbeschreibung</label>
      <QuillEditor
        id="summary"
        theme="snow"
        style="height: 250px; max-height: 250px; min-height: 250px"
        contentType="html"
        :options="{ modules: moduleOptions }"
        :enable="can('create', 'operation', 'mission')"
        :style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
        @ready="initEditor"
      />
    </div>
    <div class="flex flex-col">
      <p>Eingesetzte Fahrzeuge</p>
    </div>
    <div class="flex flex-col">
      <p>Eingesetztes Material</p>
    </div>
    <div class="flex flex-col">
      <p>Kontaktdaten</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import { useAbilityStore } from "@/stores/ability";
import { Quill, QuillEditor } from "@vueup/vue-quill";
import type QuillCursors from "quill-cursors";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { QuillBinding } from "y-quill";
import { moduleOptions } from "@/helpers/quillConfig";
import ForceSelect from "@/components/admin/ForceSelect.vue";
import { useForceStore } from "@/stores/admin/configuration/force";
import * as Y from "yjs";
import type { Awareness } from "y-protocols/awareness.js";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    document: {
      type: Object as PropType<Y.Doc>,
      required: true,
    },
    awareness: {
      type: Object as PropType<Awareness | undefined>,
      default: undefined,
    },
  },
  data() {
    return {
      binding: undefined as undefined | QuillBinding,
      cursors: undefined as undefined | QuillCursors,
    };
  },
  computed: {
    ...mapState(useAbilityStore, ["can"]),
    ...mapState(useForceStore, ["availableForces"]),
    title: {
      get() {
        return this.document.getMap("form").get("title") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("title", val);
      },
    },
    command: {
      get() {
        return this.document.getMap("form").get("command") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("command", val);
      },
    },
    secretary: {
      get() {
        return this.document.getMap("form").get("secretary") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("secretary", val);
      },
    },
    start: {
      get() {
        return (
          (this.document.getMap("form").get("start") as string) ||
          new Date(new Date().setHours(new Date().getHours() + 1)).toISOString().slice(0, -8)
        );
      },
      set(val: string) {
        this.document.getMap("form").set("start", val);
      },
    },
    end: {
      get() {
        return this.document.getMap("form").get("end") as string;
      },
      set(val: string) {
        this.document.getMap("form").set("end", val);
      },
    },
    duration() {
      const diffInMs = new Date(this.end).getTime() - new Date(this.start).getTime();

      const durationDate = new Date(diffInMs || 0);

      return {
        days: (durationDate.getUTCDate() - 1).toString().padStart(2, "0"),
        hours: durationDate.getUTCHours().toString().padStart(2, "0"),
        minutes: durationDate.getUTCMinutes().toString().padStart(2, "0"),
      };
    },
    mission_short: {
      get() {
        return this.document.getMap("form").get("mission_short");
      },
      set(val: string) {
        this.document.getMap("form").set("mission_short", val);
      },
    },
    location: {
      get() {
        return this.document.getMap("form").get("location");
      },
      set(val: string) {
        this.document.getMap("form").set("location", val);
      },
    },
    others: {
      get() {
        return this.document.getMap("form").get("others");
      },
      set(val: string) {
        this.document.getMap("form").set("others", val);
      },
    },
    rescued: {
      get() {
        return this.document.getMap("form").get("rescued") || 0;
      },
      set(val: number) {
        this.document.getMap("form").set("rescued", val);
      },
    },
    recovered: {
      get() {
        return this.document.getMap("form").get("recovered") || 0;
      },
      set(val: number) {
        this.document.getMap("form").set("recovered", val);
      },
    },
    editor() {
      return this.document.getText("editor");
    },
  },
  beforeUnmount() {
    if (this.binding) {
      this.binding.destroy();
      this.binding = undefined;
    }
  },
  methods: {
    initEditor(quill: Quill) {
      quill.history.clear();
      this.binding = new QuillBinding(this.document.getText("editor"), quill); //this.awareness
      this.cursors = quill.getModule("cursors") as QuillCursors;
    },
  },
});
</script>
