import { MacroEditorBase } from "../../../Views/Editor/MacroEditorBase.js";
import * as Styles from "../../../Views/Styles.js";
export var RichTextEditorEvents;
(function (RichTextEditorEvents) {
    RichTextEditorEvents["BackgroundColorNeeded"] = "background-color/needed";
    RichTextEditorEvents["BackgroundColorUpdate"] = "background-color/update";
})(RichTextEditorEvents || (RichTextEditorEvents = {}));
export class RichTextEditor extends MacroEditorBase {
    get containerNode() {
        return this.node.children("div[role=container]");
    }
    get mceNode() {
        return this.node.find(".mce-tinymce");
    }
    get mce() {
        return this.m_mce;
    }
    template() {
        return `<div class="-fb-rich-text-editor">
                    <div role="container">
                        <textarea></textarea>
                    </div>
                </div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        Styles.inject("-fb-rich-text-editor", "~/src/views/editor.macro/richtexteditor/richtexteditor.css");
        this.eventBus.subscribe(RichTextEditorEvents.BackgroundColorUpdate, (e) => {
            this.setMceBackgroundColor(e.value);
        });
    }
    focus() {
        this.editor_init();
    }
    onViewResized() {
        this.editor_size();
    }
    editor_init() {
        tinymce.init({
            selector: `#${this.ID} > div > textarea`,
            apply_source_formatting: true,
            plugins: "link hr textcolor colorpicker",
            menubar: false,
            statusbar: false,
            toolbar: [
                "undo redo | fontselect fontsizeselect forecolor backcolor | bold italic | alignleft aligncenter alignright | bullist numlist hr | outdent indent | link unlink"
            ],
            color_picker_callback: (callback, value) => {
            },
            fontsize_formats: "8px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px 22px 24px 28px 32px 36px 40px",
            content_css: Jade.Path.resolve("~/@lib/tinymce/tinymce-content.css?" + Jade.Guid.new().toString()),
            setup: (editor) => {
                this.m_mce = editor;
                this.mce.on('init', (e) => {
                    this.editor_loadContent();
                    this.mceNode.css({
                        borderWidth: 0,
                        borderStyle: "none"
                    });
                    this.editor_size();
                });
                this.mce.on('change', () => {
                    this.editor_onChange();
                });
            }
        });
    }
    editor_loadContent() {
        let content = this.source.primaryValue;
        this.eventBus.publish(RichTextEditorEvents.BackgroundColorNeeded);
        if (content == null) {
            return;
        }
        if (_.isString(content)) {
            this.mce.setContent(content);
            return;
        }
    }
    editor_onChange() {
        this.source.primaryValue = this.mce.getContent();
    }
    setMceBackgroundColor(value) {
        if (this.mce != null) {
            this.mce.getBody().style.backgroundColor = value || "#FFFFFF";
        }
    }
    setMceInitialBackgroundColor() {
        try {
            this.setMceBackgroundColor(this.source.getFeatureValue("backgroundColor"));
        }
        catch {
        }
    }
    editor_size() {
        let max = this.containerNode.outerHeight() - 4;
        max -= this.containerNode.find(`.mce-menubar.mce-toolbar`).outerHeight();
        max -= this.containerNode.find(`.mce-toolbar-grp`).outerHeight();
        this.containerNode.find('.mce-edit-area').height(max);
        this.containerNode.find('IFRAME').height(max);
    }
}
