/**
 * Constants for control group identification
 */
export var CONTROL_GROUP = '_control_group';
export var CONTENT_CONTROL_ID = '_content_control';
export var RICHTEXT_CONTENT_CONTROL_ID = '_richtext_content_control';
export var PLAINTEXT_CONTENT_CONTROL_ID = '_plaintext_content_control';
export var COMBOBOX_CONTENT_CONTROL_ID = '_combobox_content_control';
export var DROPDOWNDOWN_CONTENT_CONTROL_ID = '_dropdown_content_control';
export var DATEPICKER_CONTENT_CONTROL_ID = '_datepicker_content_control';
export var CHECKBOX_CONTENT_CONTROL_ID = '_checkbox_content_control';
export var PICTURE_CONTENT_CONTROL_ID = '_picture_content_control';
/**
 * ControlGroup module
 * @private
 */
var ControlGroup = /** @class */ (function () {
    /**
     * Constructor for ControlGroup class
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function ControlGroup(container) {
        this.container = container;
        this.ribbonId = this.container.element.id + '_ribbon';
    }
    Object.defineProperty(ControlGroup.prototype, "documentEditor", {
        /**
         * Get the DocumentEditor instance
         * @returns {DocumentEditor} The DocumentEditor instance
         */
        get: function () {
            return this.container.documentEditor;
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Get the Control group model
     * @returns {RibbonGroupModel} The Control group model
     */
    ControlGroup.prototype.getGroupModel = function () {
        var locale = this.container.localObj;
        var id = this.ribbonId + CONTROL_GROUP;
        return {
            id: id,
            header: locale.getConstant('Controls'),
            orientation: 'Row',
            cssClass: 'e-controls-group',
            enableGroupOverflow: true,
            overflowHeader: locale.getConstant('Controls'),
            collections: [
                {
                    items: [
                        this.getContentControlDropDownModel()
                    ]
                }
            ]
        };
    };
    /**
     * Get the Content Control dropdown model
     * @returns {RibbonItemModel} The Content Control dropdown model
     */
    ControlGroup.prototype.getContentControlDropDownModel = function () {
        var locale = this.container.localObj;
        var id = this.ribbonId + CONTROL_GROUP;
        return {
            type: 'DropDown',
            id: id + CONTENT_CONTROL_ID,
            dropDownSettings: {
                iconCss: 'e-icons e-de-ctnr-content-control',
                content: locale.getConstant('Content Control'),
                items: [
                    {
                        text: locale.getConstant('Rich Text Content Control'),
                        iconCss: 'e-icons e-de-ctnr-change-case',
                        id: id + RICHTEXT_CONTENT_CONTROL_ID
                    },
                    {
                        text: locale.getConstant('Plain Text Content Control'),
                        iconCss: 'e-icons e-de-ctnr-change-case',
                        id: id + PLAINTEXT_CONTENT_CONTROL_ID
                    },
                    {
                        text: locale.getConstant('Picture Content Control'),
                        iconCss: 'e-icons e-de-ctnr-image',
                        id: id + PICTURE_CONTENT_CONTROL_ID
                    },
                    {
                        text: locale.getConstant('Combo Box Content Control'),
                        iconCss: 'e-icons e-de-combo-box',
                        id: id + COMBOBOX_CONTENT_CONTROL_ID
                    },
                    {
                        text: locale.getConstant('Drop-Down List Content Control'),
                        iconCss: 'e-icons e-de-dropdown-list',
                        id: id + DROPDOWNDOWN_CONTENT_CONTROL_ID
                    },
                    {
                        text: locale.getConstant('Date Picker Content Control'),
                        iconCss: 'e-icons e-timeline-today',
                        id: id + DATEPICKER_CONTENT_CONTROL_ID
                    },
                    {
                        text: locale.getConstant('Check Box Content Control'),
                        iconCss: 'e-icons e-check-box',
                        id: id + CHECKBOX_CONTENT_CONTROL_ID
                    }
                ],
                select: this.onContentControlDropDownSelect.bind(this)
            },
            ribbonTooltipSettings: {
                content: locale.getConstant('Insert content controls')
            }
        };
    };
    /**
     * Handle content control dropdown selection
     * @param {MenuEventArgs} args - Menu event arguments
     * @returns {void}
     */
    ControlGroup.prototype.onContentControlDropDownSelect = function (args) {
        var _this = this;
        var id = this.ribbonId + CONTROL_GROUP;
        if (args.item.id === id + RICHTEXT_CONTENT_CONTROL_ID) {
            this.documentEditor.editor.insertContentControl('RichText');
        }
        else if (args.item.id === id + PLAINTEXT_CONTENT_CONTROL_ID) {
            this.documentEditor.editor.insertContentControl('Text');
        }
        else if (args.item.id === id + PICTURE_CONTENT_CONTROL_ID) {
            this.documentEditor.showDialog('PictureContentControl');
        }
        else if (args.item.id === id + COMBOBOX_CONTENT_CONTROL_ID) {
            this.documentEditor.editor.insertContentControl('ComboBox');
        }
        else if (args.item.id === id + DROPDOWNDOWN_CONTENT_CONTROL_ID) {
            this.documentEditor.editor.insertContentControl('DropDownList');
        }
        else if (args.item.id === id + DATEPICKER_CONTENT_CONTROL_ID) {
            this.documentEditor.editor.insertContentControl('Date');
        }
        else if (args.item.id === id + CHECKBOX_CONTENT_CONTROL_ID) {
            this.documentEditor.editor.insertContentControl('CheckBox');
        }
        setTimeout(function () {
            _this.documentEditor.focusIn();
        }, 30);
    };
    /**
     * Update UI based on current selection
     * @returns {void}
     * @private
     */
    ControlGroup.prototype.updateSelection = function () {
        // Update UI state based on current selection
        var isReadOnly = this.documentEditor.isReadOnly;
        var isDocumentProtected = this.documentEditor.documentHelper.isDocumentProtected;
        var isHeaderFooter = this.documentEditor.enableHeaderAndFooter;
        var isPlainContentControl = this.documentEditor.selectionModule.isPlainContentControl();
        // Disable content controls in read-only mode, protected document, or header/footer
        var enableContentControls = !isReadOnly && !isDocumentProtected && !isHeaderFooter && !isPlainContentControl;
        // Implementation to enable/disable content control dropdown
        var contentControlElement = document.getElementById(this.ribbonId + CONTROL_GROUP + CONTENT_CONTROL_ID);
        if (contentControlElement) {
            contentControlElement.classList.toggle('e-disabled', !enableContentControls);
        }
    };
    /**
     * Destroy the ControlGroup instance
     * @returns {void}
     */
    ControlGroup.prototype.destroy = function () {
        // Destroy UI components
        if (this.contentControlDropDown) {
            this.contentControlDropDown.destroy();
            this.contentControlDropDown = undefined;
        }
        // Clear all references
        this.container = undefined;
        this.ribbonId = undefined;
    };
    return ControlGroup;
}());
export { ControlGroup };
