<template>
    <div :class="[$style.quill, {'quill--mini': mini}, {[$style.mini]: mini}]" @click.stop="() => {}">
        <toolbar
            v-if="ready"
            ref="toolbar"
            :visible.sync="active"
            :class="$style.toolbar"
            :mini="mini"
            :quill="quill" />
        <div
            ref="textarea"
            class="notranslate quill-text"
            :class="$style.textarea"
            @click="onTextAreaClick">
        </div>
    </div>
</template>

<script>
import shortid from 'shortid';
import debounce from 'lodash.debounce';
import generatePaletteClasses from './generatePaletteClasses.js';
import Toolbar from './components/Toolbar/Toolbar.vue';
// import tinycolor from 'tinycolor2';
import { Helper as QuillStore } from './store/index.js';
import Quill from './quill.js';
export default {
    components: { Toolbar },

    props: {
        contents: Object,
        mini: Boolean,
    },

    data() {
        return {
            uid: shortid.generate(),
            active: false,
            ready: false,
        };
    },

    computed: {
        ...QuillStore.mapState({
            palette: (state) => state.palette,
        }),
    },

    watch: {
        contents(v) {
            this.quill.setContents(v);
        },
    },

    created() {
        if (process.browser) {
            generatePaletteClasses(this.palette);
        }
    },

    mounted() {
        // init Quill
        // const { Quill } = initialize();

        const emojiIcon = `<svg class="icon ${this.$style.emoji}" viewBox="0 0 360 360">
        <use href="#quill-emoji"></use></svg>`;

        this.quill = new Quill(this.$refs.textarea, {
            modules: {
                'emoji-textarea': {
                    buttonIcon: emojiIcon,
                },
                'emoji-shortname': true,
            },
        });

        if (this.contents) {
            this.quill.setContents(this.contents);
        }

        const onTextChange = debounce(this.onTextChange, 500);
        this.quill.on('text-change', onTextChange);

        document.body.addEventListener('click', this.close);
        document.body.addEventListener('quill-focus', (e) => {
            if (e.detail.id !== this.uid) {
                this.close();
            }
        });
        this.$once('hook:beforeDestroy', () => {
            document.body.removeEventListener('click', this.close);
        });

        this.ready = true;
    },

    methods: {
        open() {
            this.active = true;
        },

        close() {
            this.active = false;
        },

        onTextAreaClick() {
            this.$el.dispatchEvent(
                new CustomEvent('quill-focus', {
                    bubbles: true,
                    detail: {
                        id: this.uid,
                    },
                }),
            );
        },

        onTextChange() {
            this.quill.update();
            this.$emit('change', this.quill.getContents());
        },
    },
};
</script>

<style module src="./Quill.css"></style>

<style>

</style>
