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 { RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { BulletsGroup, BULLET_LIST_ID } from './bullets-group';
import { NumberingGroup, NUMBER_LIST_ID } from './numbering-group';
import { LineSpacingGroup, LINE_SPACING_ID } from './line-spacing-group';
import { BulletListHelper } from '../../helper/bullet-list-helper';
import { getInstance } from '@syncfusion/ej2-base';
import { SplitButton } from '@syncfusion/ej2-splitbuttons';
// Paragraph group constants
export var PARAGRAPH_GROUP_ID = '_paragraph_group';
export var ALIGN_LEFT_ID = '_align_left';
export var ALIGN_CENTER_ID = '_align_center';
export var ALIGN_RIGHT_ID = '_align_right';
export var JUSTIFY_ID = '_justify';
export var DECREASE_INDENT_ID = '_decrease_indent';
export var INCREASE_INDENT_ID = '_increase_indent';
export var SHOW_HIDE_MARKS_ID = '_show_hide_marks';
export var BORDERS_ID = '_borders';
/**
 * HomeParagraphGroup class for handling paragraph formatting operations in Document Editor ribbon
 * @private
 */
var HomeParagraphGroup = /** @class */ (function (_super) {
    __extends(HomeParagraphGroup, _super);
    /**
     * Constructor for HomeParagraphGroup
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function HomeParagraphGroup(container) {
        var _this = _super.call(this, container) || this;
        // Initialize child components
        _this.bulletsGroup = new BulletsGroup(container);
        _this.numberingGroup = new NumberingGroup(container);
        _this.lineSpacingGroup = new LineSpacingGroup(container);
        return _this;
    }
    /**
     * Get the Ribbon group model for Paragraph formatting
     * @returns {RibbonGroupModel} - Ribbon group model for Paragraph formatting
     * @private
     */
    HomeParagraphGroup.prototype.getGroupModel = function () {
        var _this = this;
        var id = this.ribbonId;
        return {
            id: id + PARAGRAPH_GROUP_ID,
            cssClass: 'e-paragraph-group',
            header: this.localObj.getConstant('Paragraph'),
            isCollapsible: false,
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('More Paragraph Options'),
            groupIconCss: 'e-icons e-de-paragraph',
            orientation: 'Row',
            showLauncherIcon: true,
            launcherIconKeyTip: 'PG',
            collections: [{
                    id: id + '_paragraph-bullets',
                    items: [
                        this.bulletsGroup.getBulletListItem(),
                        this.numberingGroup.getNumberingListItem(),
                        {
                            type: 'Button',
                            keyTip: 'AO',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Increase indent'),
                                iconCss: 'e-icons e-de-ctnr-increaseindent',
                                clicked: function () {
                                    _this.increaseIndentAction();
                                }
                            },
                            id: id + INCREASE_INDENT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Increase indent') }
                        },
                        {
                            type: 'Button',
                            keyTip: 'AI',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Decrease indent'),
                                iconCss: 'e-icons e-de-ctnr-decreaseindent',
                                clicked: function () {
                                    _this.decreaseIndentAction();
                                }
                            },
                            id: id + DECREASE_INDENT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Decrease indent') }
                        },
                        {
                            type: 'Button',
                            keyTip: 'FM',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Show/Hide Marks'),
                                iconCss: 'e-icons e-de-e-paragraph-mark',
                                isToggle: true,
                                clicked: function () {
                                    _this.toggleHiddenMarks();
                                }
                            },
                            id: id + SHOW_HIDE_MARKS_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('ShowHiddenMarks Tooltip') }
                        }
                    ]
                },
                {
                    items: [{
                            // type: RibbonItemType.GroupButton,
                            // allowedSizes: RibbonItemSize.Small,
                            // groupButtonSettings: {
                            //     selection: RibbonGroupButtonSelection.Single,
                            //     header: 'Alignment',
                            // items: [{
                            type: 'Button',
                            keyTip: 'AL',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Align left Tooltip'),
                                iconCss: 'e-icons e-de-ctnr-alignleft',
                                isToggle: true,
                                clicked: function () {
                                    _this.leftAlignmentAction();
                                }
                            },
                            id: id + ALIGN_LEFT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Align left Tooltip') }
                        },
                        {
                            type: 'Button',
                            keyTip: 'AC',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Center Tooltip'),
                                iconCss: 'e-icons e-de-ctnr-aligncenter',
                                isToggle: true,
                                clicked: function () {
                                    _this.centerAlignmentAction();
                                }
                            },
                            id: id + ALIGN_CENTER_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Center Tooltip') }
                        },
                        {
                            type: 'Button',
                            keyTip: 'AR',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Align right Tooltip'),
                                iconCss: 'e-icons e-de-ctnr-alignright',
                                isToggle: true,
                                clicked: function () {
                                    _this.rightAlignmentAction();
                                }
                            },
                            id: id + ALIGN_RIGHT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Align right Tooltip') }
                        },
                        {
                            type: 'Button',
                            keyTip: 'AJ',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Justify Tooltip'),
                                iconCss: 'e-icons e-de-ctnr-justify',
                                isToggle: true,
                                clicked: function () {
                                    _this.justifyAction();
                                }
                            },
                            id: id + JUSTIFY_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Justify Tooltip') }
                            // }]
                            // }
                        },
                        this.lineSpacingGroup.getLineSpacingItem(),
                        {
                            type: 'Button',
                            keyTip: 'B',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Borders'),
                                iconCss: 'e-icons e-de-ctnr-borders',
                                clicked: function () {
                                    _this.bordersAction();
                                }
                            },
                            id: id + BORDERS_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Borders') }
                        }
                    ]
                }]
        };
    };
    /**
     * Update paragraph formatting buttons based on document state
     * @returns {void} - void
     * @private
     */
    HomeParagraphGroup.prototype.updateSelection = function () {
        // Get the ribbon from container
        var ribbon = this.container.ribbonModule.ribbon;
        if (!ribbon) {
            return;
        }
        var id = this.ribbonId;
        // Update toggle button states based on current selection
        if (this.documentEditor.selection) {
            var paragraphFormat = this.documentEditor.selection.paragraphFormat;
            // Update text alignment buttons
            this.updateToggleButtonState(id + ALIGN_LEFT_ID, paragraphFormat.textAlignment === 'Left');
            this.updateToggleButtonState(id + ALIGN_CENTER_ID, paragraphFormat.textAlignment === 'Center');
            this.updateToggleButtonState(id + ALIGN_RIGHT_ID, paragraphFormat.textAlignment === 'Right');
            this.updateToggleButtonState(id + JUSTIFY_ID, paragraphFormat.textAlignment === 'Justify');
            // Update show hidden marks button
            this.updateToggleButtonState(id + SHOW_HIDE_MARKS_ID, this.container.documentEditor.documentEditorSettings.showHiddenMarks);
            // Update line spacing
            this.lineSpacingGroup.setLineSpacing();
            // Update bullets/numbering toggle state based on current selection
            var isBulletActive = false;
            var isNumberActive = false;
            var hasList = !(paragraphFormat.listId === undefined || paragraphFormat.listId === -1);
            if (hasList) {
                var pattern = BulletListHelper.getCurrentListPattern(this.documentEditor);
                if (pattern === 'Bullet') {
                    isBulletActive = true;
                }
                else if (pattern && pattern !== 'None') {
                    isNumberActive = true;
                }
            }
            this.updateSplitButtonState(id + BULLET_LIST_ID, isBulletActive);
            this.updateSplitButtonState(id + NUMBER_LIST_ID, isNumberActive);
            // Disable buttons in read-only mode
            if (this.documentEditor.isReadOnly) {
                ribbon.disableItem(id + INCREASE_INDENT_ID);
                ribbon.disableItem(id + DECREASE_INDENT_ID);
                ribbon.disableItem(id + BULLET_LIST_ID);
                ribbon.disableItem(id + NUMBER_LIST_ID);
                ribbon.disableItem(id + BORDERS_ID);
                ribbon.disableItem(id + LINE_SPACING_ID);
            }
            else {
                ribbon.enableItem(id + INCREASE_INDENT_ID);
                ribbon.enableItem(id + BULLET_LIST_ID);
                ribbon.enableItem(id + NUMBER_LIST_ID);
                ribbon.enableItem(id + BORDERS_ID);
                ribbon.enableItem(id + LINE_SPACING_ID);
            }
        }
    };
    HomeParagraphGroup.prototype.updateToggleButtonState = function (buttonId, isActive) {
        var buttonElement = document.getElementById(buttonId);
        if (buttonElement) {
            if (isActive) {
                buttonElement.classList.add('e-active');
            }
            else {
                buttonElement.classList.remove('e-active');
            }
        }
    };
    HomeParagraphGroup.prototype.updateSplitButtonState = function (buttonId, isActive) {
        var element = document.getElementById(buttonId);
        if (!element) {
            return;
        }
        var splitButton = getInstance(element, SplitButton);
        if (!splitButton) {
            return;
        }
        var isCurrentlyActive = /\be-active\b/.test(splitButton.cssClass);
        if (isCurrentlyActive) {
            splitButton.cssClass = splitButton.cssClass.replace(/\be-active\b/, '').replace(/\s{2,}/g, ' ').trim();
        }
        if (isActive) {
            splitButton.cssClass = (splitButton.cssClass + " e-active").trim();
        }
        splitButton.dataBind();
    };
    HomeParagraphGroup.prototype.leftAlignmentAction = function () {
        if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
            this.documentEditor.selection.paragraphFormat.textAlignment = 'Left';
        }
    };
    HomeParagraphGroup.prototype.centerAlignmentAction = function () {
        if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
            this.documentEditor.selection.paragraphFormat.textAlignment = 'Center';
        }
    };
    HomeParagraphGroup.prototype.rightAlignmentAction = function () {
        if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
            this.documentEditor.selection.paragraphFormat.textAlignment = 'Right';
        }
    };
    HomeParagraphGroup.prototype.justifyAction = function () {
        if (!this.documentEditor.isReadOnly && this.documentEditor.selection) {
            this.documentEditor.selection.paragraphFormat.textAlignment = 'Justify';
        }
    };
    HomeParagraphGroup.prototype.increaseIndentAction = function () {
        if (!this.documentEditor.isReadOnly && this.documentEditor.editor) {
            this.documentEditor.editor.increaseIndent();
        }
    };
    HomeParagraphGroup.prototype.decreaseIndentAction = function () {
        if (!this.documentEditor.isReadOnly && this.documentEditor.editor) {
            this.documentEditor.editor.decreaseIndent();
        }
    };
    HomeParagraphGroup.prototype.toggleHiddenMarks = function () {
        var _this = this;
        if (this.documentEditor) {
            this.container.documentEditor.documentEditorSettings.showHiddenMarks = !this.container.documentEditor.documentEditorSettings.showHiddenMarks;
            setTimeout(function () {
                _this.documentEditor.focusIn();
            }, 30);
        }
    };
    HomeParagraphGroup.prototype.bordersAction = function () {
        if (!this.documentEditor.isReadOnly) {
            this.documentEditor.showDialog('BordersAndShading');
        }
    };
    /**
     * Clean up resources when group is destroyed
     * @returns {void}
     * @private
     */
    HomeParagraphGroup.prototype.destroy = function () {
        if (this.bulletsGroup) {
            this.bulletsGroup.destroy();
            this.bulletsGroup = null;
        }
        if (this.numberingGroup) {
            this.numberingGroup.destroy();
            this.numberingGroup = null;
        }
        if (this.lineSpacingGroup) {
            this.lineSpacingGroup = null;
        }
    };
    return HomeParagraphGroup;
}(RibbonGroupBase));
export { HomeParagraphGroup };
