import { RibbonItemType, RibbonItemSize } from '@syncfusion/ej2-ribbon';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
import { SHADING_GROUP_ID, SHADING_COLOR_PICKER_ID } from './constants';
import { ColorPicker } from '@syncfusion/ej2-inputs';
export var SHADING_BUTTON_ID = '_SHADING_BUTTON';
/**
 * ShadingGroup class provides the shading options for table design
 * @private
 */
var ShadingGroup = /** @class */ (function () {
    /**
     * Constructor for the ShadingGroup class
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function ShadingGroup(container) {
        this.currentShadingColor = '#ffffff';
        this.container = container;
        this.localObj = this.container.localObj;
        this.commonID = this.container.element.id + RIBBON_ID;
        this.colorPickerId = this.commonID + SHADING_COLOR_PICKER_ID;
        this.shadingButtonId = this.commonID + SHADING_BUTTON_ID;
        // Create color picker element once
        this.createColorPickerElement();
    }
    /**
     * Create the Shading group configuration
     * @returns {void}
     */
    ShadingGroup.prototype.createColorPickerElement = function () {
        var _this = this;
        // Create a hidden div for the color picker
        this.colorPickerElement = document.createElement('div');
        this.colorPickerElement.id = this.commonID + '_cellShadingColorPickerContainer';
        this.colorPickerElement.style.display = 'none';
        // Create the input element for the color picker
        var colorPickerInput = document.createElement('input');
        colorPickerInput.id = this.commonID + '_cellShadingColorPicker';
        colorPickerInput.type = 'color';
        this.colorPickerElement.appendChild(colorPickerInput);
        document.body.appendChild(this.colorPickerElement);
        // Initialize the color picker with inline mode
        this.colorPicker = new ColorPicker({
            inline: true,
            locale: this.container.locale,
            value: this.currentShadingColor,
            enableOpacity: false,
            change: function (args) {
                _this.currentShadingColor = args.currentValue.hex;
                _this.applyShadingColor(_this.currentShadingColor);
            },
            open: function () {
                // Focus back to document editor after color picker is closed
                _this.container.documentEditor.focusIn();
            }, beforeClose: function () {
                // Handle any cleanup before closing
                return true; // Return true to allow closing
            },
            cssClass: 'e-cell-shading-picker'
        }, '#' + this.commonID + '_cellShadingColorPicker');
    };
    /**
     * Gets the Shading group configuration
     * @returns {RibbonGroupModel} - The Shading group configuration
     * @private
     */
    ShadingGroup.prototype.getShadingGroup = function () {
        return {
            id: this.commonID + SHADING_GROUP_ID,
            header: this.localObj.getConstant('Cell'),
            orientation: 'Row',
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('Cell'),
            collections: [
                {
                    items: [
                        this.getShadingSplitButton()
                    ]
                }
            ]
        };
    };
    /**
     * Gets the Shading Split Button configuration with color picker dropdown
     * @returns {RibbonItemModel} - The Shading Split Button configuration
     * @private
     */
    ShadingGroup.prototype.getShadingSplitButton = function () {
        var _this = this;
        return {
            type: RibbonItemType.SplitButton,
            id: this.shadingButtonId,
            allowedSizes: RibbonItemSize.Large,
            splitButtonSettings: {
                iconCss: 'e-icons e-de-ctnr-paint-bucket',
                content: this.localObj.getConstant('Shading'),
                target: '.e-cell-shading-picker',
                // select: (args: MenuEventArgs) => {
                //     if (args.item && args.item.id === this.colorPickerId) {
                //         this.showColorPicker();
                //     }
                // },
                click: function () {
                    // Apply the current color on direct button click
                    _this.applyShadingColor(_this.currentShadingColor);
                },
                beforeOpen: function () {
                    // Ensure current selection properties are reflected
                    // this.showColorPicker();
                }
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Fill color')
            }
        };
    };
    /**
     * Shows the color picker dialog
     * @returns {void}
     * @private
     */
    ShadingGroup.prototype.showColorPicker = function () {
        // Get the input element
        // Update the color picker value
        this.colorPicker.value = this.currentShadingColor;
    };
    /**
     * Applies the shading color to the selected table or cells
     * @param {string} color - The color to apply as shading
     * @returns {void}
     */
    ShadingGroup.prototype.applyShadingColor = function (color) {
        if (this.container.documentEditor.selection) {
            this.container.documentEditor.selection.cellFormat.background = color;
            this.currentShadingColor = color;
        }
        var colorPopupElement = document.getElementById(this.container.element.id + RIBBON_ID + '_SHADING_BUTTON_dropdownbtn-popup');
        if (colorPopupElement) {
            colorPopupElement.style.display = 'none';
        }
    };
    /**
     * Updates the shading color to reflect the current selection
     * @returns {void}
     * @private
     */
    ShadingGroup.prototype.updateShadingColor = function () {
        if (this.container.documentEditor.selection) {
            // Update shading color if a cell is selected
            if (this.container.documentEditor.selection.contextType === 'TableText' ||
                this.container.documentEditor.selection.contextType === 'TableImage') {
                var currentBackground = this.container.documentEditor.selection.cellFormat.background;
                if (currentBackground) {
                    this.currentShadingColor = currentBackground;
                }
            }
        }
    };
    /**
     * Clean up resources when destroyed
     * @returns {void}
     * @private
     */
    ShadingGroup.prototype.destroy = function () {
        // Destroy the ColorPicker component first
        if (this.colorPicker) {
            this.colorPicker.destroy();
            this.colorPicker = undefined;
        }
        // Clean up the color picker element
        if (this.colorPickerElement && this.colorPickerElement.parentNode) {
            this.colorPickerElement.parentNode.removeChild(this.colorPickerElement);
            this.colorPickerElement = undefined;
        }
        this.container = undefined;
        this.localObj = undefined;
    };
    return ShadingGroup;
}());
export { ShadingGroup };
