<template>
    <input ref="input" type="hidden" :name="name" :value="value"/>
    <div class="">
        <template v-for="group, index in menu" :key="index">
            <div class="button-group d-inline-block mr-3">
                <template v-for="info, index in group" :key="index">
                    <button type="button" class="button square smaller" :title="info.label" @click="edit(info.action, ...(info.args || []))">
                        <span class="icon"><i :class="info.icon"/></span>
                    </button>
                </template>
            </div>
        </template>
        <div class="button-group d-inline-block">
            <div class="dropdown is-hoverable">
                <div class="dropdown-trigger">
                    <button type="button" class="button square smaller">
                        <span class="icon"><i class="fa fa-link"/></span>
                    </button>
                </div>
                <div class="dropdown-menu" style="min-width: 20rem; margin-top: -0.2rem;">
                    <div class="dropdown-content p-3">
                        <div class="field">
                            <label class="label">Lien</label>
                            <div class="control">
                                <input ref="link-url" type="text" class="input" placeholder="lien"/>
                            </div>
                        </div>
                        <div class="has-text-right">
                            <button type="button" class="button secondary"
                                @click="edit('setLink', {href:$refs['link-url'].value})">
                                Ajouter le lien
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="button square smaller" title="Remove link" @click="edit('unsetLink')">
                <span class="icon"><i class="fa fa-link-slash"/></span>
            </button>
        </div>
    </div>
    <editor-content class="editor" v-if="editor" :editor="editor" />
</template>
<style>
.editor .tiptap {
    border: 1px black solid;
    padding: 0.3em;
}
.editor .tiptap ul, .editor .tiptap ol {
    margin-left: 1.3em;
}

.editor .tiptap ul { list-style: disc }
</style>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import Link from '@tiptap/extension-link'

export default {
    components: {EditorContent},
    props: {
        config: {type: Object, default: (() => {})},
        //! Input field name.
        name: String,
        //! Initial input value
        initial: String,
    },

    data() {
        return {
            editor: null,
            menu: [
                [
                    {label: "Bold", icon: "fa fa-bold", action: "toggleBold" },
                    {label: "Italic", icon: "fa fa-italic", action: "toggleItalic" },
                    {label: "Underline", icon: "fa fa-underline", action: "toggleUnderline" },
                    {label: "Strike", icon: "fa fa-strikethrough", action: "toggleStrike" },
                ],[
                    {label: "List", icon: "fa fa-list", action: "toggleBulletList" },
                    {label: "Ordered List", icon: "fa fa-list-ol", action: "toggleOrderedList" },
                ],[
                    {label: "Heading 1", icon: "fa fa-h", action: "setHeading", args: [{level:3}] },
                    {label: "Heading 2", icon: "fa fa-h smaller", action: "toggleHeading", args: [{level:4}] },
                    // {label: "Heading 3", icon: "fa fa-h small", action: "toggleHeading", args: [{level:5}] },
                ],
            ]
        }
    },

    computed: {
        value() { return this.editor && this.editor.getHTML() },
    },

    methods: {
        chain(action, ...args) {
            let chain = this.editor.chain().focus()
            return chain[action](...args)
        },

        edit(action, ...args) {
            this.chain(action, ...args).run()
        },

        setLink() {
            this.edit("setLink", {href: this.$refs['link-url']})
        },
    },

    mounted() {
        this.editor = new Editor({
          content: this.initial || "",
          injectCss: false,
          extensions: [
            StarterKit.configure({
                heading: {
                    levels: [3, 4, 5]
                }
            }),
            Underline,
            Link.configure({autolink: true}),
          ],
        })
    },


    beforeUnmount() {
        this.editor.destroy()
    },
}
</script>
