<template>
  <div class="html-editor-container" v-if="editor">
    <editor-menu-bar :editor="editor">
      <div slot-scope="{ commands, isActive }" class="btn-group">
        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.bold() }"
          @click="commands.bold"
          href="javascript:;"
        >
          <icon name="format-bold" />
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.italic() }"
          @click="commands.italic"
          href="javascript:;"
        >
          <icon name="format-italic" />
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.underline() }"
          @click="commands.underline"
          href="javascript:;"
        >
          <icon name="format-underline" />
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.paragraph() }"
          @click="commands.paragraph"
          href="javascript:;"
        >
          <icon name="format-paragraph" />
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.heading({ level: 1 }) }"
          @click="commands.heading({ level: 1 })"
          href="javascript:;"
        >
          H1
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.heading({ level: 2 }) }"
          @click="commands.heading({ level: 2 })"
          href="javascript:;"
        >
          H2
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.heading({ level: 3 }) }"
          @click="commands.heading({ level: 3 })"
          href="javascript:;"
        >
          H3
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.bullet_list() }"
          @click="commands.bullet_list"
          href="javascript:;"
        >
          <icon name="format-list-bulleted" />
        </a>

        <a
          class="btn btn-sm btn-secondary"
          :class="{ 'is-active': isActive.ordered_list() }"
          @click="commands.ordered_list"
          href="javascript:;"
        >
          <icon name="format-list-numbers" />
        </a>

        <a
          class="btn btn-sm btn-secondary"
          @click="showImagePrompt(commands.image)"
          href="javascript:;"
        >
          <icon name="file-image" />
        </a>

      </div>
    </editor-menu-bar>

    <div class="editor-container">
      <editor-content :editor="editor" />
    </div>
  </div>
</template>

<script>
  import Icon from '../../components/Icon.vue'
  import { 
    Editor, 
    EditorContent,
    EditorMenuBar,
  } from 'tiptap'

  import {
    Blockquote,
    CodeBlock,
    HardBreak,
    Heading,
    HorizontalRule,
    OrderedList,
    BulletList,
    ListItem,
    Bold,
    Code,
    Italic,
    Link,
    TodoItem,
    TodoList,
    Strike,
    Image,
    Underline,
    History,
  } from 'tiptap-extensions'

  export default {
    props: [ 'value' ],

    components: {
      EditorContent,
      EditorMenuBar,
      Icon,
    },

    data () {
      return {
        document: '',
        editor: false,
      }
    },

    methods: {
      showImagePrompt(command) {
        const src = prompt('Enter the url of your image here')
        if (src !== null) {
          command({ src })
        }
      },
    },

    created () {
      const vm = this

      vm.editor = new Editor({
        extensions: [
          new Blockquote(),
          new BulletList(),
          new HardBreak(),
          new Heading({ levels: [1, 2, 3] }),
          new ListItem(),
          new OrderedList(),
          new TodoItem({
            nested: true,
          }),
          new TodoList(),
          new Bold(),
          new Italic(),
          new Strike(),
          new Underline(),
          new History(),
          new Image(),
        ],
        content: vm.document,
        onUpdate: ({getHTML}) => {
          let content = getHTML()
          vm.document = content
          this.$emit('input', vm.document)
        }
      })
    },

    mounted () {
      const vm = this
      if (vm.value) {
        vm.document = vm.value
        vm.editor.setContent(vm.document)
      }
    },

    beforeDestroy() {
      const vm = this
    }
  }
</script>

<style lang="scss">
</style>
