import { L10n, createElement } from '@syncfusion/ej2-base';
import { TextArea } from '@syncfusion/ej2-inputs';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
/**
 * Dialog class to manage alternative text input for images.
 * @returns {AltTextDialog} - Returns the AltTextDialog instance.
 * @private
 */
var AltTextDialog = /** @class */ (function () {
    /**
     * Constructor for AltTextDialog class
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function AltTextDialog(container) {
        var _this = this;
        // Constants for UI elements
        this.ALT_TEXT_INPUT_ID = '_de-alt-text-input';
        /**
         * Show the Alt Text Dialog
         * @returns {void}
         */
        this.show = function () {
            _this.localObj = new L10n('documenteditorcontainer', _this.container.defaultLocale, _this.container.locale);
            if (!_this.target) {
                _this.initDialog(_this.localObj);
            }
            // Get the document helper's dialog from the container
            var documentHelper = (_this.container.documentEditor).documentHelper;
            documentHelper.dialog.header = _this.localObj.getConstant('Alt Text');
            documentHelper.dialog.height = 'auto';
            documentHelper.dialog.width = 'auto'; // Wider dialog for textarea
            documentHelper.dialog.content = _this.target;
            documentHelper.dialog.buttons = [{
                    click: _this.applyAltText,
                    buttonModel: { content: _this.localObj.getConstant('Apply'), cssClass: 'e-flat', isPrimary: true }
                },
                {
                    click: _this.hideDialog,
                    buttonModel: { content: _this.localObj.getConstant('Cancel'), cssClass: 'e-flat' }
                }];
            // Set current alt text value
            var currentAltText = _this.getCurrentAltText();
            _this.altTextArea.value = currentAltText;
            documentHelper.dialog.dataBind();
            documentHelper.dialog.show();
        };
        this.applyAltText = function () {
            var altText = _this.altTextArea.value;
            // Apply alt text to the selected image
            _this.container.documentEditor.selection.imageFormat.applyImageAlternativeText(altText);
            // Hide dialog
            _this.hideDialog();
        };
        this.hideDialog = function () {
            var documentHelper = (_this.container.documentEditor).documentHelper;
            _this.altTextArea.value = '';
            documentHelper.dialog.hide();
            _this.container.documentEditor.focusIn();
        };
        this.container = container;
        this.localObj = new L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
    }
    AltTextDialog.prototype.initDialog = function (localValue) {
        var id = this.container.element.id + RIBBON_ID + '_alt_text_dialog';
        this.target = createElement('div', { id: id, className: 'e-de-alt-text' });
        var container = createElement('div');
        var label = createElement('div', {
            className: 'e-de-alt-text-dlg-title',
            innerHTML: localValue.getConstant('Alternative Text')
        });
        // Create textarea element instead of input
        this.textAreaElement = createElement('textarea', {
            id: this.container.element.id + RIBBON_ID + this.ALT_TEXT_INPUT_ID,
            className: 'e-input e-de-alt-text-dlg-textarea'
        });
        container.appendChild(label);
        container.appendChild(this.textAreaElement);
        this.target.appendChild(container);
        // Initialize TextArea with placeholder
        this.altTextArea = new TextArea({
            // placeholder: localValue.getConstant('Enter alt text for this image'),
            // floatLabelType: 'Always',
            rows: 5,
            cssClass: 'e-de-alt-text-area'
        });
        this.altTextArea.appendTo(this.textAreaElement);
    };
    AltTextDialog.prototype.getCurrentAltText = function () {
        if (this.container.documentEditor &&
            this.container.documentEditor.selection &&
            this.container.documentEditor.selection.imageFormat) {
            return this.container.documentEditor.selection.imageFormat.alternateText;
        }
        return '';
    };
    /**
     * Clean up resources when destroyed
     * @returns {void}
     */
    AltTextDialog.prototype.destroy = function () {
        if (this.altTextArea) {
            this.altTextArea.destroy();
            this.altTextArea = undefined;
        }
        this.container = undefined;
        this.target = undefined;
        this.textAreaElement = undefined;
    };
    return AltTextDialog;
}());
export { AltTextDialog };
