import { ModulVue } from '../../../utils/vue/vue';
import imageBlockCenterIcon from '../svg/Froala-image-block-center.svg';
import imageBlockLeftIcon from '../svg/Froala-image-block-left.svg';
import imageFloatLeftIcon from '../svg/Froala-image-float-left.svg';
import imageFloatRightIcon from '../svg/Froala-image-float-right.svg';
export var ImageLayoutCommands;
(function (ImageLayoutCommands) {
    var IMG_BLOCK_LEFT_CMD = 'image-block-left';
    var IMG_BLOCK_CENTER_CMD = 'image-block-center';
    var IMG_FLOAT_LEFT_CMD = 'image-float-left';
    var IMG_FLOAT_RIGHT_CMD = 'image-float-right';
    var IMG_CMD = [IMG_BLOCK_LEFT_CMD, IMG_BLOCK_CENTER_CMD, IMG_FLOAT_LEFT_CMD, IMG_FLOAT_RIGHT_CMD];
    var PREFIX = 'm--fr-';
    var ACTIVE_CLASS = PREFIX + "active";
    ImageLayoutCommands.IMG_LAYOUT_CMD = 'image-layout';
    ImageLayoutCommands.DEFAULT_IMG_LAYOUT_CLASS = "" + PREFIX + IMG_BLOCK_LEFT_CMD;
    function register(froalaEditor) {
        registerMainCommand(froalaEditor);
        registerSubCommand(froalaEditor, IMG_BLOCK_LEFT_CMD, imageBlockLeftIcon);
        registerSubCommand(froalaEditor, IMG_BLOCK_CENTER_CMD, imageBlockCenterIcon);
        registerSubCommand(froalaEditor, IMG_FLOAT_LEFT_CMD, imageFloatLeftIcon);
        registerSubCommand(froalaEditor, IMG_FLOAT_RIGHT_CMD, imageFloatRightIcon);
    }
    ImageLayoutCommands.register = register;
    function registerMainCommand(froalaEditor) {
        froalaEditor.DefineIcon(ImageLayoutCommands.IMG_LAYOUT_CMD, { SVG: imageBlockLeftIcon, template: 'custom-icons' });
        froalaEditor.RegisterCommand(ImageLayoutCommands.IMG_LAYOUT_CMD, {
            title: ModulVue.prototype.$i18n.translate("m-rich-text-editor:" + ImageLayoutCommands.IMG_LAYOUT_CMD),
            type: 'dropdown',
            html: function () {
                return this.button.buildList(getCommandList.call(this));
            },
            refreshOnShow: function (_$btn, $dropdown) {
                var dropdown = $dropdown[0];
                var image = this.image.get();
                if (image) {
                    var imageClasses = image[0].classList;
                    removeActiveClass(dropdown);
                    getElementFromDataCmd(dropdown, getActiveImageLayout(imageClasses.value)).classList.add(ACTIVE_CLASS);
                }
            },
            refresh: function () {
                var image = this.image.get();
                var popup = this.popups.areVisible()[0];
                if (image && popup) {
                    var imageClasses = image[0].classList;
                    getElementFromDataCmd(popup, ImageLayoutCommands.IMG_LAYOUT_CMD).innerHTML = getIconFromClasses(imageClasses.value);
                }
            }
        });
    }
    function registerSubCommand(froalaEditor, cmd, icon) {
        froalaEditor.DefineIcon(cmd, { SVG: icon, template: 'custom-icons' });
        froalaEditor.RegisterCommand(cmd, {
            title: ModulVue.prototype.$i18n.translate("m-rich-text-editor:" + cmd),
            undo: true,
            showOnMobile: true,
            callback: function () {
                var popup = this.popups.areVisible()[0];
                var imageClasses = this.image.get()[0].classList;
                getCommandList.call(this).forEach(function (currentCmd) {
                    imageClasses.remove("" + PREFIX + currentCmd);
                    getElementFromDataCmd(popup, currentCmd).classList.remove(ACTIVE_CLASS);
                });
                this.image.applyStyle("" + PREFIX + cmd);
            }
        });
    }
    function getCommandList() {
        if (this.$oel[0].parentNode.__vue__.config.imageHideFloatLayout) {
            return [IMG_BLOCK_LEFT_CMD, IMG_BLOCK_CENTER_CMD];
        }
        else {
            return IMG_CMD;
        }
    }
    function getElementFromDataCmd(root, value) {
        return root.querySelector("[data-cmd=\"" + value + "\"]");
    }
    function getIconFromClasses(classes) {
        if (classes.includes(IMG_BLOCK_CENTER_CMD)) {
            return imageBlockCenterIcon;
        }
        else if (classes.includes(IMG_FLOAT_LEFT_CMD)) {
            return imageFloatLeftIcon;
        }
        else if (classes.includes(IMG_FLOAT_RIGHT_CMD)) {
            return imageFloatRightIcon;
        }
        else {
            return imageBlockLeftIcon;
        }
    }
    function getActiveImageLayout(classes) {
        var cmd = IMG_CMD.find(function (currentCmd) {
            return classes.includes(currentCmd);
        });
        return cmd || IMG_BLOCK_LEFT_CMD;
    }
    function removeActiveClass(root) {
        IMG_CMD.forEach(function (currentCmd) {
            var element = getElementFromDataCmd(root, currentCmd);
            if (element) {
                getElementFromDataCmd(root, currentCmd).classList.remove(ACTIVE_CLASS);
            }
        });
    }
})(ImageLayoutCommands || (ImageLayoutCommands = {}));
//# sourceMappingURL=image-layout-commands.js.map