<template>
  <div>
    <div class="flex justify-between">
      <p class="text-sm font-medium text-gray-900">{{ label }}</p>
      <p class="text-sm text-gray-500" v-if="hint">{{ hint }}</p>
    </div>
    <quill-editor
      ref="myQuillEditor"
      :class="`mt-1 rounded-md bg-white ${
        disabled ? 'opacity-50 cursor-not-allowed' : ''
      } text-sm shadow-sm`"
      :value="content"
      :options="editorOption"
      :id="id"
      @change="onChange($event)"
      @ready="onReady($event)"
      @focus="handleFocus"
      @blur="onEditorBlur"
      :disabled="disabled"
    ></quill-editor>
    <p v-if="helpText" class="mt-2 text-sm text-gray-500">
      {{ helpText }}
    </p>
  </div>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  name: "CEditor",
  components: { quillEditor },
  props: {
    id: {
      type: String,
    },
    content: {
      type: String,
    },
    label: {
      type: String,
    },
    hint: {
      type: String,
    },
    helpText: {
      type: String,
    },
    toolbarOptions: {
      type: Array,
    },
    onEditorChange: {
      type: Function,
    },
    placeholder: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onChange(params) {
      this.$emit("onEditorChange", params);
    },
    onReady(params) {
      this.$emit("onEditorReady", params);
    },
    handleFocus() {
      let quill = this.$refs.myQuillEditor.quill;
      if (quill) {
        this.$emit("handleFocus", quill);
      }
    },
    onEditorBlur() {
      this.$emit("onEditorBlur");
    },
  },
  computed: {
    editorOption() {
      return {
        modules: {
          toolbar: {
            container: this.toolbarOptions,
          },
        },
        placeholder: this.placeholder,
      };
    },
  },
};
</script>
<style>
.ql-toolbar.ql-snow {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
}

.ql-container.ql-snow {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  min-height: 5rem;
}

.ql-editor {
  @apply text-sm text-gray-900;
  max-height: 150px;
}
.ql-editor.ql-blank::before {
  @apply not-italic text-gray-500;
}
</style>
