<template>
  <div class="quill-editor">
    <slot name="toolbar"></slot>
    <div ref="editor"></div>
  </div>
</template>

<script>
import defaultOptions from './options'
import {loadQuill, loadQuillStyle} from '@uif/admin/lib/utils/load'
import {assign} from '@uif/hq/lib/utils/object'

export default {
  name: 'u-editor',
  props: {
    content: String,
    value: String,
    disabled: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      required: false,
      default: () => ({})
    },
    uploadImg: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      currentOptions: {},
      currentContent: '',
      defaultOptions
    }
  },
  watch: {
    // Watch content change
    content (newVal, oldVal) {
      if (this.quill) {
        if (newVal && newVal !== this.currentContent) {
          this.currentContent = newVal
          this.quill.pasteHTML(newVal)
        } else if (!newVal) {
          this.quill.setText('')
        }
      }
    },
    // Watch content change
    value (newVal, oldVal) {
      if (this.quill) {
        if (newVal && newVal !== this.currentContent) {
          this.currentContent = newVal
          this.quill.pasteHTML(newVal)
        } else if (!newVal) {
          this.quill.setText('')
        }
      }
    },
    // Watch disabled change
    disabled (newVal, oldVal) {
      if (this.quill) {
        this.quill.enable(!newVal)
      }
    }
  },
  created () {
    loadQuillStyle()
    loadQuill()
  },
  mounted () {
    this.initialize()
  },
  beforeDestroy () {
    this.quill = null
    delete this.quill
  },
  methods: {
    // Init Quill instance
    initialize () {
      loadQuill().then(Quill => {
        // Options
        this.currentOptions = assign({}, this.defaultOptions, this.options)
        // Instance
        this.quill = new Quill(this.$refs.editor, this.currentOptions)
        this.quill.enable(false)
        // Set editor content
        if (this.value || this.content) {
          this.quill.pasteHTML(this.value || this.content)
        }
        // Disabled editor
        if (!this.disabled) {
          this.quill.enable(true)
        }
        if (this.uploadImg instanceof Function) {
          this.quill.getModule('toolbar').addHandler('image', () => {
            this.uploadImg(this.quill)
          })
        }
        // Mark model as touched if editor lost focus
        this.quill.on('selection-change', range => {
          if (!range) {
            this.$emit('blur', this.quill)
          } else {
            this.$emit('focus', this.quill)
          }
        })
        // Update model if text changes
        this.quill.on('text-change', (delta, oldDelta, source) => {
          let html = this.$refs.editor.children[0].innerHTML
          const quill = this.quill
          const text = this.quill.getText()
          if (html === '<p><br></p>') html = ''
          this.currentContent = html
          this.$emit('input', this.currentContent)
          this.$emit('change', { html, text, quill })
        })
        // Emit ready event
        this.$emit('ready', this.quill)
      })
    }
  }
}
</script>
