<template>
  <div class="flex flex-col">
    <div class="flex flex-row gap-2 items-center">
      <label :for="title">{{ title }}</label>
      <lottie-player src="/typing_animation.json" class="w-fit h-5" loop autoplay />
    </div>
    <QuillEditor
      :id="title"
      theme="snow"
      style="height: 250px; max-height: 250px; min-height: 250px"
      contentType="html"
      :options="{ modules: moduleOptions }"
      @ready="initEditor"
    />
    <!--
        :enable="can('create', 'operation', 'mission')"
        :style="!can('create', 'operation', 'mission') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
      -->
  </div>
</template>

<script setup lang="ts">
import { defineComponent, type PropType } from "vue";
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 * as Y from "yjs";
import "@lottiefiles/lottie-player";
</script>

<script lang="ts">
export default defineComponent({
  props: {
    text: {
      type: Object as PropType<Y.Text>,
      required: true,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      binding: undefined as undefined | QuillBinding,
      cursors: undefined as undefined | QuillCursors,
    };
  },
  beforeUnmount() {
    if (this.binding) {
      this.binding.destroy();
      this.binding = undefined;
    }
  },
  methods: {
    initEditor(quill: Quill) {
      quill.history.clear();
      this.binding = new QuillBinding(this.text, quill); // TODO: awareness
      this.cursors = quill.getModule("cursors") as QuillCursors;
    },
  },
});
</script>
