<template>
    <medium-editor v-model="html"
                   :buttons="buttons"
                   :schema="schema"
                   :json="json"></medium-editor>
</template>

<script>
import loc from './paragraph.resx';
import Paragraph from './Paragraph';
import { i18n } from "../../../../localization/vue-i18n";
var d = new Paragraph();
export default {
    i18n: i18n(loc),
    props: {
        /**
         * object of type {
         *  text: ''
         * }
         */
        value: {
            type: Object,
            default() {
                return d.getEmptyData();
            }
        },
        config: {
            type: Object,
            default() {
                return d.getEmptyConfig();
            }
        },
    },
    data() {
        return {
            html: this.value.text,
            buttons: [
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'subscript',
                'superscript',
                'anchor',
                'quote',
                'pre',
                'orderedlist',
                'unorderedlist',
                'removeFormat',
                'highlight',
                'h1',
                'h2',
                'h3',
            ],
            schema: '{}',
            json: '',
        };
    },
    created() {
        this.updateSchemaAndJson(this.config.schema, this.config.json);
    },
    methods: {
        updateSchemaAndJson(schema, json) {
            this.schema = schema;
            this.json = json;
        }
    },
    watch: {
        'value.text': {
            handler() {
                if (this.value.text !== this.html) {
                    this.html = this.value.text;
                }
            },
            deep: true
        },
        html() {
            if (this.value.text !== this.html) {
                this.$emit('input', {
                    text: this.html
                });
            }
        },
        config: {
            handler() {
                if (window.debug_blockEditor) {
                    console.log('block-paragraph:watch:config', this.config);
                }
                this.updateSchemaAndJson(this.config.schema, this.config.json);
            },
            deep: true
        }
    }
}
</script>