<template>
    <div class="quill_2mNOD text_S8lwp g-text-style" ssr="true">
        <div class="notranslate quill-text textarea_3VVtL ql-container ql-disabled">
            <div
                class="ql-editor"
                data-gramm="false"
                contenteditable="false">
                <p
                    ref="text"
                    class="quill-text"
                    v-html="html"></p>
        <!-- eslint-disable-line -->
            </div>
            <div
                class="ql-clipboard"
                contenteditable="true"
                tabindex="-1"></div>
        </div>
    </div>
</template>

<script>
import { QuillDeltaToHtmlConverter } from '@deepvision/quill-delta-to-html';

const renderer = (op) => {
    if (op.insert.type === 'emoji') {
        const val = op.insert.value;

        return `<span data-name=${val.name} 
                    class="emojione"
                    style="background-image: url(https://cdn.adventist.ua/emojione-4.5/png/32/${val.unicode}.png);">
                </span>`;
    }

    return `(${op.insert.type})`;
};

export default {
    props: {
        contents: Object,
    },

    data() {
        let html = '';

        if (this.contents && this.contents.ops) {
            const converter = new QuillDeltaToHtmlConverter(this.contents.ops, {
                inlineClasses: {
                    'palette-color'(value) {
                        return `ql-palette-color-${value}`;
                    },

                    'palette-fill'(value) {
                        return `ql-palette-fill-${value}`;
                    },

                    'palette-link-color'(value) {
                        return `ql-palette-link-color-${value}`;
                    },
                },
            });

            converter.renderCustomWith(renderer);

            html = converter.convert();
        }

        return {
            html,
        };
    },
    computed: {
        paletteWasChanged() {
            return this.$store.state.designer && this.$store.state.designer.paletteWasChanged ?
                this.$store.state.designer.paletteWasChanged : false;
        },
    },

    mounted() {
        if (this.$refs.text) {
            const links = document.querySelectorAll('a[data-scenario]');
            for (const link of links) {
                link.addEventListener('click', (e) => {
                    const { scenario } = e.target.dataset;
                    if (scenario) {
                        this.$store.dispatch('scenarios/START_SCENARIO', scenario);
                    }
                });
            }
        }
    },

    created() {
        if (this.paletteWasChanged) {
            const attributeToElementMap = {
                'palette-link-color': 'quill.link',
                'palette-color': 'quill.text',
                'palette-fill': 'quill.fill',
            };

            const attributeToPaletteNumber = {
                'palette-link-color': '',
                'palette-color': '',
                'palette-fill': '',
            };

            for (const [attribute, element] of Object.entries(
                attributeToElementMap,
            )) {
                const number = this.$store.getters[
                    'designer/GET_PALETTE_NUMBER_BY_ELEMENT'
                ](element);
                attributeToPaletteNumber[attribute] = number;
            }

            // getter (key)

            for (const op of this.contents.ops) {
                if (op.attributes) {
                    for (const key of Object.keys(op.attributes)) {
                        const number = attributeToPaletteNumber[key];
                        if (number) {
                            op.attributes[key] = number;
                        }
                    }
                }
            }
        }
    },
};
</script>

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

<style>
.emojione {
  text-indent: -9999em;
  image-rendering: optimizeQuality;
  font-size: inherit;
  height: 24px;
  width: 24px;
  top: -3px;
  position: relative;
  display: inline-block;
  margin: 0 0.15em;
  line-height: normal;
  vertical-align: middle;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
