var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import { RibbonGroupBase } from '../ribbon-interfaces';
import { createElement, Browser, EventHandler } from '@syncfusion/ej2-base';
export var IMAGE_LOCAL_ID = '_image_local';
/**
 * Illustrations group implementation for Insert tab
 * @private
 */
var IllustrationsGroup = /** @class */ (function (_super) {
    __extends(IllustrationsGroup, _super);
    /**
     * Constructor for IllustrationsGroup
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function IllustrationsGroup(container) {
        var _this = _super.call(this, container) || this;
        // Create image picker for file upload
        _this.imagePicker = createElement('input', {
            attrs: { type: 'file', accept: '.jpg,.jpeg,.png,.bmp,.svg' },
            className: 'e-de-ctnr-file-picker'
        });
        if (Browser.isIE) {
            document.body.appendChild(_this.imagePicker);
        }
        // Add event handler for image selection
        EventHandler.add(_this.imagePicker, 'change', _this.onImageChange, _this);
        return _this;
    }
    /**
     * Get the Ribbon items for Illustrations group
     * @returns {RibbonGroupModel} - Ribbon group model for Illustrations group
     * @private
     */
    IllustrationsGroup.prototype.getGroupModel = function () {
        return {
            header: this.localObj.getConstant('Illustrations'),
            groupIconCss: 'e-icons e-de-ctnr-image',
            keyTip: 'P',
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('Illustrations'),
            collections: [{
                    items: [{
                            type: 'DropDown',
                            keyTip: 'U',
                            dropDownSettings: {
                                content: this.localObj.getConstant('Image'),
                                iconCss: 'e-icons e-de-ctnr-image',
                                items: [
                                    {
                                        text: this.localObj.getConstant('Upload from computer'),
                                        id: this.ribbonId + IMAGE_LOCAL_ID,
                                        iconCss: 'e-icons e-de-ctnr-upload'
                                    }
                                ],
                                select: this.onImageDropDownSelect.bind(this)
                            },
                            id: this.ribbonId + '_image',
                            ribbonTooltipSettings: {
                                content: this.localObj.getConstant('Insert inline picture from a file')
                            }
                        }]
                }]
        };
    };
    IllustrationsGroup.prototype.onImageDropDownSelect = function (args) {
        var id = args.item.id;
        if (id === this.ribbonId + IMAGE_LOCAL_ID) {
            this.imageClickHandler();
        }
    };
    IllustrationsGroup.prototype.imageClickHandler = function () {
        this.imagePicker.value = '';
        this.imagePicker.click();
    };
    IllustrationsGroup.prototype.onImageChange = function () {
        var _this = this;
        var file = this.imagePicker.files[0];
        if (!file) {
            return;
        }
        var fileReader = new FileReader();
        fileReader.onload = function () {
            _this.insertImage(fileReader.result);
        };
        fileReader.readAsDataURL(file);
    };
    IllustrationsGroup.prototype.insertImage = function (data) {
        var image = document.createElement('img');
        var container = this.container;
        image.addEventListener('load', function () {
            container.documentEditor.editorModule.insertImageInternal(data, true, this.width, this.height, this.alt);
        });
        image.src = data;
    };
    /**
     * Clean up resources
     * @returns {void}
     */
    IllustrationsGroup.prototype.destroy = function () {
        // Remove event listeners
        if (this.imagePicker) {
            EventHandler.remove(this.imagePicker, 'change', this.onImageChange);
            // Clean up DOM elements
            if (this.imagePicker.parentElement) {
                this.imagePicker.parentElement.removeChild(this.imagePicker);
            }
            this.imagePicker = undefined;
        }
        // Clear all references
        this.container = undefined;
        this.localObj = undefined;
    };
    return IllustrationsGroup;
}(RibbonGroupBase));
export { IllustrationsGroup };
