<template>
    <div :id="id"></div>
</template>

<script>
import HighlightExtension from './highlight-button/Highlight';
import JsonVarExtension from './jsonvar-button/JsonVar';
import { isVoid } from "../util";
import isEmpty from 'lodash.isempty';
import isString from 'lodash.isstring';
import { guid } from "libj-core";
export default {
    props: {
        value: {
            type: String,
            default: ''
        },
        buttons: {
            type: Array,
            default() {
                return [
                    'bold',
                    'italic',
                    'underline',
                    'strikethrough',
                    'subscript',
                    'superscript',
                    'anchor',
                    'quote',
                    'pre',
                    'orderedlist',
                    'unorderedlist',
                    //'justifyLeft',
                    //'justifyCenter',
                    //'justifyRight',
                    //'justifyFull',
                    'h1',
                    'h2',
                    'h3',
                    'h4',
                    'h5',
                    'h6',
                    'removeFormat',
                    'html',
                    'highlight',
                ];
            }
        },
        schema: {
            type: String,
            default: '{}'
        },
        json: {
            type: String,
            default: ''
        },
    },
    data() {
        var id = guid.newId();
        return {
            id: id,
            selector: `#${id}`,
            editor: null
        };
    },
    mounted() {
        this.$nextTick(this.init);
    },
    destroyed() {
        this.$nextTick(this.destroy);
    },
    methods: {
        init() {
            if (!isVoid(this.editor)) {
                return false;
            }
            this.editor = new MediumEditor(this.selector, {
                delay: 1000,
                targetBlank: true,
                toolbar: {
                    buttons: this.getButtons(),
                    diffLeft: 25,
                    diffTop: 10,
                },
                anchor: {
                    placeholderText: 'Type a link',
                    customClassOption: 'btn',
                    customClassOptionText: 'Create Button'
                },
                paste: {
                    cleanPastedHTML: true,
                    cleanAttrs: ['style', 'dir'],
                    cleanTags: ['label', 'meta'],
                    unwrapTags: ['sub', 'sup']
                },
                anchorPreview: {
                    hideDelay: 300
                },
                placeholder: {
                    text: 'Click to edit'
                },
                extensions: this.getExtensions()
            });
            this.editor.subscribe('editableInput', (event, editable) => {
                //change
                this.raiseChange();
            });
            this.setHtml(this.value);
            this.setSchemaAndJson();
            return true;
        },
        destroy() {
            if (isVoid(this.editor)) {
                return false;
            }
            this.editor.destroy();
            this.editor = null;
            return true;
        },
        raiseChange() {
            var html = this.getHtml();
            if (html === this.value) {
                return;
            }
            this.$emit('input', html);
        },
        getHtml() {
            return this.editor.getContent(0);
        },
        setHtml(html) {
            this.editor.setContent(html, 0);
        },
        hasJsonVar() {
            return !isEmpty(this.schema) && !isString(this.json);
        },
        getButtons() {
            var buttons = this.buttons;
            buttons.push('jsonvar');
            return buttons;
        },
        getExtensions() {
            var Highlight = HighlightExtension();
            var JsonVar = JsonVarExtension();
            var extensions = {
                'highlight': new Highlight(),
                'jsonvar': new JsonVar({
                    schema: this.schema,
                    json: this.json
                })
            };
            return extensions;
        },
        setSchemaAndJson() {
            if (window.debug_blockEditor) {
                console.log('medium-editor:setSchemaAndJson', this.schema, this.json);
            }
            var jsonvarExt = this.editor.getExtensionByName('jsonvar');
            jsonvarExt.setSchemaAndJson(this.schema, this.json);
        }
    },
    watch: {
        value() {
            if (this.getHtml() !== this.value) {
                this.setHtml(this.value);
            }
        },
        schema: {
            handler() {
                if (window.debug_blockEditor) {
                    console.log('medium-editor:watch:schema', this.schema);
                }
                this.setSchemaAndJson();
            },
            deep: true
        },
        json() {
            if (window.debug_blockEditor) {
                console.log('medium-editor:watch:json', this.json);
            }
            this.setSchemaAndJson();
        }
    }
}
</script>