import { createElement, isNullOrUndefined, classList, L10n, initializeCSPTemplate } from '@syncfusion/ej2-base';
import { ComboBox } from '@syncfusion/ej2-dropdowns';
import { Button } from '@syncfusion/ej2-buttons';
import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
import { Query } from '@syncfusion/ej2-data';
import { BulletListHelper } from '../helper/bullet-list-helper';
import { LineSpacingHelper } from '../helper/line-spacing-helper';
import { StylesHelper } from '../helper/styles-helper';
/**
 * Paragraph Properties
 *
 * @private
 */
var Paragraph = /** @class */ (function () {
    function Paragraph(container) {
        //Event Handlers
        this.numberedAndBulletNoneClickHandler = this.numberedNoneClick.bind(this);
        this.numberedNumberDotClickHandler = this.numberedNumberDotClick.bind(this);
        this.numberedLowLetterClickHandler = this.numberedLowLetterClick.bind(this);
        this.numberedUpLetterClickHandler = this.numberedUpLetterClick.bind(this);
        this.numberedLowRomanClickHandler = this.numberedLowRomanClick.bind(this);
        this.numberedUpRomanClickHandler = this.numberedUpRomanClick.bind(this);
        this.numberSplitButtonBeforeOpenHandler = this.numberSplitButtonBeforeOpen.bind(this);
        this.bulletDotClickHandler = this.bulletDotClick.bind(this);
        this.bulletCircleClickHandler = this.bulletCircleClick.bind(this);
        this.bulletSquareClickHandler = this.bulletSquareClick.bind(this);
        this.bulletFlowerClickHandler = this.bulletFlowerClick.bind(this);
        this.bulletArrowClickHandler = this.bulletArrowClick.bind(this);
        this.bulletTickClickHandler = this.bulletTickClick.bind(this);
        this.onrightAlignmentClickHandler = this.onrightAlignmentClick.bind(this);
        this.isRetrieving = false;
        this.appliedBulletStyle = 'dot';
        this.appliedNumberingStyle = 'arabic';
        this.appliedLineSpacing = '';
        this.splitButtonClass = 'e-de-prop-splitbutton';
        this.container = container;
    }
    Object.defineProperty(Paragraph.prototype, "documentEditor", {
        get: function () {
            return this.container.documentEditor;
        },
        enumerable: true,
        configurable: true
    });
    Paragraph.prototype.initializeParagraphPropertiesDiv = function (wholeDiv, isRtl) {
        this.localObj = new L10n('documenteditorcontainer', this.container.defaultLocale, this.container.locale);
        this.isRtl = isRtl;
        if (this.isRtl) {
            this.splitButtonClass = 'e-rtl ' + this.splitButtonClass;
        }
        this.textProperties = wholeDiv;
        var element = this.documentEditor.element.id + '_font_properties';
        this.paragraphDiv = this.createDivElement(element + '_paragraph', wholeDiv, '');
        classList(this.paragraphDiv, ['e-de-cntr-pane-padding'], []);
        this.label = createElement('label', { className: 'e-de-ctnr-prop-label' });
        this.label.innerHTML = this.localObj.getConstant('Paragraph');
        this.paragraphDiv.appendChild(this.label);
        this.styleDiv = this.createDivElement(element + '_styleDiv', this.paragraphDiv);
        this.styleDiv.classList.add('e-de-ctnr-segment', 'e-de-ctnr-style-div');
        this.styleSelect = createElement('input', { id: element + '_style', styles: 'width:248px;letter-spacing: 0.05px;' });
        this.styleDiv.appendChild(this.styleSelect);
        this.createStyleDropDownList(this.styleSelect);
        this.indentWholeDiv = this.createDivElement(element + '_indentWholeDiv', this.paragraphDiv);
        this.indentWholeDiv.style.display = 'flex';
        this.indentWholeDiv.classList.add('e-de-ctnr-segment');
        if (isRtl) {
            classList(this.indentWholeDiv, ['e-de-ctnr-segment-rtl'], []);
        }
        this.indentDiv = this.createDivElement(element + '_indentDiv', this.indentWholeDiv, 'display:flex;');
        var indentClassName = 'e-de-ctnr-group-btn e-de-char-fmt-btn-left e-btn-group';
        if (isRtl) {
            indentClassName = 'e-rtl ' + indentClassName;
        }
        this.indentDiv.className = indentClassName;
        this.leftAlignment = this.createButtonTemplate(element + '_leftIndent', 'e-de-ctnr-alignleft e-icons', this.indentDiv, 'e-de-prop-indent-button', '40.5', 'Align left Tooltip');
        this.centerAlignment = this.createButtonTemplate(element + '_centerIndent', 'e-de-ctnr-aligncenter e-icons', this.indentDiv, 'e-de-prop-indent-button', '40.5', 'Center Tooltip');
        this.rightAlignment = this.createButtonTemplate(element + '_rightIndent', 'e-de-ctnr-alignright e-icons', this.indentDiv, 'e-de-prop-indent-button', '40.5', 'Align right Tooltip');
        this.justify = this.createButtonTemplate(element + '_justify', 'e-de-ctnr-justify e-icons', this.indentDiv, 'e-de-prop-indent-last-button', '40.5', 'Justify Tooltip');
        var increaseIndentIconCss = 'e-de-ctnr-increaseindent e-icons';
        var decreaseIndentIconCss = 'e-de-ctnr-decreaseindent e-icons';
        this.incDecIndentDiv = this.createDivElement(element + '_lineindentDiv', this.indentWholeDiv, 'display:flex;');
        indentClassName = 'e-de-ctnr-group-btn e-de-char-fmt-btn-right e-btn-group';
        if (isRtl) {
            indentClassName = 'e-rtl ' + indentClassName;
            increaseIndentIconCss += ' e-de-flip';
            decreaseIndentIconCss += ' e-de-flip';
        }
        this.incDecIndentDiv.className = indentClassName;
        this.decreaseIndent = this.createButtonTemplate(element + '_decreaseIndent', decreaseIndentIconCss, this.incDecIndentDiv, 'e-de-prop-indent-button', '37', 'Decrease indent');
        this.increaseIndent = this.createButtonTemplate(element + '_increaseIndent', increaseIndentIconCss, this.incDecIndentDiv, 'e-de-prop-indent-last-button', '37', 'Increase indent');
        this.listDiv = this.createDivElement(element + '_listDiv', this.paragraphDiv, 'display:flex;');
        this.paraDiv = this.createDivElement(element + '_paraDiv', this.paragraphDiv, 'display:flex');
        classList(this.listDiv, ['e-de-ctnr-segment', 'e-de-ctnr-group-btn'], []);
        classList(this.paraDiv, ['e-de-ctnr-segment', 'e-de-ctnr-group-btn'], []);
        if (isRtl) {
            classList(this.listDiv, ['e-de-ctnr-segment-rtl', 'e-de-ctnr-group-btn'], []);
            classList(this.paraDiv, ['e-de-ctnr-segment-rtl', 'e-de-ctnr-group-btn'], []);
        }
        this.lineHeight = createElement('button', { id: element + '_lineHeight', attrs: { type: 'button' } });
        this.listDiv.appendChild(this.lineHeight);
        this.lineSpacing = this.createLineSpacingDropdown(this.lineHeight);
        this.listDropDown = this.createDivElement(element + '_listDropDiv', this.listDiv);
        classList(this.listDropDown, ['de-split-button', 'e-de-ctnr-segment-list'], []);
        if (isRtl) {
            classList(this.listDropDown, ['e-de-ctnr-segment-list-rtl'], []);
        }
        this.bulletButton = createElement('button', { id: element + '_bullet', attrs: { type: 'button' } });
        this.listDropDown.appendChild(this.bulletButton);
        this.numberingList = createElement('button', { id: element + '_numberingList', attrs: { type: 'button' } });
        this.listDropDown.appendChild(this.numberingList);
        var bulletIconCss = 'e-de-ctnr-bullets e-icons';
        var numberIconCss = 'e-de-ctnr-numbering e-icons';
        if (isRtl) {
            bulletIconCss += ' e-de-flip';
            numberIconCss += ' e-de-flip';
        }
        this.createBulletListDropButton(bulletIconCss, this.bulletButton);
        this.createNumberListDropButton(numberIconCss, this.numberingList);
        this.borders = this.createButtonTemplate(element + '_borders', 'e-de-ctnr-borders e-icons', this.paraDiv, 'e-de-ctnr-group-btn', '37', 'Borders');
        this.showHiddenMarks = this.createButtonTemplate(element + '_paraMark', 'e-de-e-paragraph-mark e-icons', this.paraDiv, 'e-de-ctnr-group-btn', '37', 'ShowHiddenMarks Tooltip');
    };
    Paragraph.prototype.createSeparator = function (parentDiv) {
        var separator = createElement('div', { className: 'e-de-prop-vline' });
        parentDiv.appendChild(separator);
    };
    Paragraph.prototype.createDivElement = function (id, parentDiv, style) {
        var element;
        if (style) {
            element = createElement('div', { id: id, styles: style });
        }
        else {
            element = createElement('div', { id: id });
        }
        parentDiv.appendChild(element);
        return element;
    };
    /* eslint-disable-next-line max-len */
    Paragraph.prototype.createButtonTemplate = function (id, iconcss, div, buttonClass, width, toolTipText) {
        var buttonElement = createElement('Button', { id: id, attrs: { type: 'button' } });
        // buttonElement.style.width = width + 'px';
        // buttonElement.style.height = 32 + 'px';
        div.appendChild(buttonElement);
        var btn = new Button({
            cssClass: buttonClass, iconCss: iconcss
        });
        btn.appendTo(buttonElement);
        buttonElement.setAttribute('title', this.localObj.getConstant(toolTipText));
        buttonElement.setAttribute('aria-label', this.localObj.getConstant(toolTipText));
        if (this.localObj.getConstant(toolTipText) !== 'Decrease indent' && this.localObj.getConstant(toolTipText) !== 'Increase indent' && this.localObj.getConstant(toolTipText) !== 'Borders') {
            buttonElement.setAttribute('aria-pressed', 'false');
        }
        switch (toolTipText) {
            case 'Align left Tooltip':
                this.leftAlignmentBtn = btn;
                break;
            case 'Align right Tooltip':
                this.rightAlignmentBtn = btn;
                break;
            case 'Justify Tooltip':
                this.justifyBtn = btn;
                break;
            case 'Decrease indent':
                this.decreaseIndentBtn = btn;
                break;
            case 'Increase indent':
                this.increaseIndentBtn = btn;
                break;
            case 'Borders':
                this.bordersBtn = btn;
                break;
            case 'ShowHiddenMarks Tooltip':
                this.showHiddenMarksBtn = btn;
                break;
            default:
                this.centerAlignmentBtn = btn;
        }
        return buttonElement;
    };
    Paragraph.prototype.createLineSpacingDropdown = function (button) {
        var _this = this;
        var isAngularModal = this.container.isModalDialog;
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        var paragraphDiv = this;
        var dropdown = new DropDownButton({
            items: LineSpacingHelper.getLineSpacingItems(this.localObj),
            iconCss: 'e-de-ctnr-linespacing e-icons',
            enableRtl: this.isRtl,
            select: this.lineSpacingAction.bind(this),
            cssClass: this.splitButtonClass,
            beforeItemRender: function (args) {
                LineSpacingHelper.customizeLineSpacingItem(args, _this.appliedLineSpacing);
            },
            beforeOpen: function (e) {
                if (isAngularModal) {
                    var popupEl = e.element.parentElement;
                    var dropDownButtonEl = this.element;
                    paragraphDiv.container.movePopupToCdkOverlay(dropDownButtonEl, popupEl);
                }
            }
        });
        dropdown.appendTo(button);
        button.setAttribute('title', this.localObj.getConstant('Line spacing'));
        return dropdown;
    };
    Paragraph.prototype.createNumberListDropButton = function (iconcss, button) {
        var _this = this;
        this.numberListDropDiv = createElement('div', { id: 'target', styles: 'width: 211px;height: auto;display:none' });
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        var paragraphDiv = this;
        this.numberListDropUlTag = createElement('ul', {
            styles: 'display: block; outline: 0px;',
            id: 'listMenu',
            className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
        });
        this.numberListDropDiv.appendChild(this.numberListDropUlTag);
        this.noneNumberTag = this.createNumberNoneListTag(this.numberListDropUlTag);
        this.noneNumberTag.addEventListener('click', this.numberedAndBulletNoneClickHandler);
        this.numberList = this.createNumberListTag(this.numberListDropUlTag, '1.', '2.', '3.');
        this.numberList.addEventListener('click', this.numberedNumberDotClickHandler);
        this.lowLetter = this.createNumberListTag(this.numberListDropUlTag, 'a.', 'b.', 'c.');
        this.lowLetter.addEventListener('click', this.numberedLowLetterClickHandler);
        this.upLetter = this.createNumberListTag(this.numberListDropUlTag, 'A.', 'B.', 'C.');
        this.upLetter.addEventListener('click', this.numberedUpLetterClickHandler);
        this.lowRoman = this.createNumberListTag(this.numberListDropUlTag, 'i.', 'ii.', 'iii.');
        this.lowRoman.addEventListener('click', this.numberedLowRomanClickHandler);
        this.upRoman = this.createNumberListTag(this.numberListDropUlTag, 'I.', 'II.', 'III.');
        this.upRoman.addEventListener('click', this.numberedUpRomanClickHandler);
        var menuOptions = {
            target: this.numberListDropDiv,
            iconCss: iconcss,
            cssClass: this.splitButtonClass,
            beforeOpen: function (e) {
                paragraphDiv.numberSplitButtonBeforeOpen(e, this);
            },
            beforeClose: this.numberSplitButtonBeforeClose.bind(this)
        };
        this.numberedListBtn = new SplitButton(menuOptions);
        this.numberedListBtn.click = function () {
            _this.applyLastAppliedNumbering();
        };
        this.numberedListBtn.appendTo(button);
        button.parentElement.setAttribute('title', this.localObj.getConstant('Numbering'));
        button.parentElement.setAttribute('aria-label', this.localObj.getConstant('Numbering'));
    };
    Paragraph.prototype.numberSplitButtonBeforeClose = function () {
        this.numberListDropDiv.style.display = 'none';
        this.removeSelectedList();
    };
    Paragraph.prototype.numberSplitButtonBeforeOpen = function (e, splitButton) {
        var isAngularModal = this.container.isModalDialog;
        this.numberListDropDiv.style.display = 'block';
        var levelPattern = 'None';
        if (!isNullOrUndefined(this.documentEditor.selectionModule.paragraphFormat)) {
            if (isNullOrUndefined(this.documentEditor.selectionModule.paragraphFormat.listId)
                || this.documentEditor.selectionModule.paragraphFormat.listId === -1) {
                levelPattern = 'None';
            }
            else {
                var list = this.documentEditor.documentHelper.getListById(this.documentEditor.selectionModule.paragraphFormat.listId);
                var abstractList = this.documentEditor.documentHelper.getAbstractListById(list.abstractListId);
                var startParagraph = this.documentEditor.selectionModule.isForward ?
                    this.documentEditor.selectionModule.start.paragraph : this.documentEditor.selectionModule.end.paragraph;
                var level = abstractList.levels[startParagraph.paragraphFormat.listFormat.listLevelNumber];
                levelPattern = level.listLevelPattern;
            }
        }
        this.updateSelectedNumberedListType(levelPattern);
        if (isAngularModal) {
            var popupEl = e.element.parentElement;
            var buttonEl = splitButton.element;
            this.container.movePopupToCdkOverlay(buttonEl, popupEl);
        }
    };
    Paragraph.prototype.updateSelectedBulletListType = function (listText) {
        // Create a map of bullet elements
        var bulletElements = {
            'none': this.noneBulletTag,
            'dot': this.dotBullet,
            'circle': this.circleBullet,
            'square': this.squareBullet,
            'flower': this.flowerBullet,
            'arrow': this.arrowBullet,
            'tick': this.tickBullet
        };
        BulletListHelper.updateSelectedBulletListType(listText, bulletElements);
    };
    Paragraph.prototype.updateSelectedNumberedListType = function (listText) {
        // Create a map of number elements
        var numberElements = {
            'none': this.noneNumberTag,
            'number': this.numberList,
            'lowletter': this.lowLetter,
            'upletter': this.upLetter,
            'lowroman': this.lowRoman,
            'uproman': this.upRoman
        };
        BulletListHelper.updateSelectedNumberedListType(listText, numberElements);
    };
    Paragraph.prototype.removeSelectedList = function () {
        var elements = {
            'noneNumber': this.noneNumberTag,
            'number': this.numberList,
            'lowletter': this.lowLetter,
            'upletter': this.upLetter,
            'lowroman': this.lowRoman,
            'uproman': this.upRoman,
            'noneBullet': this.noneBulletTag,
            'dot': this.dotBullet,
            'circle': this.circleBullet,
            'square': this.squareBullet,
            'flower': this.flowerBullet,
            'arrow': this.arrowBullet,
            'tick': this.tickBullet
        };
        BulletListHelper.removeSelectedList(elements);
    };
    /**
     * @private
     * @returns {void}
     */
    Paragraph.prototype.applyLastAppliedNumbering = function () {
        switch (this.appliedNumberingStyle) {
            case 'arabic':
                this.numberedNumberDotClick();
                break;
            case 'lowletter':
                this.numberedLowLetterClick();
                break;
            case 'upletter':
                this.numberedUpLetterClick();
                break;
            case 'lowroman':
                this.numberedLowRomanClick();
                break;
            case 'uproman':
                this.numberedUpRomanClick();
                break;
        }
    };
    Paragraph.prototype.applyLastAppliedBullet = function () {
        this.applyBullet(this.appliedBulletStyle);
    };
    Paragraph.prototype.createBulletListDropButton = function (iconcss, button) {
        var _this = this;
        var isAngularModal = this.container.isModalDialog;
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        var paragraphDiv = this;
        var div = createElement('div', { id: 'bullet_list', styles: 'width: 196px;height: auto;display:none' });
        var ulTag = createElement('ul', {
            styles: 'display: block; outline: 0px;', id: 'listMenu',
            className: 'e-de-floating-menu e-de-bullets-menu e-de-list-container e-de-list-thumbnail'
        });
        div.appendChild(ulTag);
        this.noneBulletTag = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-none e-icons e-de-ctnr-list', true);
        this.noneBulletTag.addEventListener('click', this.numberedAndBulletNoneClickHandler);
        this.dotBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-dot e-icons e-de-ctnr-list', false);
        this.dotBullet.addEventListener('click', this.bulletDotClickHandler);
        this.circleBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-circle e-icons e-de-ctnr-list', false);
        this.circleBullet.addEventListener('click', this.bulletCircleClickHandler);
        this.squareBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-square e-icons e-de-ctnr-list', false);
        this.squareBullet.addEventListener('click', this.bulletSquareClickHandler);
        this.flowerBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-flower e-icons e-de-ctnr-list', false);
        this.flowerBullet.addEventListener('click', this.bulletFlowerClickHandler);
        this.arrowBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-arrow e-icons e-de-ctnr-list', false);
        this.arrowBullet.addEventListener('click', this.bulletArrowClickHandler);
        this.tickBullet = this.createBulletListTag(ulTag, 'e-de-ctnr-bullet-tick e-icons e-de-ctnr-list', false);
        this.tickBullet.addEventListener('click', this.bulletTickClickHandler);
        var menuOptions = {
            target: div,
            iconCss: iconcss,
            cssClass: this.splitButtonClass,
            beforeOpen: function (e) {
                div.style.display = 'block';
                if (isNullOrUndefined(paragraphDiv.documentEditor.selectionModule.paragraphFormat.listId) ||
                    paragraphDiv.documentEditor.selectionModule.paragraphFormat.listId === -1) {
                    paragraphDiv.updateSelectedBulletListType(paragraphDiv.documentEditor.selectionModule.paragraphFormat.listText);
                }
                else {
                    var startParagraph = paragraphDiv.documentEditor.selectionModule.isForward
                        ? paragraphDiv.documentEditor.selectionModule.start.paragraph
                        : paragraphDiv.documentEditor.selectionModule.end.paragraph;
                    paragraphDiv.updateSelectedBulletListType(startParagraph.paragraphFormat.listFormat.listLevel.numberFormat);
                }
                if (isAngularModal) {
                    var popupEl = e.element.parentElement;
                    var buttonEl = this.element;
                    paragraphDiv.container.movePopupToCdkOverlay(buttonEl, popupEl);
                }
            },
            beforeClose: function () {
                div.style.display = 'none';
                _this.removeSelectedList();
            }
        };
        this.bulletListBtn = new SplitButton(menuOptions);
        this.bulletListBtn.click = function () {
            _this.applyLastAppliedBullet();
        };
        this.bulletListBtn.appendTo(button);
        button.parentElement.setAttribute('title', this.localObj.getConstant('Bullets'));
        button.parentElement.setAttribute('aria-label', this.localObj.getConstant('Bullets'));
    };
    Paragraph.prototype.createNumberListTag = function (ulTag, text1, text2, text3) {
        return BulletListHelper.createNumberListTag(ulTag, text1, text2, text3);
    };
    Paragraph.prototype.createNumberNoneListTag = function (ulTag) {
        return BulletListHelper.createNumberNoneListTag(ulTag, this.localObj);
    };
    Paragraph.prototype.createBulletListTag = function (ulTag, iconCss, isNone) {
        return BulletListHelper.createBulletListTag(ulTag, iconCss, isNone, this.localObj);
    };
    Paragraph.prototype.createStyleDropDownList = function (selectElement) {
        var _this = this;
        this.style = new ComboBox({
            dataSource: [{ StyleName: 'Normal', IconClass: 'e-de-e-paragraph-mark e-icons' }],
            cssClass: 'e-de-prop-dropdown',
            popupHeight: '240px',
            enableRtl: this.isRtl,
            allowFiltering: true,
            query: new Query().select(['StyleName', 'Style', 'IconClass']),
            fields: { text: 'StyleName', value: 'StyleName' },
            showClearButton: false,
            change: this.selectStyleValue.bind(this)
        });
        var itemTemplate = '';
        // const instance: Paragraph = this;
        this.style.open = this.updateOptions.bind(this);
        if (!this.container.enableCsp) {
            if (this.isRtl) {
                itemTemplate = initializeCSPTemplate(function (data) {
                    return "<span style=\"" + data.Style + "\">" + data.StyleName + "</span><span class=\"" + data.IconClass + "\"></span>";
                });
            }
            else {
                itemTemplate = initializeCSPTemplate(function (data) {
                    return "<span class=\"" + data.IconClass + "\"></span><span style=\"" + data.Style + "\">" + data.StyleName + "</span>";
                });
            }
            this.style.itemTemplate = itemTemplate;
            this.style.isStringTemplate = true;
        }
        this.style.footerTemplate = initializeCSPTemplate(function (data) {
            return "<span class=\"e-de-ctnr-dropdown-ftr\">\n                " + _this.localObj.getConstant('Manage Styles') + "...</span>";
        });
        this.style.isAngular = this.container.isModalDialog;
        this.style.appendTo(selectElement);
        this.style.focus = function () {
            _this.isRetrieving = false;
            _this.style.element.select();
        };
        selectElement.parentElement.setAttribute('title', this.localObj.getConstant('Styles'));
    };
    /* eslint-disable @typescript-eslint/no-explicit-any */
    Paragraph.prototype.updateOptions = function (args) {
        args.popup.element.getElementsByClassName('e-de-ctnr-dropdown-ftr')[0].addEventListener('click', this.createStyle.bind(this));
    };
    /* eslint-disable */
    Paragraph.prototype.updateStyleNames = function () {
        this.styleName = StylesHelper.updateStyleNames(this.documentEditor, this.style, this.localObj);
        this.onSelectionChange();
    };
    Paragraph.prototype.createStyle = function () {
        this.style.hidePopup();
        if (!this.documentEditor.isReadOnly) {
            this.documentEditor.showDialog('Styles');
        }
    };
    Paragraph.prototype.onrightAlignmentClick = function () {
        this.leftAlignmentAction();
    };
    ;
    Paragraph.prototype.wireEvent = function () {
        var _this = this;
        this.leftAlignment.addEventListener('click', this.onrightAlignmentClickHandler);
        this.rightAlignment.addEventListener('click', function () {
            _this.rightAlignmentAction();
        });
        this.centerAlignment.addEventListener('click', function () {
            _this.centerAlignmentAction();
        });
        this.justify.addEventListener('click', function () {
            _this.justifyAction();
        });
        this.increaseIndent.addEventListener('click', function () {
            _this.increaseIndentAction();
        });
        this.showHiddenMarks.addEventListener('click', function () {
            _this.container.documentEditorSettings.showHiddenMarks = !_this.container.documentEditorSettings.showHiddenMarks;
            _this.toggleHiddenMarks();
            setTimeout(function () {
                _this.documentEditor.focusIn();
            }, 30);
        });
        this.decreaseIndent.addEventListener('click', function () {
            _this.decreaseIndentAction();
        });
        this.lineSpacing.addEventListener('select', function (args) {
            _this.lineSpacingAction(args);
        });
        this.borders.addEventListener('click', function () {
            _this.documentEditor.showBordersAndShadingDialog();
        });
    };
    Paragraph.prototype.unwireEvents = function () {
        this.leftAlignment.removeEventListener('click', this.onrightAlignmentClickHandler);
        this.rightAlignment.click = undefined;
        this.centerAlignment.click = undefined;
        this.justify.click = undefined;
        this.increaseIndent.click = undefined;
        this.decreaseIndent.click = undefined;
        this.lineSpacing.select = undefined;
        this.style.select = undefined;
    };
    /**
     * @private
     */
    Paragraph.prototype.toggleHiddenMarks = function () {
        if (this.container.documentEditorSettings.showHiddenMarks) {
            classList(this.showHiddenMarks, ['e-btn-toggle'], []);
            this.showHiddenMarks.setAttribute('aria-pressed', 'true');
        }
        else {
            classList(this.showHiddenMarks, [], ['e-btn-toggle']);
            this.showHiddenMarks.setAttribute('aria-pressed', 'false');
        }
    };
    Paragraph.prototype.leftAlignmentAction = function () {
        if (this.isRetrieving) {
            return;
        }
        if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
            this.documentEditor.editorModule.toggleTextAlignment('Left');
            this.documentEditor.focusIn();
        }
    };
    Paragraph.prototype.lineSpacingAction = function (args) {
        if (this.isRetrieving) {
            return;
        }
        var appliedSpacing = { value: this.appliedLineSpacing };
        LineSpacingHelper.applyLineSpacing(this.documentEditor, args.item.text, appliedSpacing, this.localObj);
        this.appliedLineSpacing = appliedSpacing.value;
    };
    Paragraph.prototype.setLineSpacing = function () {
        this.appliedLineSpacing = LineSpacingHelper.getCurrentLineSpacing(this.documentEditor, this.localObj);
    };
    Paragraph.prototype.selectStyleValue = function (args) {
        var _this = this;
        if (this.container) {
            if (this.isRetrieving || !args.isInteracted) {
                return;
            }
            setTimeout(function () {
                _this.applyStyleValue(args);
            }, 10);
        }
    };
    Paragraph.prototype.applyStyleValue = function (args) {
        if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
            StylesHelper.applyStyleValue(this.documentEditor, args);
        }
    };
    /* eslint-enable @typescript-eslint/no-explicit-any */
    Paragraph.prototype.rightAlignmentAction = function () {
        if (this.isRetrieving) {
            return;
        }
        if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
            this.documentEditor.editorModule.toggleTextAlignment('Right');
            this.documentEditor.focusIn();
        }
    };
    Paragraph.prototype.centerAlignmentAction = function () {
        if (this.isRetrieving) {
            return;
        }
        if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
            this.documentEditor.editorModule.toggleTextAlignment('Center');
            this.documentEditor.focusIn();
        }
    };
    Paragraph.prototype.justifyAction = function () {
        if (this.isRetrieving) {
            return;
        }
        if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
            this.documentEditor.editorModule.toggleTextAlignment('Justify');
            this.documentEditor.focusIn();
        }
    };
    Paragraph.prototype.increaseIndentAction = function () {
        if (this.isRetrieving) {
            return;
        }
        if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
            this.documentEditor.editorModule.increaseIndent();
            this.documentEditor.focusIn();
        }
    };
    Paragraph.prototype.decreaseIndentAction = function () {
        if (this.isRetrieving) {
            return;
        }
        if (!this.documentEditor.isReadOnly && this.documentEditor.editorModule) {
            this.documentEditor.editorModule.decreaseIndent();
            this.documentEditor.focusIn();
        }
    };
    Paragraph.prototype.numberedNoneClick = function () {
        var _this = this;
        if (this.isRetrieving) {
            return;
        }
        if (this.documentEditor.editorModule) {
            this.documentEditor.editorModule.clearList();
            setTimeout(function () {
                _this.documentEditor.focusIn();
            }, 30);
        }
    };
    Paragraph.prototype.applyNumbering = function (pattern, style) {
        var _this = this;
        if (this.isRetrieving) {
            return;
        }
        if (this.documentEditor.editorModule) {
            this.appliedNumberingStyle = style;
            this.documentEditor.editorModule.applyNumbering(BulletListHelper.getLevelFormatNumber(this.documentEditor), pattern);
            setTimeout(function () {
                _this.documentEditor.focusIn();
            }, 30);
        }
    };
    Paragraph.prototype.numberedNumberDotClick = function () {
        this.applyNumbering('Arabic', 'arabic');
    };
    Paragraph.prototype.numberedUpRomanClick = function () {
        this.applyNumbering('UpRoman', 'uproman');
    };
    Paragraph.prototype.numberedUpLetterClick = function () {
        this.applyNumbering('UpLetter', 'upletter');
    };
    Paragraph.prototype.numberedLowLetterClick = function () {
        this.applyNumbering('LowLetter', 'lowletter');
    };
    Paragraph.prototype.numberedLowRomanClick = function () {
        this.applyNumbering('LowRoman', 'lowroman');
    };
    Paragraph.prototype.applyBullet = function (style) {
        if (this.isRetrieving) {
            return;
        }
        var appliedStyle = { value: this.appliedBulletStyle };
        BulletListHelper.applyBulletStyle(this.documentEditor, style, appliedStyle);
        this.appliedBulletStyle = appliedStyle.value;
    };
    Paragraph.prototype.bulletDotClick = function () {
        this.applyBullet('dot');
    };
    Paragraph.prototype.bulletCircleClick = function () {
        this.applyBullet('circle');
    };
    Paragraph.prototype.bulletSquareClick = function () {
        this.applyBullet('square');
    };
    Paragraph.prototype.bulletFlowerClick = function () {
        this.applyBullet('flower');
    };
    Paragraph.prototype.bulletArrowClick = function () {
        this.applyBullet('arrow');
    };
    Paragraph.prototype.bulletTickClick = function () {
        this.applyBullet('tick');
    };
    Paragraph.prototype.onSelectionChange = function () {
        this.isRetrieving = true;
        if (this.documentEditor.editorModule) {
            //#region paragraph format
            var style = this.documentEditor.selectionModule.characterFormat.styleName;
            if (this.documentEditor.selectionModule.characterFormat.styleName === "Default Paragraph Font") {
                style = this.documentEditor.selectionModule.paragraphFormat.styleName;
            }
            if (style) {
                var localeValue = this.localObj.getConstant(style);
                this.style.value = (isNullOrUndefined(localeValue) || localeValue == '') ? style : localeValue;
                // this.style.dataBind();
            }
            else {
                this.style.value = null;
            }
            classList(this.leftAlignment, [], ['e-btn-toggle']);
            classList(this.rightAlignment, [], ['e-btn-toggle']);
            classList(this.centerAlignment, [], ['e-btn-toggle']);
            classList(this.justify, [], ['e-btn-toggle']);
            if (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Left') {
                classList(this.leftAlignment, ['e-btn-toggle'], []);
                this.leftAlignment.setAttribute('aria-pressed', 'true');
                this.rightAlignment.setAttribute('aria-pressed', 'false');
                this.centerAlignment.setAttribute('aria-pressed', 'false');
                this.justify.setAttribute('aria-pressed', 'false');
            }
            else if (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Right') {
                classList(this.rightAlignment, ['e-btn-toggle'], []);
                this.leftAlignment.setAttribute('aria-pressed', 'false');
                this.rightAlignment.setAttribute('aria-pressed', 'true');
                this.centerAlignment.setAttribute('aria-pressed', 'false');
                this.justify.setAttribute('aria-pressed', 'false');
            }
            else if (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Center') {
                classList(this.centerAlignment, ['e-btn-toggle'], []);
                this.leftAlignment.setAttribute('aria-pressed', 'false');
                this.rightAlignment.setAttribute('aria-pressed', 'false');
                this.centerAlignment.setAttribute('aria-pressed', 'true');
                this.justify.setAttribute('aria-pressed', 'false');
            }
            else if (this.documentEditor.selectionModule.paragraphFormat.textAlignment === 'Justify') {
                classList(this.justify, ['e-btn-toggle'], []);
                this.leftAlignment.setAttribute('aria-pressed', 'false');
                this.rightAlignment.setAttribute('aria-pressed', 'false');
                this.centerAlignment.setAttribute('aria-pressed', 'false');
                this.justify.setAttribute('aria-pressed', 'true');
            }
            this.toggleHiddenMarks();
        }
        this.setLineSpacing();
        this.isRetrieving = false;
    };
    Paragraph.prototype.removeHTMLElements = function () {
        this.leftAlignment.remove();
        this.leftAlignment = null;
        this.rightAlignment.remove();
        this.rightAlignment = null;
        this.centerAlignment.remove();
        this.centerAlignment = null;
        this.justify.remove();
        this.justify = null;
        this.increaseIndent.remove();
        this.increaseIndent = null;
        this.decreaseIndent.remove();
        this.decreaseIndent = null;
        this.showHiddenMarks.remove();
        this.showHiddenMarks = null;
        this.noneNumberTag.remove();
        this.noneNumberTag = null;
        this.numberList.remove();
        this.numberList = null;
        this.lowLetter.remove();
        this.lowLetter = null;
        this.upLetter.remove();
        this.upLetter = null;
        this.lowRoman.remove();
        this.lowRoman = null;
        this.upRoman.remove();
        this.upRoman = null;
        this.noneBulletTag.remove();
        this.noneBulletTag = null;
        this.dotBullet.remove();
        this.dotBullet = null;
        this.circleBullet.remove();
        this.circleBullet = null;
        this.squareBullet.remove();
        this.squareBullet = null;
        this.flowerBullet.remove();
        this.flowerBullet = null;
        this.arrowBullet.remove();
        this.arrowBullet = null;
        this.tickBullet.remove();
        this.tickBullet = null;
        this.borders.remove();
        this.borders = null;
        this.paragraphDiv.remove();
        this.paragraphDiv = null;
        this.label.remove();
        this.label = null;
        // this.styleDiv.remove();
        // this.styleDiv = null;
        // this.styleSelect.remove();
        // this.styleSelect = null;
        this.indentWholeDiv.remove();
        this.indentWholeDiv = null;
        this.indentDiv.remove();
        this.indentDiv = null;
        this.incDecIndentDiv.remove();
        this.incDecIndentDiv = null;
        this.listDiv.remove();
        this.listDiv = null;
        this.paraDiv.remove();
        this.paraDiv = null;
        this.lineHeight.remove();
        this.lineHeight = null;
        this.listDropDown.remove();
        this.listDropDown = null;
        this.bulletButton.remove();
        this.bulletButton = null;
        this.numberingList.remove();
        this.numberingList = null;
        this.numberListDropDiv.remove();
        this.numberListDropDiv = null;
        this.numberListDropUlTag.remove();
        this.numberListDropUlTag = null;
    };
    Paragraph.prototype.destroy = function () {
        this.container = undefined;
        this.unwireEvents();
        this.removeHTMLElements();
        if (this.lineSpacing) {
            this.lineSpacing.destroy();
            this.lineSpacing = undefined;
        }
        // if (this.style) {
        //     //this.style.destroy();
        //     if(this.style.element) {
        //         this.style.element.remove();
        //     }
        //     this.style.element = null;
        //     this.style = undefined;
        //}
        if (this.bulletListBtn) {
            this.bulletListBtn.destroy();
            this.bulletListBtn = undefined;
        }
        if (this.numberedListBtn) {
            this.numberedListBtn.destroy();
            this.numberedListBtn = undefined;
        }
        if (this.leftAlignmentBtn) {
            this.leftAlignmentBtn.destroy();
            this.leftAlignmentBtn = undefined;
        }
        if (this.rightAlignmentBtn) {
            this.rightAlignmentBtn.destroy();
            this.rightAlignmentBtn = undefined;
        }
        if (this.centerAlignmentBtn) {
            this.centerAlignmentBtn.destroy();
            this.centerAlignmentBtn = undefined;
        }
        if (this.showHiddenMarksBtn) {
            this.showHiddenMarksBtn.destroy();
            this.showHiddenMarksBtn = undefined;
        }
        if (this.justifyBtn) {
            this.justifyBtn.destroy();
            this.justifyBtn = undefined;
        }
        if (this.decreaseIndentBtn) {
            this.decreaseIndentBtn.destroy();
            this.decreaseIndentBtn = undefined;
        }
        if (this.increaseIndentBtn) {
            this.increaseIndentBtn.destroy();
            this.increaseIndentBtn = undefined;
        }
        if (this.bordersBtn) {
            this.bordersBtn.destroy();
            this.bordersBtn = undefined;
        }
        if (this.showHiddenMarksBtn) {
            this.showHiddenMarksBtn.destroy();
            this.showHiddenMarksBtn = undefined;
        }
    };
    return Paragraph;
}());
export { Paragraph };
