import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
import { RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { BulletListHelper } from '../../helper/bullet-list-helper';
// Bullet list constants
export var BULLET_LIST_ID = '_bullet_list';
/**
 * BulletsGroup class for handling bullet list operations in Document Editor ribbon
 * @private
 */
var BulletsGroup = /** @class */ (function () {
    /**
     * Constructor for BulletsGroup
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function BulletsGroup(container) {
        // Track the last applied bullet style
        this.appliedBulletStyle = 'dot';
        this.eventHandlers = {};
        // HTML Elements for bullet options
        this.bulletElements = {};
        this.container = container;
        this.ribbonId = this.container.element.id + RIBBON_ID;
        this.localObj = this.container.localObj;
    }
    Object.defineProperty(BulletsGroup.prototype, "documentEditor", {
        get: function () {
            return this.container.documentEditor;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Get the bullet list split button item configuration
     * @returns {RibbonItemModel} The ribbon item model for bullet list
     * @private
     */
    BulletsGroup.prototype.getBulletListItem = function () {
        var id = this.ribbonId;
        return {
            type: 'SplitButton',
            allowedSizes: RibbonItemSize.Small,
            keyTip: 'U',
            splitButtonSettings: this.createBulletSplitButton(),
            id: id + BULLET_LIST_ID,
            ribbonTooltipSettings: { content: this.localObj.getConstant('Bullets') }
        };
    };
    /**
     * Create bullet dropdown in ribbon
     * @returns {RibbonSplitButtonSettingsModel} SplitButtonModel configuration
     * @private
     */
    BulletsGroup.prototype.createBulletSplitButton = function () {
        var _this = this;
        var bulletIconCss = 'e-de-ctnr-bullets e-icons';
        if (this.container.enableRtl) {
            bulletIconCss += ' e-de-flip';
        }
        // Create the HTML template for bullets dropdown
        var bulletDropDiv = createElement('div', {
            id: this.ribbonId + '_bullet_list_div',
            styles: 'width: 196px;height: auto;visibility: hidden'
        });
        var bulletDropUlTag = createElement('ul', {
            styles: 'visibility: visible; outline: 0px;',
            id: this.ribbonId + '_listMenu',
            className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
        });
        bulletDropDiv.appendChild(bulletDropUlTag);
        // Create bullet list options using a more efficient approach
        this.createBulletElements(bulletDropUlTag);
        return {
            target: bulletDropDiv,
            iconCss: bulletIconCss,
            content: this.localObj.getConstant('Bullets'),
            items: this.getBulletItems(),
            select: this.handleBulletSelection.bind(this),
            beforeOpen: function () {
                bulletDropDiv.style.visibility = 'visible';
                if (!isNullOrUndefined(_this.documentEditor.selectionModule)) {
                    if (isNullOrUndefined(_this.documentEditor.selectionModule.paragraphFormat.listId) ||
                        _this.documentEditor.selectionModule.paragraphFormat.listId === -1) {
                        // No current list format
                        _this.updateSelectedBulletListType(_this.documentEditor.selectionModule.paragraphFormat.listText);
                    }
                    else {
                        // Get current bullet list format
                        var startParagraph = _this.documentEditor.selectionModule.isForward ?
                            _this.documentEditor.selectionModule.start.paragraph : _this.documentEditor.selectionModule.end.paragraph;
                        _this.updateSelectedBulletListType(startParagraph.paragraphFormat.listFormat.listLevel.numberFormat);
                    }
                }
            },
            beforeClose: function () {
                bulletDropDiv.style.visibility = 'hidden';
                _this.removeSelectedList();
            },
            click: function () {
                _this.applyLastAppliedBullet();
            },
            close: function () {
                _this.refreshHomeSelection();
            }
        };
    };
    BulletsGroup.prototype.createBulletElements = function (ulTag) {
        var _this = this;
        // Define bullet types with their properties
        var bulletTypes = [
            { key: 'none', cssClass: 'e-de-ctnr-bullet-none e-icons e-de-ctnr-list', isNone: true, handler: this.bulletNoneClick.bind(this) },
            { key: 'dot', cssClass: 'e-de-ctnr-bullet-dot e-icons e-de-ctnr-list', isNone: false, handler: this.bulletDotClick.bind(this) },
            { key: 'circle', cssClass: 'e-de-ctnr-bullet-circle e-icons e-de-ctnr-list', isNone: false, handler: this.bulletCircleClick.bind(this) },
            { key: 'square', cssClass: 'e-de-ctnr-bullet-square e-icons e-de-ctnr-list', isNone: false, handler: this.bulletSquareClick.bind(this) },
            { key: 'flower', cssClass: 'e-de-ctnr-bullet-flower e-icons e-de-ctnr-list', isNone: false, handler: this.bulletFlowerClick.bind(this) },
            { key: 'arrow', cssClass: 'e-de-ctnr-bullet-arrow e-icons e-de-ctnr-list', isNone: false, handler: this.bulletArrowClick.bind(this) },
            { key: 'tick', cssClass: 'e-de-ctnr-bullet-tick e-icons e-de-ctnr-list', isNone: false, handler: this.bulletTickClick.bind(this) }
        ];
        // Create all elements and store them
        bulletTypes.forEach(function (type) {
            var element = _this.createBulletListTag(ulTag, type.cssClass, type.isNone);
            element.addEventListener('click', type.handler);
            _this.bulletElements[type.key] = element;
            _this.eventHandlers[type.key] = { element: element, handler: type.handler };
        });
    };
    BulletsGroup.prototype.getBulletItems = function () {
        return [
            { id: this.ribbonId + '_bullet-none', text: this.localObj.getConstant('None') },
            { id: this.ribbonId + '_bullet-dot', text: this.localObj.getConstant('Dot') },
            { id: this.ribbonId + '_bullet-circle', text: this.localObj.getConstant('Circle') },
            { id: this.ribbonId + '_bullet-square', text: this.localObj.getConstant('Square') },
            { id: this.ribbonId + '_bullet-flower', text: this.localObj.getConstant('Flower') },
            { id: this.ribbonId + '_bullet-arrow', text: this.localObj.getConstant('Arrow') },
            { id: this.ribbonId + '_bullet-tick', text: this.localObj.getConstant('Tick') }
        ];
    };
    BulletsGroup.prototype.createBulletListTag = function (ulTag, iconCss, isNone) {
        return BulletListHelper.createBulletListTag(ulTag, iconCss, isNone, this.localObj);
    };
    BulletsGroup.prototype.updateSelectedBulletListType = function (listText) {
        BulletListHelper.updateSelectedBulletListType(listText, this.bulletElements);
    };
    BulletsGroup.prototype.removeSelectedList = function () {
        BulletListHelper.removeSelectedList(this.bulletElements);
    };
    /**
     * Apply the last used bullet style
     * @returns {void}
     * @private
     */
    BulletsGroup.prototype.applyLastAppliedBullet = function () {
        this.applyBulletStyle(this.appliedBulletStyle);
    };
    /**
     * Handle bullet style selection from dropdown
     * @param {any} args - The event arguments
     * @returns {void}
     * @private
     */
    BulletsGroup.prototype.handleBulletSelection = function (args) {
        var styleMap = {};
        styleMap[this.localObj.getConstant('None')] = 'none';
        styleMap[this.localObj.getConstant('Dot')] = 'dot';
        styleMap[this.localObj.getConstant('Circle')] = 'circle';
        styleMap[this.localObj.getConstant('Square')] = 'square';
        styleMap[this.localObj.getConstant('Flower')] = 'flower';
        styleMap[this.localObj.getConstant('Arrow')] = 'arrow';
        styleMap[this.localObj.getConstant('Tick')] = 'tick';
        var style = styleMap[args.item.text];
        if (style) {
            this.applyBulletStyle(style);
        }
    };
    BulletsGroup.prototype.applyBulletStyle = function (style) {
        var appliedStyle = { value: this.appliedBulletStyle };
        BulletListHelper.applyBulletStyle(this.documentEditor, style, appliedStyle);
        this.appliedBulletStyle = appliedStyle.value;
        this.refreshHomeSelection();
    };
    BulletsGroup.prototype.bulletNoneClick = function () {
        BulletListHelper.clearList(this.documentEditor);
        this.refreshHomeSelection();
    };
    BulletsGroup.prototype.bulletDotClick = function () {
        this.applyBulletStyle('dot');
    };
    BulletsGroup.prototype.bulletCircleClick = function () {
        this.applyBulletStyle('circle');
    };
    BulletsGroup.prototype.bulletSquareClick = function () {
        this.applyBulletStyle('square');
    };
    BulletsGroup.prototype.bulletFlowerClick = function () {
        this.applyBulletStyle('flower');
    };
    BulletsGroup.prototype.bulletArrowClick = function () {
        this.applyBulletStyle('arrow');
    };
    BulletsGroup.prototype.bulletTickClick = function () {
        this.applyBulletStyle('tick');
    };
    BulletsGroup.prototype.destroy = function () {
        // 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 item = this.eventHandlers[key];
            if (item.element && item.handler) {
                item.element.removeEventListener('click', item.handler);
            }
        }
        // Clear references
        this.eventHandlers = {};
        this.bulletElements = {};
    };
    BulletsGroup.prototype.refreshHomeSelection = function () {
        var ribbonModule = this.container.ribbonModule;
        if (ribbonModule && ribbonModule.tabManager && ribbonModule.tabManager.homeTab) {
            ribbonModule.tabManager.homeTab.updateSelection();
        }
    };
    return BulletsGroup;
}());
export { BulletsGroup };
