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 { createElement, getInstance, isNullOrUndefined } from '@syncfusion/ej2-base';
import { FontHelper } from '../../helper/font-helper';
import { ComboBox } from '@syncfusion/ej2-dropdowns';
// Font group constants
export var FONT_GROUP_ID = '_font_group';
export var FONT_FAMILY_ID = '_font_family';
export var FONT_SIZE_ID = '_font_size';
export var BOLD_ID = '_bold';
export var ITALIC_ID = '_italic';
export var UNDERLINE_ID = '_underline';
export var STRIKETHROUGH_ID = '_strikethrough';
export var SUPERSCRIPT_ID = '_superscript';
export var SUBSCRIPT_ID = '_subscript';
export var FONT_COLOR_ID = '_font_color';
export var HIGHLIGHT_COLOR_ID = '_highlight_color';
export var CLEAR_FORMAT_ID = '_clear_format';
export var GROW_FONT_ID = '_grow_format';
export var SHRINK_FONT_ID = '_shrink_format';
export var CHANGE_CASE_ID = '_change_case';
/**
 * FontGroup class for handling font formatting operations in Document Editor ribbon
 * @private
 */
var FontGroup = /** @class */ (function (_super) {
    __extends(FontGroup, _super);
    function FontGroup() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.appliedHighlightColor = 'rgb(255, 255, 0)';
        _this.highlightColorHandlers = [];
        return _this;
    }
    /**
     * Get the Ribbon group model for Font formatting
     * @returns {RibbonGroupModel} - Ribbon group model for Font formatting
     * @private
     */
    FontGroup.prototype.getGroupModel = function () {
        var _this = this;
        var id = this.ribbonId;
        return {
            id: id + FONT_GROUP_ID,
            cssClass: 'e-font-group',
            groupIconCss: 'e-icons e-de-ctnr-fontcolor',
            header: this.localObj.getConstant('Font'),
            isCollapsible: false,
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('More Font Options'),
            orientation: 'Row',
            showLauncherIcon: true,
            launcherIconKeyTip: 'FG',
            collections: [
                {
                    id: id + '_font-collection',
                    items: [
                        {
                            type: 'ComboBox',
                            keyTip: 'FF',
                            allowedSizes: RibbonItemSize.Small,
                            comboBoxSettings: {
                                dataSource: this.container.documentEditorSettings.fontFamilies,
                                label: this.localObj.getConstant('Font'),
                                width: '150px',
                                popupHeight: '250px',
                                popupWidth: '150px',
                                cssClass: 'e-de-prop-dropdown',
                                allowFiltering: true,
                                change: function () {
                                    _this.changeFontFamily();
                                }
                            },
                            id: id + FONT_FAMILY_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Font') }
                        },
                        {
                            type: 'ComboBox',
                            keyTip: 'FS',
                            allowedSizes: RibbonItemSize.Small,
                            comboBoxSettings: {
                                label: this.localObj.getConstant('Font Size'),
                                dataSource: ['8', '9', '10', '11', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72', '96'],
                                width: '65px',
                                cssClass: 'e-de-prop-dropdown',
                                showClearButton: false,
                                change: function () {
                                    _this.changeFontSize();
                                }
                            },
                            id: id + FONT_SIZE_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Font Size') }
                        }, {
                            type: 'Button',
                            keyTip: 'FG',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Grow Font Size'),
                                iconCss: 'e-icons e-de-ctnr-increase-fontsize',
                                clicked: function () {
                                    _this.increaseFontSize();
                                }
                            },
                            id: id + GROW_FONT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Grow Font Size') }
                        },
                        {
                            type: 'Button',
                            keyTip: 'FK',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Shrink Font Size'),
                                iconCss: 'e-icons e-de-ctnr-decrease-fontsize',
                                clicked: function () {
                                    _this.decreaseFontSize();
                                }
                            },
                            id: id + SHRINK_FONT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Shrink Font Size') }
                        }, {
                            type: 'DropDown',
                            keyTip: 'CC',
                            allowedSizes: RibbonItemSize.Small,
                            dropDownSettings: {
                                iconCss: 'e-icons e-de-ctnr-change-case',
                                content: this.localObj.getConstant('Change case Tooltip'),
                                items: FontHelper.getChangeCaseItems(this.localObj, id),
                                select: function (args) {
                                    _this.changeCaseAction(args);
                                }
                            },
                            id: id + CHANGE_CASE_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Change case Tooltip') }
                        }
                    ]
                }, {
                    items: [{
                            type: 'Button',
                            keyTip: '1',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Bold Tooltip'),
                                cssClass: 'e-de-icon-Bold',
                                iconCss: 'e-icons e-de-ctnr-bold',
                                isToggle: true,
                                clicked: function () {
                                    _this.boldAction();
                                }
                            },
                            id: id + BOLD_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Bold Tooltip') }
                        },
                        {
                            type: 'Button',
                            keyTip: '2',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Italic Tooltip'),
                                cssClass: 'e-de-icon-Italic',
                                iconCss: 'e-icons e-de-ctnr-italic',
                                isToggle: true,
                                clicked: function () {
                                    _this.italicAction();
                                }
                            },
                            id: id + ITALIC_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Italic Tooltip') }
                        },
                        {
                            type: 'Button',
                            keyTip: '3',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Underline Tooltip'),
                                cssClass: 'e-de-icon-Underline',
                                iconCss: 'e-icons e-de-ctnr-underline',
                                isToggle: true,
                                clicked: function () {
                                    _this.underlineAction();
                                }
                            },
                            id: id + UNDERLINE_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Underline Tooltip') }
                        },
                        {
                            type: 'Button',
                            keyTip: '4',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Strikethrough'),
                                cssClass: 'e-de-icon-Strikethrough',
                                iconCss: 'e-icons e-de-ctnr-strikethrough',
                                isToggle: true,
                                clicked: function () {
                                    _this.strikethroughAction();
                                }
                            },
                            id: id + STRIKETHROUGH_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Strikethrough') }
                        },
                        {
                            type: 'Button',
                            keyTip: '5',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Superscript Tooltip'),
                                cssClass: 'e-de-icon-Superscript',
                                iconCss: 'e-icons e-de-ctnr-superscript',
                                isToggle: true,
                                clicked: function () {
                                    _this.superscriptAction();
                                }
                            },
                            id: id + SUPERSCRIPT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Superscript Tooltip') }
                        },
                        {
                            type: 'Button',
                            keyTip: '6',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Subscript Tooltip'),
                                cssClass: 'e-de-icon-Subscript',
                                iconCss: 'e-icons e-de-ctnr-subscript',
                                isToggle: true,
                                clicked: function () {
                                    _this.subscriptAction();
                                }
                            },
                            id: id + SUBSCRIPT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Subscript Tooltip') }
                        },
                        {
                            type: 'ColorPicker',
                            keyTip: 'I',
                            allowedSizes: RibbonItemSize.Small,
                            colorPickerSettings: {
                                label: this.localObj.getConstant('Font color'),
                                htmlAttributes: { 'aria-label': this.localObj.getConstant('Font color') },
                                value: '#000000',
                                change: function (args) {
                                    _this.changeFontColor(args);
                                }
                            },
                            id: id + FONT_COLOR_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Font color') }
                        },
                        {
                            type: 'SplitButton',
                            keyTip: 'FC',
                            allowedSizes: RibbonItemSize.Small,
                            splitButtonSettings: this.createHighlightColorSplitButton(),
                            id: id + HIGHLIGHT_COLOR_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Text highlight color') }
                        },
                        {
                            type: 'Button',
                            keyTip: 'E',
                            allowedSizes: RibbonItemSize.Small,
                            buttonSettings: {
                                content: this.localObj.getConstant('Clear all formatting'),
                                iconCss: 'e-icons e-de-ctnr-clearall',
                                clicked: function () {
                                    _this.clearFormatAction();
                                }
                            },
                            id: id + CLEAR_FORMAT_ID,
                            ribbonTooltipSettings: { content: this.localObj.getConstant('Clear all formatting') }
                        }
                    ]
                }
            ]
        };
    };
    /**
     * Update font UI based on selection state
     * @returns {void}
     * @private
     */
    FontGroup.prototype.updateSelection = function () {
        // Get the selection character format
        if (!this.documentEditor.selection) {
            return;
        }
        var characterFormat = this.documentEditor.selection.characterFormat;
        var id = this.ribbonId;
        // Update toggle buttons
        this.updateToggleButtonState(id + BOLD_ID, characterFormat.bold);
        this.updateToggleButtonState(id + ITALIC_ID, characterFormat.italic);
        this.updateToggleButtonState(id + UNDERLINE_ID, characterFormat.underline !== 'None');
        this.updateToggleButtonState(id + STRIKETHROUGH_ID, characterFormat.strikethrough !== 'None');
        this.updateToggleButtonState(id + SUPERSCRIPT_ID, characterFormat.baselineAlignment === 'Superscript');
        this.updateToggleButtonState(id + SUBSCRIPT_ID, characterFormat.baselineAlignment === 'Subscript');
        // Update font family dropdown
        if (characterFormat.fontFamily) {
            var fontFamily = void 0;
            if (!isNullOrUndefined(characterFormat.renderedFontFamily) &&
                !isNullOrUndefined(characterFormat.fontFamily)) {
                fontFamily = characterFormat.renderedFontFamily;
            }
            else {
                fontFamily = characterFormat.fontFamily;
            }
            var fontFamilyElement = document.getElementById(id + FONT_FAMILY_ID);
            if (fontFamilyElement) {
                fontFamilyElement.value = fontFamily;
            }
        }
        else {
            var fontFamilyElement = document.getElementById(id + FONT_FAMILY_ID);
            if (fontFamilyElement) {
                var fontFamilyInstance = getInstance(fontFamilyElement, ComboBox);
                fontFamilyInstance.value = null;
                fontFamilyElement.value = null;
            }
        }
        // Update font size dropdown
        if (characterFormat.fontSize) {
            var fontSize = characterFormat.fontSize.toString();
            var fontSizeElement = document.getElementById(id + FONT_SIZE_ID);
            if (fontSizeElement) {
                var fontSizeInstance = getInstance(fontSizeElement, ComboBox);
                fontSizeInstance.value = fontSize;
            }
        }
        else {
            var fontSizeElement = document.getElementById(id + FONT_SIZE_ID);
            if (fontSizeElement) {
                var fontSizeInstance = getInstance(fontSizeElement, ComboBox);
                fontSizeInstance.value = null;
                fontSizeElement.value = null;
            }
        }
        // Update highlight color button
        if (characterFormat.highlightColor) {
            var highlightColor = document.getElementById(id + HIGHLIGHT_COLOR_ID);
            if (highlightColor) {
                var highlightColorElement = highlightColor.querySelector('.e-split-btn-icon');
                if (highlightColorElement) {
                    highlightColorElement.style.backgroundColor = this.getBackgroundColorFromHighlightColor(characterFormat.highlightColor);
                }
            }
        }
        // Update font color button
        if (characterFormat.fontColor) {
            var fontColor = characterFormat.fontColor;
            if (fontColor === 'empty' || fontColor === '#00000000') {
                fontColor = '#000000';
            }
            var fontColorElement = document.getElementById(id + FONT_COLOR_ID);
            if (fontColorElement) {
                var fontColorInput = fontColorElement.querySelector('input');
                if (fontColorInput) {
                    fontColorInput.value = fontColor;
                }
            }
        }
    };
    FontGroup.prototype.updateToggleButtonState = function (buttonId, isActive) {
        // Use Ribbon's getItem method for better performance
        var ribbonObj = this.container.ribbon.ribbon;
        if (ribbonObj) {
            var button = document.getElementById(buttonId);
            if (button) {
                if (isActive) {
                    button.classList.add('e-active');
                    button.setAttribute('aria-pressed', 'true');
                }
                else {
                    button.classList.remove('e-active');
                    button.setAttribute('aria-pressed', 'false');
                }
            }
        }
    };
    FontGroup.prototype.getHighlightColorItems = function () {
        return FontHelper.getHighlightColorItems(this.localObj, this.ribbonId);
    };
    FontGroup.prototype.createHighlightColorSplitButton = function () {
        var _this = this;
        var highlightIconCss = 'e-de-ctnr-highlight e-icons';
        if (this.isRtl) {
            highlightIconCss += ' e-de-flip';
        }
        var colorListDropDiv = createElement('div', {
            id: this.ribbonId + '_color_list_div',
            styles: 'visibility: hidden'
        });
        // Create the HTML template for highlight color dropdown
        var highlightColorElement = createElement('ul', {
            id: this.ribbonId + '_ribbon_highlight_color',
            styles: 'visibility: visible; display: grid; grid-template-columns: repeat(5,1fr); padding: 2px 2px; box-shadow: none'
        });
        colorListDropDiv.appendChild(highlightColorElement);
        var highlightColors = this.getHighlightColorItems();
        highlightColors.forEach(function (color) {
            var colorDiv = createElement('li', { className: 'e-de-ctnr-hglt-btn' });
            colorDiv.style.backgroundColor = color.backgroundColor;
            highlightColorElement.appendChild(colorDiv);
            // Create bound handler and store reference
            var handler = _this.onHighlightColorClick.bind(_this, color.backgroundColor);
            colorDiv.addEventListener('click', handler);
            _this.highlightColorHandlers.push({ element: colorDiv, handler: handler });
        });
        var noColorList = createElement('ul', { styles: 'visibility: visible; padding:2px' });
        var noColorListItem = createElement('li', { className: 'e-hglt-no-color' });
        colorListDropDiv.appendChild(noColorList);
        noColorList.appendChild(noColorListItem);
        var noColorDiv = createElement('div', { styles: 'width:24px;height:24px;background-color:#ffffff;margin:3px;', id: 'noColorDiv' });
        noColorListItem.appendChild(noColorDiv);
        var noColorLabel = createElement('div', { innerHTML: this.localObj.getConstant('No color'), className: 'e-de-ctnr-hglt-no-color' });
        noColorDiv.appendChild(noColorLabel);
        noColorDiv.addEventListener('click', this.onHighlightColorClick.bind(this, 'transparent'));
        // Create bound handler and store reference
        var noColorHandler = this.onHighlightColorClick.bind(this, 'transparent');
        noColorDiv.addEventListener('click', noColorHandler);
        this.highlightColorHandlers.push({ element: noColorDiv, handler: noColorHandler });
        return {
            target: colorListDropDiv,
            iconCss: highlightIconCss,
            content: this.localObj.getConstant('Text highlight color'),
            // cssClass: this.splitButtonClass,
            htmlAttributes: { 'aria-label': this.localObj.getConstant('Text highlight color') },
            items: this.getHighlightColorItems().map(function (color) { return ({ id: color.id, text: color.text }); }),
            select: function (args) {
                _this.applyHighlightColor(args.item.backgroundColor);
            },
            beforeOpen: function () {
                colorListDropDiv.style.visibility = 'visible';
            },
            beforeClose: function () {
                colorListDropDiv.style.visibility = 'hidden';
            },
            click: function () {
                _this.applyHighlightColor(_this.appliedHighlightColor);
            }
        };
    };
    FontGroup.prototype.onHighlightColorClick = function (color, event) {
        this.applyHighlightColor(color);
        // Remove the 'e-color-selected' class from all children
        var container = event.currentTarget.closest('#' + this.ribbonId + '_color_list_div')
            || document.getElementById(this.ribbonId + '_color_list_div')
            || event.currentTarget.parentElement;
        if (container) {
            container.querySelectorAll('.e-color-selected').forEach(function (el) {
                el.classList.remove('e-color-selected');
            });
        }
        // Add the 'e-color-selected' class to the clicked element
        event.currentTarget.classList.add('e-color-selected');
    };
    FontGroup.prototype.applyHighlightColor = function (color) {
        this.appliedHighlightColor = FontHelper.applyHighlightColor(this.documentEditor, color);
    };
    FontGroup.prototype.getBackgroundColorFromHighlightColor = function (highlightColor) {
        return FontHelper.getBackgroundColorFromHighlightColor(highlightColor);
    };
    FontGroup.prototype.boldAction = function () {
        FontHelper.applyFontFormatting(this.documentEditor, 'bold');
    };
    FontGroup.prototype.italicAction = function () {
        FontHelper.applyFontFormatting(this.documentEditor, 'italic');
    };
    FontGroup.prototype.underlineAction = function () {
        FontHelper.applyFontFormatting(this.documentEditor, 'underline');
    };
    FontGroup.prototype.strikethroughAction = function () {
        FontHelper.applyFontFormatting(this.documentEditor, 'strikethrough');
    };
    FontGroup.prototype.superscriptAction = function () {
        FontHelper.applyFontFormatting(this.documentEditor, 'superscript');
    };
    FontGroup.prototype.subscriptAction = function () {
        FontHelper.applyFontFormatting(this.documentEditor, 'subscript');
    };
    FontGroup.prototype.changeCaseAction = function (args) {
        FontHelper.applyChangeCase(this.documentEditor, this.localObj, args.item.text);
    };
    FontGroup.prototype.changeFontFamily = function () {
        var fontFamilyElement = document.getElementById(this.ribbonId + FONT_FAMILY_ID);
        if (fontFamilyElement) {
            var fontFamily = fontFamilyElement.value;
            FontHelper.changeFontFamily(this.documentEditor, fontFamily);
        }
    };
    FontGroup.prototype.changeFontSize = function () {
        var fontSizeElement = document.getElementById(this.ribbonId + FONT_SIZE_ID);
        if (fontSizeElement) {
            var fontSize = fontSizeElement.value;
            FontHelper.changeFontSize(this.documentEditor, fontSize);
        }
    };
    FontGroup.prototype.changeFontColor = function (args) {
        FontHelper.changeFontColor(this.documentEditor, args.currentValue.hex);
    };
    FontGroup.prototype.clearFormatAction = function () {
        FontHelper.applyFontFormatting(this.documentEditor, 'clearFormat');
    };
    FontGroup.prototype.increaseFontSize = function () {
        FontHelper.increaseFontSize(this.documentEditor);
    };
    FontGroup.prototype.decreaseFontSize = function () {
        FontHelper.decreaseFontSize(this.documentEditor);
    };
    FontGroup.prototype.destroy = function () {
        // Remove highlight color event listeners
        this.highlightColorHandlers.forEach(function (item) {
            if (item.element && item.handler) {
                item.element.removeEventListener('click', item.handler);
            }
        });
        this.highlightColorHandlers = [];
    };
    return FontGroup;
}(RibbonGroupBase));
export { FontGroup };
