/**
 * DevExtreme (cjs/ui/html_editor/utils/image_uploader_helper.js)
 * Version: 22.1.3 (build 22180-0310)
 * Build date: Wed Jun 29 2022
 *
 * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
"use strict";
exports.ImageUploader = void 0;
exports.correctSlashesInUrl = correctSlashesInUrl;
exports.getFileUploaderBaseOptions = getFileUploaderBaseOptions;
exports.urlUpload = urlUpload;
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _message = _interopRequireDefault(require("../../../localization/message"));
var _iterator = require("../../../core/utils/iterator");
var _extend = require("../../../core/utils/extend");
var _size = require("../../../core/utils/size");
var _devices = _interopRequireDefault(require("../../../core/devices"));
var _type = require("../../../core/utils/type");
var _button_group = _interopRequireDefault(require("../../button_group"));
var _file_uploader = _interopRequireDefault(require("../../file_uploader"));
var _text_box = _interopRequireDefault(require("../../text_box"));
var _excluded = ["imageSrc", "src"];

function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    }
}

function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    _setPrototypeOf(subClass, superClass)
}

function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
        o.__proto__ = p;
        return o
    };
    return _setPrototypeOf(o, p)
}

function _typeof(obj) {
    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(obj) {
        return typeof obj
    } : function(obj) {
        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj
    }, _typeof(obj)
}

function _extends() {
    _extends = Object.assign ? Object.assign.bind() : function(target) {
        for (var i = 1; i < arguments.length; i++) {
            var source = arguments[i];
            for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key]
                }
            }
        }
        return target
    };
    return _extends.apply(this, arguments)
}

function _objectWithoutProperties(source, excluded) {
    if (null == source) {
        return {}
    }
    var target = _objectWithoutPropertiesLoose(source, excluded);
    var key, i;
    if (Object.getOwnPropertySymbols) {
        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
        for (i = 0; i < sourceSymbolKeys.length; i++) {
            key = sourceSymbolKeys[i];
            if (excluded.indexOf(key) >= 0) {
                continue
            }
            if (!Object.prototype.propertyIsEnumerable.call(source, key)) {
                continue
            }
            target[key] = source[key]
        }
    }
    return target
}

function _objectWithoutPropertiesLoose(source, excluded) {
    if (null == source) {
        return {}
    }
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;
    for (i = 0; i < sourceKeys.length; i++) {
        key = sourceKeys[i];
        if (excluded.indexOf(key) >= 0) {
            continue
        }
        target[key] = source[key]
    }
    return target
}
var isMobile = "phone" === _devices.default.current().deviceType;
var DIALOG_IMAGE_CAPTION = "dxHtmlEditor-dialogImageCaption";
var DIALOG_UPDATE_IMAGE_CAPTION = "dxHtmlEditor-dialogUpdateImageCaption";
var DIALOG_IMAGE_FIELD_URL = "dxHtmlEditor-dialogImageUrlField";
var DIALOG_IMAGE_FIELD_ALT = "dxHtmlEditor-dialogImageAltField";
var DIALOG_IMAGE_FIELD_WIDTH = "dxHtmlEditor-dialogImageWidthField";
var DIALOG_IMAGE_FIELD_HEIGHT = "dxHtmlEditor-dialogImageHeightField";
var DIALOG_IMAGE_ADD_BUTTON = "dxHtmlEditor-dialogImageAddButton";
var DIALOG_IMAGE_UPDATE_BUTTON = "dxHtmlEditor-dialogImageUpdateButton";
var DIALOG_IMAGE_SPECIFY_URL = "dxHtmlEditor-dialogImageSpecifyUrl";
var DIALOG_IMAGE_SELECT_FILE = "dxHtmlEditor-dialogImageSelectFile";
var DIALOG_IMAGE_KEEP_ASPECT_RATIO = "dxHtmlEditor-dialogImageKeepAspectRatio";
var DIALOG_IMAGE_ENCODE_TO_BASE64 = "dxHtmlEditor-dialogImageEncodeToBase64";
var DIALOG_IMAGE_POPUP_CLASS = "dx-htmleditor-add-image-popup";
var DIALOG_IMAGE_POPUP_WITH_TABS_CLASS = "dx-htmleditor-add-image-popup-with-tabs";
var DIALOG_IMAGE_FIX_RATIO_CONTAINER = "dx-fix-ratio-container";
var FORM_DIALOG_CLASS = "dx-formdialog";
var USER_ACTION = "user";
var SILENT_ACTION = "silent";
var FILE_UPLOADER_NAME = "dx-htmleditor-image";
var ImageUploader = function() {
    function ImageUploader(module, config) {
        this.module = module;
        this.config = null !== config && void 0 !== config ? config : {};
        this.quill = this.module.quill;
        this.editorInstance = this.module.editorInstance
    }
    var _proto = ImageUploader.prototype;
    _proto.render = function() {
        var _this$config$tabs, _this = this;
        this.tabPanelIndex = 0;
        this.formData = this.getFormData();
        this.isUpdating = this.isImageUpdating();
        this.actualTabs = null === (_this$config$tabs = this.config.tabs) || void 0 === _this$config$tabs ? void 0 : _this$config$tabs.slice();
        this.tabs = this.createTabs(this.formData);
        var formConfig = this.getFormConfig();
        this.modifyDialogPopupOptions();
        this.editorInstance.showFormDialog(formConfig).done((function(formData, event) {
            _this.tabs[_this.getActiveTabIndex()].strategy.pasteImage(formData, event)
        })).always((function() {
            _this.resetDialogPopupOptions();
            _this.quill.focus()
        }))
    };
    _proto.getActiveTabIndex = function() {
        return this.isUpdating ? 0 : this.tabPanelIndex
    };
    _proto.getFormData = function() {
        return this.getUpdateDialogFormData(this.quill.getFormat())
    };
    _proto.getUpdateDialogFormData = function(formData) {
        var imageSrc = formData.imageSrc,
            src = formData.src,
            props = _objectWithoutProperties(formData, _excluded);
        return _extends({
            src: null !== imageSrc && void 0 !== imageSrc ? imageSrc : src
        }, props)
    };
    _proto.createTabs = function(formData) {
        var _this2 = this;
        var result = [];
        if (!this.actualTabs || this.isUpdating) {
            this.actualTabs = ["url"]
        }
        this.actualTabs = this.normalizeTabs(this.actualTabs);
        this.actualTabs.forEach((function(tabName) {
            var newTab = "url" === tabName ? new UrlTab(_this2.module, {
                config: _this2.config,
                formData: formData,
                isUpdating: _this2.isUpdating
            }) : new FileTab(_this2.module, {
                config: _this2.config
            });
            result.push(newTab)
        }));
        return result
    };
    _proto.normalizeTabs = function(tabsConfig) {
        return tabsConfig.map((function(item) {
            return "object" === _typeof(item) ? item.name : item
        }))
    };
    _proto.isImageUpdating = function() {
        var _this$module$quill$ge;
        return Object.prototype.hasOwnProperty.call(null !== (_this$module$quill$ge = this.module.quill.getFormat()) && void 0 !== _this$module$quill$ge ? _this$module$quill$ge : {}, "imageSrc")
    };
    _proto.modifyDialogPopupOptions = function() {
        var wrapperClasses = "".concat(DIALOG_IMAGE_POPUP_CLASS, " ").concat(FORM_DIALOG_CLASS);
        if (this.useTabbedItems()) {
            wrapperClasses += " ".concat(DIALOG_IMAGE_POPUP_WITH_TABS_CLASS)
        }
        this.editorInstance.formDialogOption({
            title: _message.default.format(this.isUpdating ? DIALOG_UPDATE_IMAGE_CAPTION : DIALOG_IMAGE_CAPTION),
            "toolbarItems[0].options.text": _message.default.format(this.isUpdating ? DIALOG_IMAGE_UPDATE_BUTTON : DIALOG_IMAGE_ADD_BUTTON),
            "toolbarItems[0].options.visible": !this.shouldHideAddButton(),
            wrapperAttr: {
                class: wrapperClasses
            }
        })
    };
    _proto.shouldHideAddButton = function() {
        return !this.isUpdating && 1 === this.actualTabs.length && "url" !== this.actualTabs[0]
    };
    _proto.resetDialogPopupOptions = function() {
        this.editorInstance.formDialogOption({
            "toolbarItems[0].options.text": _message.default.format("OK"),
            "toolbarItems[0].options.visible": true,
            wrapperAttr: {
                class: FORM_DIALOG_CLASS
            }
        })
    };
    _proto.useTabbedItems = function() {
        return this.actualTabs.length > 1
    };
    _proto.getFormWidth = function() {
        return isMobile ? "100%" : 493
    };
    _proto.getFormConfig = function() {
        return {
            formData: this.formData,
            width: this.getFormWidth(),
            labelLocation: "top",
            colCount: this.useTabbedItems() ? 1 : 11,
            items: this.getItemsConfig()
        }
    };
    _proto.getItemsConfig = function() {
        var _this3 = this;
        var config = {};
        if (this.useTabbedItems()) {
            var tabsConfig = (0, _iterator.map)(this.tabs, (function(tabController) {
                return {
                    title: tabController.getTabName(),
                    colCount: 11,
                    items: tabController.getItemsConfig()
                }
            }));
            config = [{
                itemType: "tabbed",
                tabPanelOptions: {
                    onSelectionChanged: function(e) {
                        _this3.tabPanelIndex = e.component.option("selectedIndex")
                    }
                },
                tabs: tabsConfig
            }]
        } else {
            config = this.tabs[0].getItemsConfig()
        }
        return config
    };
    return ImageUploader
}();
exports.ImageUploader = ImageUploader;
var BaseTab = function() {
    function BaseTab(module, _ref) {
        var config = _ref.config,
            formData = _ref.formData,
            isUpdating = _ref.isUpdating;
        this.module = module;
        this.config = config;
        this.formData = formData;
        this.isUpdating = isUpdating;
        this.strategy = this.getStrategy()
    }
    var _proto2 = BaseTab.prototype;
    _proto2.getItemsConfig = function() {
        return this.strategy.getItemsConfig()
    };
    return BaseTab
}();
var UrlTab = function(_BaseTab) {
    _inheritsLoose(UrlTab, _BaseTab);

    function UrlTab() {
        return _BaseTab.apply(this, arguments) || this
    }
    var _proto3 = UrlTab.prototype;
    _proto3.getTabName = function() {
        return _message.default.format(DIALOG_IMAGE_SPECIFY_URL)
    };
    _proto3.getStrategy = function() {
        return this.isUpdating ? new UpdateUrlStrategy(this.module, this.config, this.formData) : new AddUrlStrategy(this.module, this.config)
    };
    return UrlTab
}(BaseTab);
var FileTab = function(_BaseTab2) {
    _inheritsLoose(FileTab, _BaseTab2);

    function FileTab() {
        return _BaseTab2.apply(this, arguments) || this
    }
    var _proto4 = FileTab.prototype;
    _proto4.getTabName = function() {
        return _message.default.format(DIALOG_IMAGE_SELECT_FILE)
    };
    _proto4.getStrategy = function() {
        return new FileStrategy(this.module, this.config)
    };
    return FileTab
}(BaseTab);
var BaseStrategy = function() {
    function BaseStrategy(module, config) {
        this.module = module;
        this.config = config;
        this.editorInstance = module.editorInstance;
        this.quill = module.quill;
        this.selection = this.getQuillSelection()
    }
    var _proto5 = BaseStrategy.prototype;
    _proto5.getQuillSelection = function() {
        var selection = this.quill.getSelection();
        return null !== selection && void 0 !== selection ? selection : {
            index: this.quill.getLength(),
            length: 0
        }
    };
    _proto5.pasteImage = function() {};
    return BaseStrategy
}();
var AddUrlStrategy = function(_BaseStrategy) {
    _inheritsLoose(AddUrlStrategy, _BaseStrategy);

    function AddUrlStrategy(module, config) {
        var _this4;
        _this4 = _BaseStrategy.call(this, module, config) || this;
        _this4.shouldKeepAspectRatio = true;
        return _this4
    }
    var _proto6 = AddUrlStrategy.prototype;
    _proto6.pasteImage = function(formData, event) {
        this.module.saveValueChangeEvent(event);
        urlUpload(this.quill, this.selection.index, formData)
    };
    _proto6.keepAspectRatio = function(data, _ref2) {
        var dependentEditor = _ref2.dependentEditor,
            e = _ref2.e;
        var newValue = parseInt(e.value);
        var previousValue = parseInt(e.previousValue);
        var previousDependentEditorValue = parseInt(dependentEditor.option("value"));
        data.component.updateData(data.dataField, newValue);
        if (this.shouldKeepAspectRatio && previousDependentEditorValue && previousValue && !this.preventRecalculating) {
            this.preventRecalculating = true;
            dependentEditor.option("value", Math.round(newValue * previousDependentEditorValue / parseInt(previousValue)).toString())
        }
        this.preventRecalculating = false
    };
    _proto6.createKeepAspectRatioEditor = function($container, data, dependentEditorDataField) {
        var _this5 = this;
        return this.editorInstance._createComponent($container, _text_box.default, (0, _extend.extend)(true, data.editorOptions, {
            value: data.component.option("formData")[data.dataField],
            onEnterKey: data.component.option("onEditorEnterKey").bind(this.editorInstance._formDialog, data),
            onValueChanged: function(e) {
                _this5.keepAspectRatio(data, {
                    dependentEditor: _this5[dependentEditorDataField + "Editor"],
                    e: e
                })
            }
        }))
    };
    _proto6.getItemsConfig = function() {
        var _this6 = this;
        return [{
            dataField: "src",
            colSpan: 11,
            label: {
                text: _message.default.format(DIALOG_IMAGE_FIELD_URL)
            }
        }, {
            dataField: "width",
            colSpan: 6,
            label: {
                text: _message.default.format(DIALOG_IMAGE_FIELD_WIDTH)
            },
            template: function(data) {
                var $content = (0, _renderer.default)("<div>").addClass(DIALOG_IMAGE_FIX_RATIO_CONTAINER);
                var $widthEditor = (0, _renderer.default)("<div>").appendTo($content);
                _this6.widthEditor = _this6.createKeepAspectRatioEditor($widthEditor, data, "height");
                var $ratioEditor = (0, _renderer.default)("<div>").appendTo($content);
                _this6.editorInstance._createComponent($ratioEditor, _button_group.default, {
                    items: [{
                        icon: "imgarlock",
                        value: "keepRatio"
                    }],
                    hint: _message.default.format(DIALOG_IMAGE_KEEP_ASPECT_RATIO),
                    focusStateEnabled: false,
                    keyExpr: "value",
                    stylingMode: "outlined",
                    selectionMode: "multiple",
                    selectedItemKeys: ["keepRatio"],
                    onSelectionChanged: function(e) {
                        _this6.shouldKeepAspectRatio = !!e.component.option("selectedItems").length
                    }
                });
                return $content
            }
        }, {
            dataField: "height",
            colSpan: 5,
            label: {
                text: _message.default.format(DIALOG_IMAGE_FIELD_HEIGHT)
            },
            template: function(data) {
                var $content = (0, _renderer.default)("<div>");
                _this6.heightEditor = _this6.createKeepAspectRatioEditor($content, data, "width");
                return $content
            }
        }, {
            dataField: "alt",
            colSpan: 11,
            label: {
                text: _message.default.format(DIALOG_IMAGE_FIELD_ALT)
            }
        }]
    };
    return AddUrlStrategy
}(BaseStrategy);
var UpdateUrlStrategy = function(_AddUrlStrategy) {
    _inheritsLoose(UpdateUrlStrategy, _AddUrlStrategy);

    function UpdateUrlStrategy(module, config, formData) {
        var _this7;
        _this7 = _AddUrlStrategy.call(this, module, config) || this;
        _this7.formData = formData;
        _this7.modifyFormData();
        return _this7
    }
    var _proto7 = UpdateUrlStrategy.prototype;
    _proto7.modifyFormData = function() {
        var _this$quill$getFormat = this.quill.getFormat(this.selection.index - 1, 1),
            imageSrc = _this$quill$getFormat.imageSrc;
        if (!imageSrc || 0 === this.selection.index) {
            this.selection = {
                index: this.selection.index + 1,
                length: 0
            };
            this.quill.setSelection(this.selection.index, this.selection.length, SILENT_ACTION)
        }
        var imgElement = this.quill.getLeaf(this.selection.index)[0].domNode;
        if (imgElement) {
            var _this$formData$width, _this$formData$height;
            this.formData.width = null !== (_this$formData$width = this.formData.width) && void 0 !== _this$formData$width ? _this$formData$width : (0, _size.getWidth)((0, _renderer.default)(imgElement));
            this.formData.height = null !== (_this$formData$height = this.formData.height) && void 0 !== _this$formData$height ? _this$formData$height : (0, _size.getHeight)((0, _renderer.default)(imgElement))
        }
    };
    _proto7.pasteImage = function(formData, event) {
        this.quill.deleteText(this.embedFormatIndex(), 1, SILENT_ACTION);
        this.selection.index -= 1;
        _AddUrlStrategy.prototype.pasteImage.call(this, formData, event)
    };
    _proto7.embedFormatIndex = function() {
        var _this$selection;
        var selection = null !== (_this$selection = this.selection) && void 0 !== _this$selection ? _this$selection : this.quill.getSelection();
        if (selection) {
            if (selection.length) {
                return selection.index
            } else {
                return selection.index - 1
            }
        } else {
            return this.quill.getLength()
        }
    };
    return UpdateUrlStrategy
}(AddUrlStrategy);
var FileStrategy = function(_BaseStrategy2) {
    _inheritsLoose(FileStrategy, _BaseStrategy2);

    function FileStrategy(module, config) {
        var _this8;
        _this8 = _BaseStrategy2.call(this, module, config) || this;
        _this8.useBase64 = !(0, _type.isDefined)(_this8.config.fileUploadMode) || "base64" === _this8.config.fileUploadMode;
        return _this8
    }
    var _proto8 = FileStrategy.prototype;
    _proto8.closeDialogPopup = function(data) {
        this.editorInstance._formDialog.hide({
            file: data.value ? data.value[0] : data.file
        }, data.event)
    };
    _proto8.serverUpload = function(data) {
        if (!this.useBase64) {
            var imageUrl = correctSlashesInUrl(this.config.uploadDirectory) + data.file.name;
            urlUpload(this.quill, this.selection.index, {
                src: imageUrl
            });
            this.closeDialogPopup(data)
        }
    };
    _proto8.base64Upload = function(data) {
        this.quill.getModule("uploader").upload(this.selection, data.value, true);
        this.closeDialogPopup(data)
    };
    _proto8.pasteImage = function(formData, event) {
        if (this.useBase64) {
            _BaseStrategy2.prototype.pasteImage.call(this, formData, event)
        }
    };
    _proto8.isBase64Editable = function() {
        return "both" === this.config.fileUploadMode
    };
    _proto8.getFileUploaderOptions = function() {
        var _this9 = this;
        var fileUploaderOptions = {
            uploadUrl: this.config.uploadUrl,
            onValueChanged: function(data) {
                if (_this9.useBase64) {
                    _this9.base64Upload(data)
                } else if (data.value.length) {
                    data.component.upload()
                }
            },
            onUploaded: function(data) {
                _this9.serverUpload(data)
            }
        };
        return (0, _extend.extend)({}, getFileUploaderBaseOptions(), fileUploaderOptions, this.config.fileUploaderOptions)
    };
    _proto8.getItemsConfig = function() {
        var _this10 = this;
        return [{
            itemType: "simple",
            dataField: "files",
            colSpan: 11,
            label: {
                visible: false
            },
            template: function() {
                var $content = (0, _renderer.default)("<div>");
                _this10.module.editorInstance._createComponent($content, _file_uploader.default, _this10.getFileUploaderOptions());
                return $content
            }
        }, {
            itemType: "simple",
            colSpan: 11,
            label: {
                visible: false
            },
            editorType: "dxCheckBox",
            editorOptions: {
                value: this.useBase64,
                visible: this.isBase64Editable(),
                text: _message.default.format(DIALOG_IMAGE_ENCODE_TO_BASE64),
                onValueChanged: function(e) {
                    if (_this10.isBase64Editable()) {
                        _this10.useBase64 = e.value
                    }
                }
            }
        }]
    };
    return FileStrategy
}(BaseStrategy);

function correctSlashesInUrl(url) {
    return "/" !== url[url.length - 1] ? url + "/" : url
}

function getFileUploaderBaseOptions() {
    return {
        value: [],
        name: FILE_UPLOADER_NAME,
        accept: "image/*",
        uploadMode: "useButtons"
    }
}

function urlUpload(quill, index, attributes) {
    quill.insertEmbed(index, "extendedImage", attributes, USER_ACTION);
    quill.setSelection(index + 1, 0, USER_ACTION)
}
