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 { StylesHelper } from '../../helper/styles-helper';
import { SanitizeHtmlHelper, isNullOrUndefined } from '@syncfusion/ej2-base';
// Styles group constants
export var STYLES_GROUP_ID = '_styles_group';
/**
 * StylesGroup class for handling style operations in Document Editor ribbon
 * @private
 */
var StylesGroup = /** @class */ (function (_super) {
    __extends(StylesGroup, _super);
    function StylesGroup() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    /**
     * Get the Ribbon group model for Styles
     * @returns {RibbonGroupModel} - Ribbon group model
     * @private
     */
    StylesGroup.prototype.getGroupModel = function () {
        var _this = this;
        var id = this.ribbonId;
        return {
            id: id + STYLES_GROUP_ID,
            cssClass: 'e-styles-group',
            header: this.localObj.getConstant('Styles'),
            enableGroupOverflow: true,
            keyTip: 'L',
            overflowHeader: this.localObj.getConstant('Styles'),
            groupIconCss: 'e-icons e-de-ctnr-paste',
            orientation: 'Row',
            showLauncherIcon: true,
            launcherIconKeyTip: 'FY',
            collections: [
                {
                    id: this.ribbonId + '_style-gallery',
                    items: [
                        {
                            type: 'Gallery',
                            gallerySettings: {
                                groups: [
                                    {
                                        header: this.localObj.getConstant('Styles'),
                                        items: this.getStyleItems()
                                    }
                                ],
                                itemCount: 3,
                                select: function (args) {
                                    if (!_this.documentEditor.isReadOnly && _this.documentEditor.editorModule) {
                                        var styleName = _this.documentEditor.stylesDialogModule.getStyleName(SanitizeHtmlHelper.sanitize(args.currentItem.content));
                                        if (!isNullOrUndefined(_this.documentEditor.documentHelper.styles.findByName(styleName))) {
                                            _this.documentEditor.editorModule.applyStyle(styleName, true);
                                        }
                                    }
                                },
                                popupWidth: '150px',
                                popupHeight: '300px'
                            },
                            id: this.ribbonId + '_style-item-gallery',
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Styles') }
                        }
                    ]
                }
            ]
        };
    };
    StylesGroup.prototype.getStyleItems = function () {
        return StylesHelper.getStyleItems(this.documentEditor, this.localObj);
    };
    // Update the updateStyleGallery method
    StylesGroup.prototype.updateStyleGallery = function () {
        if (!this.container || !this.container.ribbon || !this.container.ribbon.ribbon) {
            return;
        }
        var galleryItem = this.container.ribbon.ribbon.getItem(this.ribbonId + '_style-item-gallery');
        if (!galleryItem || !galleryItem.gallerySettings || !galleryItem.gallerySettings.groups) {
            return;
        }
        var prevItemLength = galleryItem.gallerySettings.groups[0].items.length;
        // Update gallery items using the helper
        galleryItem.gallerySettings.groups[0].items = StylesHelper.getStyleItems(this.documentEditor, this.localObj);
        // Set the selected item based on current selection
        var currentStyle = StylesHelper.getCurrentStyleName(this.documentEditor, this.localObj);
        var prevSelectedItemIndex = galleryItem.gallerySettings.selectedItemIndex;
        galleryItem.gallerySettings.selectedItemIndex = StylesHelper.findStyleIndex(currentStyle, galleryItem.gallerySettings.groups[0].items);
        if (prevSelectedItemIndex !== galleryItem.gallerySettings.selectedItemIndex
            || prevItemLength !== galleryItem.gallerySettings.groups[0].items.length
            || (this.container.documentEditor && this.container.documentEditor.editorHistory
                && this.container.documentEditor.editorHistory.lastOperation
                && this.container.documentEditor.editorHistory.lastOperation.action === 'ModifyStyle')) {
            // Update the gallery
            this.container.ribbon.ribbon.updateItem(galleryItem);
        }
    };
    return StylesGroup;
}(RibbonGroupBase));
export { StylesGroup };
