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';
// Constants for UI element IDs
export var PROTECT_GROUP = '_protect_group';
export var PROTECT_DOCUMENT_ID = '_protect_document';
export var READ_ONLY_ID = '_read_only';
export var RESTRICT_EDITING_ID = '_restrict_editing';
/**
 * Represents the Protect Group in Review
 * @private
 */
var ProtectGroup = /** @class */ (function (_super) {
    __extends(ProtectGroup, _super);
    /**
     * Constructor for the ProtectGroup
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function ProtectGroup(container) {
        return _super.call(this, container) || this;
    }
    /**
     * Gets the ribbon group model for Protect
     * @returns {RibbonGroupModel} The ribbon group model
     */
    ProtectGroup.prototype.getGroupModel = function () {
        var locale = this.localObj;
        // Create items for the protect document dropdown
        var protectItems = [
            {
                id: this.ribbonId + PROTECT_DOCUMENT_ID + '_readonly',
                text: locale.getConstant('Read Only'),
                iconCss: 'e-icons e-de-read-only'
            },
            {
                id: this.ribbonId + PROTECT_DOCUMENT_ID + '_restrict',
                text: locale.getConstant('Restrict Editing'),
                iconCss: 'e-icons e-de-restrict-edit'
            }
        ];
        return {
            id: this.ribbonId + PROTECT_GROUP,
            header: locale.getConstant('Protect'),
            orientation: 'Rows',
            keyTip: 'ZR',
            enableGroupOverflow: true,
            overflowHeader: locale.getConstant('Protect'),
            collections: [
                {
                    items: [
                        {
                            id: this.ribbonId + PROTECT_DOCUMENT_ID,
                            type: 'DropDown',
                            dropDownSettings: {
                                content: locale.getConstant('Protect Document'),
                                items: protectItems,
                                iconCss: 'e-icons e-de-ctnr-lock',
                                select: this.protectDocumentDropdownHandler.bind(this),
                                beforeItemRender: this.onBeforeRenderProtectDropdown.bind(this)
                            },
                            ribbonTooltipSettings: {
                                title: locale.getConstant('Protect Document'),
                                content: locale.getConstant('Control what types of changes can be made to the document')
                            }
                        }
                    ]
                }
            ]
        };
    };
    /**
     * Handle selection in protect document dropdown
     * @param {MenuEventArgs} args - Menu event arguments
     * @returns {void}
     */
    ProtectGroup.prototype.protectDocumentDropdownHandler = function (args) {
        var id = args.item.id;
        if (args.item && id) {
            if (id === this.ribbonId + PROTECT_DOCUMENT_ID + '_readonly') {
                // Toggle read-only mode
                this.container.restrictEditing = !this.container.restrictEditing;
                this.updateReadOnlyIcon(args.element);
            }
            else if (id === this.ribbonId + PROTECT_DOCUMENT_ID + '_restrict') {
                // Show restrict editing dialog
                this.documentEditor.documentHelper.restrictEditingPane.showHideRestrictPane(true);
            }
        }
    };
    /**
     * Handle rendering of protection dropdown items to show current state
     * @param {MenuEventArgs} args - Menu event arguments
     * @returns {void}
     */
    ProtectGroup.prototype.onBeforeRenderProtectDropdown = function (args) {
        var selectedIcon = args.element.getElementsByClassName('e-menu-icon')[0];
        if (!selectedIcon) {
            return;
        }
        if (args.item.id === this.ribbonId + PROTECT_DOCUMENT_ID + '_readonly') {
            this.toggleSelectedIcon(selectedIcon, this.documentEditor.isReadOnly);
        }
        else if (args.item.id === this.ribbonId + PROTECT_DOCUMENT_ID + '_restrict') {
            var restrictPane = document.getElementsByClassName('e-de-restrict-pane')[0];
            if (restrictPane) {
                var isRestrictPaneVisible = !(restrictPane.style.display === 'none');
                this.toggleSelectedIcon(selectedIcon, isRestrictPaneVisible);
            }
        }
    };
    /**
     * Updates the read-only icon in the dropdown item
     * @param {HTMLElement} menuElement - The menu element
     * @returns {void}
     */
    ProtectGroup.prototype.updateReadOnlyIcon = function (menuElement) {
        var selectedIcon = menuElement.getElementsByClassName('e-menu-icon')[0];
        if (selectedIcon) {
            this.toggleSelectedIcon(selectedIcon, this.documentEditor.isReadOnly);
        }
    };
    /**
     * Toggles the selected icon state
     * @param {HTMLElement} icon - The icon element
     * @param {boolean} isSelected - Whether the item is selected
     * @returns {void}
     */
    ProtectGroup.prototype.toggleSelectedIcon = function (icon, isSelected) {
        if (isSelected) {
            icon.classList.add('e-de-selected-item');
        }
        else {
            icon.classList.remove('e-de-selected-item');
        }
    };
    /**
     * Update UI based on document protection state
     * @returns {void}
     */
    ProtectGroup.prototype.updateSelection = function () {
        // Update UI to reflect current document protection state if needed
        var isReadOnly = this.documentEditor.isReadOnly;
        // Update read-only button state if it exists in the UI
        var readOnlyElement = document.getElementById(this.ribbonId + READ_ONLY_ID);
        if (readOnlyElement) {
            readOnlyElement.classList.toggle('e-active', isReadOnly);
        }
    };
    return ProtectGroup;
}(RibbonGroupBase));
export { ProtectGroup };
