import { createElement, remove } from '@syncfusion/ej2-base';
import { RibbonItemType, RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { BORDERS_SHADING_GROUP_ID, BORDERS_DROPDOWN_ID, BORDER_COLOR_PICKER_ID, BORDER_WIDTH_DROPDOWN_ID } from './constants';
import { BordersHelper } from '../../helper/borders-helper';
/**
 * BordersGroup class provides the borders and shading options for table design
 * @private
 */
var BordersGroup = /** @class */ (function () {
    /**
     * Constructor for the BordersGroup class
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function BordersGroup(container) {
        this.borderColor = '#000000';
        this.borderWidth = '1px';
        this.container = container;
        this.localObj = this.container.localObj;
        this.commonID = this.container.element.id + RIBBON_ID;
        // Create a hidden container for templates
        this.templateContainer = createElement('div', {
            styles: 'position: absolute; visibility: hidden; height: 0; width: 0; overflow: hidden;'
        });
        document.body.appendChild(this.templateContainer);
    }
    /**
     * Gets the Borders group configuration
     * @returns {RibbonGroupModel} RibbonGroupModel for the Borders group
     */
    BordersGroup.prototype.getBordersGroup = function () {
        return {
            id: this.commonID + BORDERS_SHADING_GROUP_ID,
            header: this.localObj.getConstant('Borders'),
            showLauncherIcon: true,
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('Borders'),
            collections: [
                {
                    items: [
                        this.getBordersDropdown()
                    ]
                },
                {
                    items: [
                        this.getBorderColorPicker(),
                        this.getBorderWidthDropdown()
                    ]
                }
            ]
        };
    };
    /**
     * Gets the Borders dropdown configuration
     * @returns {RibbonItemModel} RibbonItemModel for the Borders dropdown
     */
    BordersGroup.prototype.getBordersDropdown = function () {
        var _this = this;
        return {
            type: RibbonItemType.DropDown,
            id: this.commonID + BORDERS_DROPDOWN_ID,
            keyTip: 'B',
            dropDownSettings: {
                content: this.localObj.getConstant('Borders'),
                iconCss: 'e-icons e-de-ctnr-allborders',
                items: BordersHelper.getBorderDropdownItems(this.localObj, this.commonID),
                select: function (args) {
                    _this.applyBorder(args.item.text);
                }
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Table Borders')
            }
        };
    };
    /**
     * Gets the Border Color Picker configuration
     * @returns {RibbonItemModel} RibbonItemModel for the Border Color Picker
     */
    BordersGroup.prototype.getBorderColorPicker = function () {
        var _this = this;
        return {
            type: RibbonItemType.ColorPicker,
            keyTip: 'C',
            id: this.commonID + BORDER_COLOR_PICKER_ID,
            allowedSizes: RibbonItemSize.Medium,
            colorPickerSettings: {
                value: this.borderColor,
                cssClass: 'e-de-ribbon-border-color-picker e-de-prop-font-button  ',
                change: function (args) {
                    _this.borderColor = args.currentValue.hex;
                },
                noColor: true,
                showButtons: false
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Border Color')
            }
        };
    };
    /**
     * Gets the Border Width Dropdown configuration
     * @returns {RibbonItemModel} RibbonItemModel for the Border Width Dropdown
     */
    BordersGroup.prototype.getBorderWidthDropdown = function () {
        var _this = this;
        // Create a hidden container to hold the dropdown items
        var divElement = createElement('div', { id: this.commonID + '_borderSizeTarget', styles: 'display:none' });
        this.templateContainer.appendChild(divElement);
        // Create a ul element to hold the list items
        var ulTag = createElement('ul', {
            styles: 'display: block; outline: 0px; width: 126px; height: auto;',
            id: this.commonID + '_borderSizeListMenu'
        });
        divElement.appendChild(ulTag);
        // Create dropdown items for different border sizes
        this.createBorderSizeItems(ulTag);
        return {
            type: RibbonItemType.DropDown,
            id: this.commonID + BORDER_WIDTH_DROPDOWN_ID,
            keyTip: 'Y',
            cssClass: 'e-de-ribbon-border-size-button',
            allowedSizes: RibbonItemSize.Medium,
            dropDownSettings: {
                content: this.borderWidth,
                iconCss: 'e-de-ctnr-strokesize e-icons',
                cssClass: 'e-de-prop-bordersize e-de-ribbon-border-size-button',
                target: divElement,
                beforeOpen: function () {
                    divElement.style.display = 'block';
                    // Update border color for all size samples
                    var borderWidthElements = _this.widthOptions.getElementsByClassName('e-de-border-width');
                    for (var i = 0; i < borderWidthElements.length; i++) {
                        /* eslint-disable */
                        var element = borderWidthElements[i];
                        element.style.borderBottomColor = _this.borderColor;
                    }
                },
                beforeClose: function () {
                    divElement.style.display = 'none';
                }
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Border Width')
            }
        };
    };
    /**
     * Creates the border size dropdown items
     * @param {HTMLElement} ulTag - The ul element to append the items to
     * @returns {void}
     */
    BordersGroup.prototype.createBorderSizeItems = function (ulTag) {
        var _this = this;
        // Add 'No Border' option
        var noBorderOption = BordersHelper.createBorderWidthOption(ulTag, this.localObj.getConstant('No Border'), this.localObj);
        noBorderOption.addEventListener('click', function () {
            _this.container.ribbon.ribbon.getItem(_this.commonID + BORDER_WIDTH_DROPDOWN_ID).dropDownSettings.content = _this.localObj.getConstant('No Border');
            _this.onBorderWidthChange('No Border');
        });
        // Get border widths
        var borderWidths = BordersHelper.getBorderWidthItems(this.localObj).slice(1); // Skip 'No Border'
        // Add border width options
        borderWidths.forEach(function (width) {
            _this.widthOptions = BordersHelper.createBorderWidthOption(ulTag, width, _this.localObj);
            _this.widthOptions.addEventListener('click', function () {
                _this.container.ribbon.ribbon.getItem(_this.commonID + BORDER_WIDTH_DROPDOWN_ID).dropDownSettings.content = width;
                _this.onBorderWidthChange(width.replace(_this.localObj.getConstant('px'), 'px'));
            });
        });
    };
    /**
     * Handles border width change
     * @param {string} width - The selected border width
     * @returns {void}
     */
    BordersGroup.prototype.onBorderWidthChange = function (width) {
        this.borderWidth = width;
        // Get border dropdown
        var borderDropdownItem = this.container.ribbon.ribbon.getItem(this.commonID + BORDER_WIDTH_DROPDOWN_ID);
        if (borderDropdownItem && borderDropdownItem.dropDownSettings) {
            borderDropdownItem.dropDownSettings.content = width;
            // Force refresh the ribbon item
            this.container.ribbon.ribbon.updateItem(borderDropdownItem);
        }
    };
    /**
     * Applies the border based on the selected option
     * @param {string} borderId - The ID of the selected border option
     * @returns {void}
     */
    BordersGroup.prototype.applyBorder = function (borderId) {
        var borderType = BordersHelper.getBorderType(borderId, this.localObj);
        BordersHelper.applyBorder(this.container.documentEditor, borderType, this.borderColor, this.borderWidth);
    };
    /**
     * Clean up resources when destroyed
     * @returns {void}
     */
    BordersGroup.prototype.destroy = function () {
        remove(this.widthOptions);
        this.widthOptions = undefined;
        if (this.templateContainer && this.templateContainer.parentNode) {
            this.templateContainer.parentNode.removeChild(this.templateContainer);
        }
        this.templateContainer = undefined;
    };
    return BordersGroup;
}());
export { BordersGroup };
