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 __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { createElement, initializeCSPTemplate } from '@syncfusion/ej2-base';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { RibbonItemType } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { RibbonGroupBase } from '../ribbon-interfaces';
// Constants for UI element IDs
export var LAYOUT_PARAGRAPH_GROUP = '_layout_paragraph_group';
export var INDENT_LEFT_ID = '_indent_left';
export var INDENT_RIGHT_ID = '_indent_right';
export var SPACING_BEFORE_ID = '_spacing_before';
export var SPACING_AFTER_ID = '_spacing_after';
/**
 * Layout Paragraph group implementation for simplified mode
 * @private
 */
var LayoutParagraphGroup = /** @class */ (function (_super) {
    __extends(LayoutParagraphGroup, _super);
    /**
     * Constructor for LayoutParagraphGroup class
     *
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function LayoutParagraphGroup(container) {
        var _this = _super.call(this, container) || this;
        _this.isInitilized = false;
        _this.eventHandlers = {};
        _this.isInitilized = false;
        // Create a hidden container for templates
        _this.templateContainer = createElement('div', {
            styles: 'position: absolute; visibility: hidden; height: 0; width: 0; overflow: hidden;'
        });
        document.body.appendChild(_this.templateContainer);
        // Create template elements
        _this.createIndentLeftTemplate();
        _this.createIndentRightTemplate();
        _this.createSpacingBeforeTemplate();
        _this.createSpacingAfterTemplate();
        return _this;
    }
    /**
     * Get the Ribbon items for Layout Paragraph group
     *
     * @returns {RibbonGroupModel} The ribbon group model
     */
    LayoutParagraphGroup.prototype.getGroupModel = function () {
        var _this = this;
        var id = this.container.element.id + RIBBON_ID;
        var leftIndentTemplate = function () { return "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + _this.localObj.getConstant('Indent Left') + "\">\n                <div class=\"e-de-indent-label-container\">\n               \n                    <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Indent Left') + ":</span>\n                </div>\n                <input id=\"" + (_this.container.element.id + INDENT_LEFT_ID) + "\" class=\"e-textbox\" />\n            </div>"; };
        var rightIndentTemplate = function () { return "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + _this.localObj.getConstant('Indent Right') + "\">\n                <div class=\"e-de-indent-label-container\">\n              \n                    <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Indent Right') + ":</span>\n                </div>\n                <input id=\"" + (_this.container.element.id + INDENT_RIGHT_ID) + "\" class=\"e-textbox\" />\n            </div>\n        "; };
        var spacingBeforeTemplate = function () { return "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + _this.localObj.getConstant('Spacing Before') + "\">\n                <div class=\"e-de-property-label-container\">\n                   \n                    <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Spacing Before') + ":</span>\n                </div>\n                <input id=\"" + (_this.container.element.id + SPACING_BEFORE_ID) + "\" class=\"e-textbox\" />\n            </div>\n        "; };
        var spacingAfterTemplate = function () { return "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + _this.localObj.getConstant('Spacing After') + "\">\n                <div class=\"e-de-property-label-container\">\n                    <span class=\"e-de-icon-spaceafter\"></span>\n                    <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Spacing After') + ":</span>\n                </div>\n                <input id=\"" + (_this.container.element.id + SPACING_AFTER_ID) + "\" class=\"e-textbox\" />\n            </div>\n        "; };
        return {
            header: this.localObj.getConstant('Paragraph'),
            showLauncherIcon: true,
            id: id + LAYOUT_PARAGRAPH_GROUP,
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('Paragraph'),
            collections: [
                {
                    items: [
                        {
                            type: RibbonItemType.Template,
                            itemTemplate: initializeCSPTemplate(leftIndentTemplate),
                            ribbonTooltipSettings: {
                                title: this.localObj.getConstant('Indent Left'),
                                content: this.localObj.getConstant('Set the distance between paragraph and left margin')
                            }
                        },
                        {
                            type: RibbonItemType.Template,
                            itemTemplate: initializeCSPTemplate(rightIndentTemplate),
                            ribbonTooltipSettings: {
                                title: this.localObj.getConstant('Indent Right'),
                                content: this.localObj.getConstant('Set the distance between paragraph and right margin')
                            }
                        }
                    ]
                },
                {
                    items: [
                        {
                            type: RibbonItemType.Template,
                            itemTemplate: initializeCSPTemplate(spacingBeforeTemplate),
                            ribbonTooltipSettings: {
                                title: this.localObj.getConstant('Spacing Before'),
                                content: this.localObj.getConstant('Set the spacing before the paragraph')
                            }
                        },
                        {
                            type: RibbonItemType.Template,
                            itemTemplate: initializeCSPTemplate(spacingAfterTemplate),
                            ribbonTooltipSettings: {
                                title: this.localObj.getConstant('Spacing After'),
                                content: this.localObj.getConstant('Set the spacing after the paragraph')
                            }
                        }
                    ]
                }
            ]
        };
    };
    /**
     * Creates indent left input template
     *
     * @returns {void}
     */
    LayoutParagraphGroup.prototype.createIndentLeftTemplate = function () {
        var script = document.createElement('script');
        script.id = this.container.element.id + RIBBON_ID + '_indent_left';
        script.setAttribute('type', 'text/x-template');
        script.innerHTML = "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + this.localObj.getConstant('Indent Left') + "\">\n                <div class=\"e-de-indent-label-container\">\n               \n                    <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Indent Left') + ":</span>\n                </div>\n                <input id=\"" + (this.container.element.id + INDENT_LEFT_ID) + "\" class=\"e-textbox\" />\n            </div>\n        ";
        document.head.appendChild(script);
        // Register numeric textbox for initialization
        this.container.ribbon.numericTextBoxCollection.add(this.container.element.id + INDENT_LEFT_ID, 'simplifiedTab');
    };
    /**
     * Creates indent right input template
     *
     * @returns {void}
     */
    LayoutParagraphGroup.prototype.createIndentRightTemplate = function () {
        var script = document.createElement('script');
        script.id = this.container.element.id + RIBBON_ID + '_indent_right';
        script.setAttribute('type', 'text/x-template');
        script.innerHTML = "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + this.localObj.getConstant('Indent Right') + "\">\n                <div class=\"e-de-indent-label-container\">\n              \n                    <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Indent Right') + ":</span>\n                </div>\n                <input id=\"" + (this.container.element.id + INDENT_RIGHT_ID) + "\" class=\"e-textbox\" />\n            </div>\n        ";
        document.head.appendChild(script);
        // Register numeric textbox for initialization
        this.container.ribbon.numericTextBoxCollection.add(this.container.element.id + INDENT_RIGHT_ID, 'simplifiedTab');
    };
    /**
     * Creates spacing before input template
     *
     * @returns {void}
     */
    LayoutParagraphGroup.prototype.createSpacingBeforeTemplate = function () {
        var script = document.createElement('script');
        script.id = this.container.element.id + RIBBON_ID + '_spacing_before';
        script.setAttribute('type', 'text/x-template');
        script.innerHTML = "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + this.localObj.getConstant('Spacing Before') + "\">\n                <div class=\"e-de-property-label-container\">\n                   \n                    <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Spacing Before') + ":</span>\n                </div>\n                <input id=\"" + (this.container.element.id + SPACING_BEFORE_ID) + "\" class=\"e-textbox\" />\n            </div>\n        ";
        document.head.appendChild(script);
        // Register numeric textbox for initialization
        this.container.ribbon.numericTextBoxCollection.add(this.container.element.id + SPACING_BEFORE_ID, 'simplifiedTab');
    };
    /**
     * Creates spacing after input template
     *
     * @returns {void}
     */
    LayoutParagraphGroup.prototype.createSpacingAfterTemplate = function () {
        var script = document.createElement('script');
        script.id = this.container.element.id + RIBBON_ID + '_spacing_after';
        script.setAttribute('type', 'text/x-template');
        script.innerHTML = "\n            <div class=\"e-de-ctnr-layout-ribbon-segment e-de-ctnr-layout-tab\"\n                title=\"" + this.localObj.getConstant('Spacing After') + "\">\n                <div class=\"e-de-property-label-container\">\n                    <span class=\"e-de-icon-spaceafter\"></span>\n                    <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Spacing After') + ":</span>\n                </div>\n                <input id=\"" + (this.container.element.id + SPACING_AFTER_ID) + "\" class=\"e-textbox\" />\n            </div>\n        ";
        document.head.appendChild(script);
        // Register numeric textbox for initialization
        this.container.ribbon.numericTextBoxCollection.add(this.container.element.id + SPACING_AFTER_ID, 'simplifiedTab');
    };
    /**
     * Initializes the NumericTextBox instances
     *
     * @returns {void}
     */
    LayoutParagraphGroup.prototype.initializeNumericTextBoxes = function () {
        if (this.isInitilized) {
            var leftIndent = document.getElementById(this.container.element.id + RIBBON_ID + '_indent_left');
            var rightIndent = document.getElementById(this.container.element.id + RIBBON_ID + '_indent_right');
            var beforeSpacing = document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_before');
            var afterSpacing = document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_after');
            if (leftIndent.classList.contains('e-numerictextbox') && rightIndent.classList.contains('e-numerictextbox') &&
                beforeSpacing.classList.contains('e-numerictextbox') && afterSpacing.classList.contains('e-numerictextbox')) {
                return;
            }
        }
        this.resetInitializationState();
        this.isInitilized = true;
        this.initializeIndentLeftNumericBox();
        this.initializeIndentRightNumericBox();
        this.initializeSpacingBeforeNumericBox();
        this.initializeSpacingAfterNumericBox();
    };
    /**
     * Resets the initialization state to allow re-initialization after layout changes
     *
     * @returns {void}
     */
    LayoutParagraphGroup.prototype.resetInitializationState = function () {
        this.isInitilized = false;
        // Clean up existing instances if they exist before re-initialization
        if (this.indentLeftNumericBox) {
            this.indentLeftNumericBox.destroy();
            this.indentLeftNumericBox = undefined;
        }
        if (this.indentRightNumericBox) {
            this.indentRightNumericBox.destroy();
            this.indentRightNumericBox = undefined;
        }
        if (this.spacingBeforeNumericBox) {
            this.spacingBeforeNumericBox.destroy();
            this.spacingBeforeNumericBox = undefined;
        }
        if (this.spacingAfterNumericBox) {
            this.spacingAfterNumericBox.destroy();
            this.spacingAfterNumericBox = undefined;
        }
    };
    LayoutParagraphGroup.prototype.initializeIndentLeftNumericBox = function () {
        this.indentLeftNumericBox = this.initializeNumericBox(INDENT_LEFT_ID, {
            format: 'n1',
            value: 0,
            min: -1584,
            max: 1584,
            placeholder: this.localObj.getConstant('Before text'),
            change: this.onIndentLeftChange.bind(this)
        }, this.applyIndentLeft);
    };
    LayoutParagraphGroup.prototype.initializeIndentRightNumericBox = function () {
        this.indentRightNumericBox = this.initializeNumericBox(INDENT_RIGHT_ID, {
            format: 'n1',
            value: 0,
            min: -1584,
            max: 1584,
            change: this.onIndentRightChange.bind(this)
        }, this.applyIndentRight);
    };
    LayoutParagraphGroup.prototype.initializeSpacingBeforeNumericBox = function () {
        this.spacingBeforeNumericBox = this.initializeNumericBox(SPACING_BEFORE_ID, {
            format: 'n1',
            value: 0,
            min: -1,
            max: 1584,
            step: 6,
            showSpinButton: true,
            change: this.onSpacingBeforeChange.bind(this)
        }, this.applySpacingBefore);
    };
    LayoutParagraphGroup.prototype.initializeSpacingAfterNumericBox = function () {
        this.spacingAfterNumericBox = this.initializeNumericBox(SPACING_AFTER_ID, {
            format: 'n1',
            value: 0,
            min: -1,
            max: 1584,
            step: 6,
            showSpinButton: true,
            change: this.onSpacingAfterChange.bind(this)
        }, this.applySpacingAfter);
    };
    LayoutParagraphGroup.prototype.initializeNumericBox = function (id, options, applyMethod) {
        var _this = this;
        var element = document.getElementById(this.container.element.id + id);
        if (!element) {
            return null;
        }
        var numericBox = new NumericTextBox(__assign({ width: '100px', cssClass: 'e-de-paragraph-property', enablePersistence: false, floatLabelType: 'Always' }, options));
        numericBox.appendTo(element);
        var keydownHandler = function (e) {
            if (e.key === 'Enter') {
                setTimeout(function () {
                    applyMethod.call(_this);
                }, 30);
            }
        };
        var blurHandler = applyMethod.bind(this);
        // Add event listeners
        element.addEventListener('keydown', keydownHandler);
        element.addEventListener('blur', blurHandler);
        /* eslint-disable */
        this.eventHandlers[id] = {
            element: element,
            keydownHandler: keydownHandler,
            blurHandler: blurHandler
        };
        return numericBox;
    };
    LayoutParagraphGroup.prototype.onIndentLeftChange = function () {
        this.applyIndentLeft();
    };
    LayoutParagraphGroup.prototype.onIndentRightChange = function () {
        this.applyIndentRight();
    };
    LayoutParagraphGroup.prototype.onSpacingBeforeChange = function () {
        this.applySpacingBefore();
    };
    LayoutParagraphGroup.prototype.onSpacingAfterChange = function () {
        this.applySpacingAfter();
    };
    LayoutParagraphGroup.prototype.applyIndentLeft = function () {
        if (!this.indentLeftNumericBox) {
            return;
        }
        var leftIndent = this.indentLeftNumericBox.value;
        if (leftIndent !== null) {
            this.container.documentEditor.selection.paragraphFormat.leftIndent = leftIndent;
        }
    };
    LayoutParagraphGroup.prototype.applyIndentRight = function () {
        if (!this.indentRightNumericBox) {
            return;
        }
        var rightIndent = this.indentRightNumericBox.value;
        if (rightIndent !== null) {
            this.container.documentEditor.selection.paragraphFormat.rightIndent = rightIndent;
        }
    };
    LayoutParagraphGroup.prototype.applySpacingBefore = function () {
        if (!this.spacingBeforeNumericBox) {
            return;
        }
        var spacingBefore = this.spacingBeforeNumericBox.value;
        if (spacingBefore !== null && Math.round(this.container.documentEditor.selection.paragraphFormat.beforeSpacing * 1000) !== Math.round(spacingBefore * 1000)) {
            this.container.documentEditor.selection.paragraphFormat.beforeSpacing = spacingBefore;
        }
    };
    LayoutParagraphGroup.prototype.applySpacingAfter = function () {
        if (!this.spacingAfterNumericBox) {
            return;
        }
        var spacingAfter = this.spacingAfterNumericBox.value;
        if (spacingAfter !== null && Math.round(this.container.documentEditor.selection.paragraphFormat.afterSpacing * 1000) !== Math.round(spacingAfter * 1000)) {
            this.container.documentEditor.selection.paragraphFormat.afterSpacing = spacingAfter;
        }
    };
    /**
     * Updates the paragraph formatting properties in the UI
     *
     * @returns {void}
     * @private
     */
    LayoutParagraphGroup.prototype.updateSelection = function () {
        var paragraphFormat = this.container.documentEditor.selection.paragraphFormat;
        if (this.indentLeftNumericBox) {
            this.indentLeftNumericBox.value = paragraphFormat.leftIndent;
        }
        if (this.indentRightNumericBox) {
            this.indentRightNumericBox.value = paragraphFormat.rightIndent;
        }
        if (this.spacingBeforeNumericBox) {
            this.spacingBeforeNumericBox.value = paragraphFormat.beforeSpacing;
        }
        if (this.spacingAfterNumericBox) {
            this.spacingAfterNumericBox.value = paragraphFormat.afterSpacing;
        }
    };
    /**
     * Clean up resources when destroyed
     *
     * @returns {void}
     */
    LayoutParagraphGroup.prototype.destroy = function () {
        this.isInitilized = false;
        // Remove event listeners
        var keys = Object.keys(this.eventHandlers);
        for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
            var key = keys_1[_i];
            /* eslint-disable */
            var handler = this.eventHandlers[key];
            if (handler.element) {
                if (handler.keydownHandler) {
                    handler.element.removeEventListener('keydown', handler.keydownHandler);
                }
                if (handler.blurHandler) {
                    handler.element.removeEventListener('blur', handler.blurHandler);
                }
            }
        }
        // Clear event handlers
        this.eventHandlers = {};
        this.resetInitializationState();
        // Remove template elements
        var elementsToRemove = [
            document.getElementById(this.container.element.id + RIBBON_ID + '_indent_left'),
            document.getElementById(this.container.element.id + RIBBON_ID + '_indent_right'),
            document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_before'),
            document.getElementById(this.container.element.id + RIBBON_ID + '_spacing_after')
        ];
        elementsToRemove.forEach(function (element) {
            if (element && element.parentNode) {
                element.parentNode.removeChild(element);
            }
        });
        if (this.templateContainer && this.templateContainer.parentNode) {
            this.templateContainer.parentNode.removeChild(this.templateContainer);
            this.templateContainer = undefined;
        }
    };
    return LayoutParagraphGroup;
}(RibbonGroupBase));
export { LayoutParagraphGroup };
