import { L10n, createElement, EventHandler } from '@syncfusion/ej2-base';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import { RibbonItemSize, RibbonItemType } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
// Constants for UI element IDs
export var SIZE_GROUP = '_size_group';
export var WIDTH_BOX_ID = '_width_box';
export var HEIGHT_BOX_ID = '_height_box';
export var ASPECT_RATIO_ID = '_aspect_ratio';
/**
 * Size group implementation for Picture Format tab
 * @private
 */
var SizeGroup = /** @class */ (function () {
    /**
     * Constructor for SizeGroup class
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function SizeGroup(container) {
        this.isMaintainAspectRatio = false;
        this.isInitialized = false;
        this.container = container;
        this.localObj = new L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
        this.isInitialized = 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.createWidthTemplate();
        this.createHeightTemplate();
    }
    /**
     * Get the Ribbon items for Size group
     * @returns {RibbonGroupModel} - Ribbon group model for Size group
     * @private
     */
    SizeGroup.prototype.getSizeGroup = function () {
        var _this = this;
        var id = this.container.element.id + '_pictureformat';
        var pictureWidth = function () {
            return "<div class=\"e-de-ctnr-picture-ribbon-segment e-de-ctnr-picture-format-tab\"\n            title=\"" + _this.localObj.getConstant('Width') + "\">\n            <div class=\"e-de-picture-label-container\">\n                <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Width') + ":</span>\n            </div>\n            <input id=\"" + (_this.container.element.id + WIDTH_BOX_ID) + "\" class=\"e-textbox\" />\n        </div>";
        };
        var pictureHeight = function () {
            return " <div class=\"e-de-ctnr-picture-ribbon-segment e-de-ctnr-picture-format-tab\" \n                title=\"" + _this.localObj.getConstant('Height') + "\">\n                <div class=\"e-de-picture-label-container\">\n                    <span class=\"e-de-ribbon-property-label\">" + _this.localObj.getConstant('Height') + ":</span>\n                </div>\n                <input id=\"" + (_this.container.element.id + HEIGHT_BOX_ID) + "\" class=\"e-textbox\"/>\n            </div>";
        };
        return {
            header: this.localObj.getConstant('Size'),
            id: id + SIZE_GROUP,
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('Size'),
            collections: [
                {
                    items: [
                        {
                            keyTip: 'W',
                            type: RibbonItemType.Template,
                            allowedSizes: RibbonItemSize.Small,
                            itemTemplate: pictureWidth,
                            ribbonTooltipSettings: {
                                title: this.localObj.getConstant('Width'),
                                content: this.localObj.getConstant('Adjust image width')
                            }
                        },
                        {
                            keyTip: 'H',
                            type: RibbonItemType.Template,
                            itemTemplate: pictureHeight,
                            ribbonTooltipSettings: {
                                title: this.localObj.getConstant('Height'),
                                content: this.localObj.getConstant('Adjust image height')
                            }
                        },
                        {
                            type: RibbonItemType.CheckBox,
                            keyTip: 'X',
                            checkBoxSettings: {
                                label: this.localObj.getConstant('Aspect ratio'),
                                checked: false,
                                change: this.onAspectRatioBtnClick.bind(this)
                            },
                            id: id + ASPECT_RATIO_ID,
                            ribbonTooltipSettings: {
                                title: this.localObj.getConstant('Aspect Ratio'),
                                content: this.localObj.getConstant('Maintain aspect ratio when resizing')
                            }
                        }
                    ]
                }
            ]
        };
    };
    SizeGroup.prototype.createWidthTemplate = function () {
        var script = document.createElement('script');
        script.id = this.container.element.id + RIBBON_ID + '_pictureformat_width';
        script.setAttribute('type', 'text/x-template');
        script.innerHTML = "\n        <div class=\"e-de-ctnr-picture-ribbon-segment e-de-ctnr-picture-format-tab\"\n            title=\"" + this.localObj.getConstant('Width') + "\">\n            <div class=\"e-de-picture-label-container\">\n                <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Width') + ":</span>\n            </div>\n            <input id=\"" + (this.container.element.id + WIDTH_BOX_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 + WIDTH_BOX_ID, 'pictureFormatTab');
    };
    SizeGroup.prototype.createHeightTemplate = function () {
        var script = document.createElement('script');
        script.id = this.container.element.id + RIBBON_ID + '_pictureformat_height';
        script.setAttribute('type', 'text/x-template');
        script.innerHTML = "\n            <div class=\"e-de-ctnr-picture-ribbon-segment e-de-ctnr-picture-format-tab\" \n                title=\"" + this.localObj.getConstant('Height') + "\">\n                <div class=\"e-de-picture-label-container\">\n                    <span class=\"e-de-ribbon-property-label\">" + this.localObj.getConstant('Height') + ":</span>\n                </div>\n                <input id=\"" + (this.container.element.id + HEIGHT_BOX_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 + HEIGHT_BOX_ID, 'pictureFormatTab');
    };
    /**
     * Initializes the NumericTextBox instances
     * @returns {void}
     * @private
     */
    SizeGroup.prototype.initializeNumericTextBoxes = function () {
        if (this.isInitialized) {
            return;
        }
        this.isInitialized = true;
        this.initializeWidthNumericBox();
        this.initializeHeightNumericBox();
    };
    SizeGroup.prototype.initializeWidthNumericBox = function () {
        var _this = this;
        var element = document.getElementById(this.container.element.id + WIDTH_BOX_ID);
        if (!element) {
            return;
        }
        this.widthNumericBox = new NumericTextBox({
            min: 0,
            max: 23500,
            value: 0,
            showSpinButton: false,
            format: 'n2',
            decimals: 2,
            width: '100px',
            change: this.onWidthChange.bind(this)
        });
        this.widthNumericBox.appendTo(element);
        element.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                setTimeout(function () {
                    _this.applyImageWidth();
                }, 30);
            }
            if (e.key === 'Tab' && !e.shiftKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                var heightElement_1 = document.getElementById(_this.container.element.id + HEIGHT_BOX_ID);
                if (heightElement_1) {
                    setTimeout(function () {
                        heightElement_1.focus();
                    }, 0);
                }
            }
        });
        element.addEventListener('mousedown', this.applyImageWidth.bind(this));
    };
    SizeGroup.prototype.initializeHeightNumericBox = function () {
        var _this = this;
        var element = document.getElementById(this.container.element.id + HEIGHT_BOX_ID);
        if (!element) {
            return;
        }
        this.heightNumericBox = new NumericTextBox({
            min: 0,
            max: 23500,
            value: 0,
            showSpinButton: false,
            format: 'n2',
            decimals: 2,
            width: '100px',
            change: this.onHeightChange.bind(this)
        });
        this.heightNumericBox.appendTo(element);
        element.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                setTimeout(function () {
                    _this.applyImageHeight();
                }, 30);
            }
            if (e.key === 'Tab' && e.shiftKey) {
                e.preventDefault();
                e.stopImmediatePropagation();
                var widthElement_1 = document.getElementById(_this.container.element.id + WIDTH_BOX_ID);
                if (widthElement_1) {
                    setTimeout(function () {
                        widthElement_1.focus();
                    }, 0);
                }
            }
        });
        element.addEventListener('mousedown', this.applyImageHeight.bind(this));
    };
    SizeGroup.prototype.onWidthChange = function () {
        this.applyImageWidth();
    };
    SizeGroup.prototype.onHeightChange = function () {
        this.applyImageHeight();
    };
    SizeGroup.prototype.onAspectRatioBtnClick = function (args) {
        this.isMaintainAspectRatio = args.checked;
    };
    /**
     * Updates the size property controls with current image properties
     * @returns {void}
     * @private
     */
    SizeGroup.prototype.updateSizeProperties = function () {
        var imageFormat = this.container.documentEditor.selectionModule.imageFormat;
        if (this.widthNumericBox && this.heightNumericBox) {
            this.widthNumericBox.value = imageFormat.width;
            this.heightNumericBox.value = imageFormat.height;
        }
    };
    /**
     * Applies the width value to the selected image
     * @returns {void}
     * @private
     */
    SizeGroup.prototype.applyImageWidth = function () {
        if (!this.widthNumericBox || !this.heightNumericBox) {
            return;
        }
        if (!this.isMaintainAspectRatio) {
            var width = this.widthNumericBox.value;
            var height = this.heightNumericBox.value;
            if (width > this.widthNumericBox.max) {
                width = this.widthNumericBox.max;
            }
            if (height > this.heightNumericBox.max) {
                height = this.heightNumericBox.max;
            }
            if (!(width === null || height === null)) {
                this.container.documentEditor.selectionModule.imageFormat.resize(width, height);
            }
        }
        else if (this.isMaintainAspectRatio) {
            var width = this.widthNumericBox.value;
            if (width > this.widthNumericBox.max) {
                width = this.widthNumericBox.max;
            }
            var imageFormat = this.container.documentEditor.selectionModule.imageFormat;
            var ratio = width / imageFormat.width;
            var height = this.heightNumericBox.value * ratio;
            this.heightNumericBox.value = height;
            if (!(width === null || height === null)) {
                imageFormat.resize(width, height);
            }
        }
    };
    SizeGroup.prototype.applyImageHeight = function () {
        if (!this.widthNumericBox || !this.heightNumericBox) {
            return;
        }
        if (!this.isMaintainAspectRatio) {
            var width = this.widthNumericBox.value;
            var height = this.heightNumericBox.value;
            if (!(width === null || height === null)) {
                this.container.documentEditor.selectionModule.imageFormat.resize(width, height);
            }
        }
        else if (this.isMaintainAspectRatio) {
            var height = this.heightNumericBox.value;
            var imageFormat = this.container.documentEditor.selectionModule.imageFormat;
            var ratio = height / imageFormat.height;
            var width = this.widthNumericBox.value * ratio;
            this.widthNumericBox.value = width;
            if (!(width === null || height === null)) {
                imageFormat.resize(width, height);
            }
        }
    };
    /**
     * Resets the initialization state to allow re-initialization after layout changes
     * @returns {void}
     * @private
     */
    SizeGroup.prototype.resetInitializationState = function () {
        this.isInitialized = false;
        // Clean up existing instances if they exist before re-initialization
        if (this.widthNumericBox) {
            this.widthNumericBox.destroy();
            this.widthNumericBox = undefined;
        }
        if (this.heightNumericBox) {
            this.heightNumericBox.destroy();
            this.heightNumericBox = undefined;
        }
    };
    /**
     * Clean up resources when destroyed
     * @returns {void}
     * @private
     */
    SizeGroup.prototype.destroy = function () {
        this.isInitialized = false;
        // Destroy UI components
        if (this.widthNumericBox) {
            // Remove event listeners from the input element
            var widthElement = document.getElementById(this.container.element.id + WIDTH_BOX_ID);
            if (widthElement) {
                EventHandler.clearEvents(widthElement);
            }
            this.widthNumericBox.destroy();
            this.widthNumericBox = undefined;
        }
        if (this.heightNumericBox) {
            // Remove event listeners from the input element
            var heightElement = document.getElementById(this.container.element.id + HEIGHT_BOX_ID);
            if (heightElement) {
                EventHandler.clearEvents(heightElement);
            }
            this.heightNumericBox.destroy();
            this.heightNumericBox = undefined;
        }
        if (this.aspectRatioBtn) {
            this.aspectRatioBtn.destroy();
            this.aspectRatioBtn = undefined;
        }
        // Remove template elements
        var elementsToRemove = [
            document.getElementById(this.container.element.id + RIBBON_ID + '_pictureformat_width'),
            document.getElementById(this.container.element.id + RIBBON_ID + '_pictureformat_height')
        ];
        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;
        }
        // Clear all references
        this.container = undefined;
        this.localObj = undefined;
    };
    return SizeGroup;
}());
export { SizeGroup };
