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';
import { ItemOrientation } from '@syncfusion/ej2-ribbon';
import { SectionBreakType } from '../../../document-editor/base/types';
import { RIBBON_ID } from '../ribbon-base/ribbon-constants';
export var PAGE_SETUP_GROUP_ID = '_page_setup_group';
export var MARGINS_BUTTON_ID = '_margins_button';
export var MARGINS_DROPDOWN_ID = '_margins_dropdown';
export var ORIENTATION_DROPDOWN_ID = '_orientation_dropdown';
export var SIZE_DROPDOWN_ID = '_size_dropdown';
export var COLUMNS_DROPDOWN_ID = '_columns_dropdown';
export var BREAKS_DROPDOWN_ID = '_breaks_dropdown';
/**
 * Represents the Page Setup Group in Layout tab
 * @private
 */
var PageSetupGroup = /** @class */ (function (_super) {
    __extends(PageSetupGroup, _super);
    /**
     * Constructor for the PageSetupGroup
     * @param {DocumentEditorContainer} container - DocumentEditorContainer instance
     */
    function PageSetupGroup(container) {
        var _this = _super.call(this, container) || this;
        _this.commonId = container.element.id + RIBBON_ID;
        return _this;
    }
    /**
     * Gets the ribbon group model for Page Setup
     * @returns {RibbonGroupModel} - Ribbon group model for Page Setup
     * @private
     */
    PageSetupGroup.prototype.getGroupModel = function () {
        return {
            id: this.commonId + PAGE_SETUP_GROUP_ID,
            header: this.localObj.getConstant('PageSetup'),
            orientation: ItemOrientation.Row,
            showLauncherIcon: true,
            enableGroupOverflow: true,
            overflowHeader: this.localObj.getConstant('PageSetup'),
            collections: [
                {
                    items: [
                        this.createMarginsDropdown(),
                        this.createOrientationDropdown(),
                        this.createSizeDropdown(),
                        this.createColumnsDropdown(),
                        this.createBreaksDropdown()
                    ]
                }
            ]
        };
    };
    PageSetupGroup.prototype.getCurrentMarginType = function () {
        var sectionFormat = this.documentEditor.selection.sectionFormat;
        var currentMarginType = '';
        // Determine current margin type based on section format values
        if (sectionFormat) {
            var left = sectionFormat.leftMargin;
            var right = sectionFormat.rightMargin;
            var top_1 = sectionFormat.topMargin;
            var bottom = sectionFormat.bottomMargin;
            // Normal: 72 points on all sides
            if (Math.abs(left - 72) < 1 && Math.abs(right - 72) < 1 &&
                Math.abs(top_1 - 72) < 1 && Math.abs(bottom - 72) < 1) {
                currentMarginType = 'normal';
            }
            // Narrow: 36 points on all sides
            else if (Math.abs(left - 36) < 1 && Math.abs(right - 36) < 1 &&
                Math.abs(top_1 - 36) < 1 && Math.abs(bottom - 36) < 1) {
                currentMarginType = 'narrow';
            }
            // Moderate: 72 points top/bottom, 54 points left/right
            else if (Math.abs(left - 54) < 1 && Math.abs(right - 54) < 1 &&
                Math.abs(top_1 - 72) < 1 && Math.abs(bottom - 72) < 1) {
                currentMarginType = 'moderate';
            }
            // Wide: 72 points top/bottom, 144 points left/right
            else if (Math.abs(left - 144) < 1 && Math.abs(right - 144) < 1 &&
                Math.abs(top_1 - 72) < 1 && Math.abs(bottom - 72) < 1) {
                currentMarginType = 'wide';
            }
            // Office 2003 Default: 90 points left/right, 72 points top/bottom
            else if (Math.abs(left - 90) < 1 && Math.abs(right - 90) < 1 &&
                Math.abs(top_1 - 72) < 1 && Math.abs(bottom - 72) < 1) {
                currentMarginType = 'office-2003-default';
            }
            else {
                currentMarginType = 'custom-margins';
            }
        }
        return this.commonId + '_' + currentMarginType;
    };
    PageSetupGroup.prototype.createMarginsDropdown = function () {
        var _this = this;
        var marginsItems = [
            {
                id: this.commonId + '_normal',
                text: this.localObj.getConstant('Normal'),
                iconCss: 'e-icons e-de-ctnr-margin-normal'
            },
            {
                id: this.commonId + '_narrow',
                text: this.localObj.getConstant('Narrow'),
                iconCss: 'e-icons e-de-ctnr-margin-narrow'
            },
            {
                id: this.commonId + '_moderate',
                text: this.localObj.getConstant('Moderate'),
                iconCss: 'e-icons e-de-ctnr-margin-moderate'
            },
            {
                id: this.commonId + '_wide',
                text: this.localObj.getConstant('Wide'),
                iconCss: 'e-icons e-de-ctnr-margin-wide'
            },
            {
                id: this.commonId + '_office-2003-default',
                text: this.localObj.getConstant('Office2003Default'),
                iconCss: 'e-icons e-de-ctnr-margin-default'
            },
            {
                id: this.commonId + '_custom-margins',
                text: this.localObj.getConstant('CustomMargins'),
                iconCss: 'e-icons e-de-ctnr-margin-custom'
            }
        ];
        return {
            type: 'DropDown',
            id: MARGINS_DROPDOWN_ID,
            keyTip: 'M',
            dropDownSettings: {
                content: this.localObj.getConstant('Margins'),
                items: marginsItems,
                iconCss: 'e-icons e-file-document',
                select: this.onMarginsChange.bind(this),
                beforeItemRender: function (args) {
                    var currentMarginType = _this.getCurrentMarginType();
                    // Set active class
                    if (args.item.id === currentMarginType) {
                        args.element.classList.add('e-active');
                    }
                    else {
                        args.element.classList.remove('e-active');
                    }
                }
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Margins')
            }
        };
    };
    PageSetupGroup.prototype.onMarginsChange = function (args) {
        var section = this.documentEditor.selection.sectionFormat;
        if (!section) {
            return;
        }
        switch (args.item.text) {
            case this.localObj.getConstant('Normal'):
                this.container.documentEditor.editor.changeMarginValue('normal');
                break;
            case this.localObj.getConstant('Narrow'):
                this.container.documentEditor.editor.changeMarginValue('narrow');
                break;
            case this.localObj.getConstant('Moderate'):
                this.container.documentEditor.editor.changeMarginValue('moderate');
                break;
            case this.localObj.getConstant('Wide'):
                this.container.documentEditor.editor.changeMarginValue('wide');
                break;
            case this.localObj.getConstant('Office2003Default'):
                this.container.documentEditor.editor.changeMarginValue('office2003Default');
                break;
            case this.localObj.getConstant('CustomMargins'):
                this.documentEditor.showDialog('PageSetup');
                break;
        }
    };
    PageSetupGroup.prototype.createOrientationDropdown = function () {
        var _this = this;
        var orientationItems = [
            {
                id: this.commonId + '_portrait',
                text: this.localObj.getConstant('Portrait'),
                iconCss: 'e-icons e-de-ctnr-page-portrait'
            },
            {
                id: this.commonId + '_landscape',
                text: this.localObj.getConstant('Landscape'),
                iconCss: 'e-icons e-de-ctnr-landscape'
            }
        ];
        return {
            type: 'DropDown',
            id: this.commonId + ORIENTATION_DROPDOWN_ID,
            keyTip: 'O',
            dropDownSettings: {
                content: this.localObj.getConstant('Orientation'),
                items: orientationItems,
                iconCss: 'e-icons e-de-ctnr-page-orientation',
                select: this.onOrientationChange.bind(this),
                beforeItemRender: function (args) {
                    // Get current orientation
                    var sectionFormat = _this.documentEditor.selection.sectionFormat;
                    var isLandscape = sectionFormat && sectionFormat.pageWidth > sectionFormat.pageHeight;
                    // Set active class based on current orientation
                    if ((args.item.id === _this.commonId + '_landscape' && isLandscape) ||
                        (args.item.id === _this.commonId + '_portrait' && !isLandscape)) {
                        args.element.classList.add('e-active');
                    }
                    else {
                        args.element.classList.remove('e-active');
                    }
                }
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Orientation')
            }
        };
    };
    PageSetupGroup.prototype.onOrientationChange = function (args) {
        if (args.item.id === this.commonId + '_portrait') {
            this.documentEditor.editor.onPortrait();
        }
        else if (args.item.id === this.commonId + '_landscape') {
            this.documentEditor.editor.onLandscape();
        }
    };
    PageSetupGroup.prototype.getCurrentPageSizeType = function () {
        var sectionFormat = this.documentEditor.selection.sectionFormat;
        var currentPageSize = '';
        // Determine current page size based on section format values
        if (sectionFormat) {
            var width = sectionFormat.pageWidth;
            var height = sectionFormat.pageHeight;
            // Letter: 8.5" x 11" (612 x 792 points)
            if (Math.abs(width - 612) < 1 && Math.abs(height - 792) < 1) {
                currentPageSize = 'letter';
            }
            // Legal: 8.5" x 14" (612 x 1008 points)
            else if (Math.abs(width - 612) < 1 && Math.abs(height - 1008) < 1) {
                currentPageSize = 'legal';
            }
            // Executive: 7.25" x 10.5" (522 x 756 points)
            else if (Math.abs(width - 522) < 1 && Math.abs(height - 756) < 1) {
                currentPageSize = 'executive';
            }
            // A4: 8.27" x 11.69" (595 x 842 points)
            else if (Math.abs(width - 595) < 1 && Math.abs(height - 842) < 1) {
                currentPageSize = 'a4';
            }
            // A5: 5.83" x 8.27" (420 x 595 points)
            else if (Math.abs(width - 420) < 1 && Math.abs(height - 595) < 1) {
                currentPageSize = 'a5';
            }
            else {
                currentPageSize = 'custom-page';
            }
        }
        return currentPageSize;
    };
    PageSetupGroup.prototype.createSizeDropdown = function () {
        var _this = this;
        var sizeItems = [
            {
                id: this.commonId + '_letter',
                text: this.localObj.getConstant('Letter'),
                iconCss: 'e-icons e-de-ctnr-size-letter'
            },
            {
                id: this.commonId + '_legal',
                text: this.localObj.getConstant('Legal'),
                iconCss: 'e-icons e-de-ctnr-size-legal'
            },
            {
                id: this.commonId + '_executive',
                text: this.localObj.getConstant('Executive'),
                iconCss: 'e-icons e-de-ctnr-size-executive'
            },
            {
                id: this.commonId + '_a4',
                text: this.localObj.getConstant('A4'),
                iconCss: 'e-icons e-de-ctnr-size-a4'
            },
            {
                id: this.commonId + '_a5',
                text: this.localObj.getConstant('A5'),
                iconCss: 'e-icons e-de-ctnr-size-a5'
            },
            {
                id: this.commonId + '_custom-page',
                text: this.localObj.getConstant('CustomPageSize'),
                iconCss: 'e-icons e-de-ctnr-size-custom'
            }
        ];
        return {
            type: 'DropDown',
            id: this.commonId + SIZE_DROPDOWN_ID,
            keyTip: 'SZ',
            dropDownSettings: {
                content: this.localObj.getConstant('Size'),
                items: sizeItems,
                iconCss: 'e-icons e-page-size',
                select: this.onPageSizeChange.bind(this),
                beforeItemRender: function (args) {
                    var currentPageSize = _this.getCurrentPageSizeType();
                    // Set active class
                    if (args.item.id === _this.commonId + '_' + currentPageSize) {
                        args.element.classList.add('e-active');
                    }
                    else {
                        args.element.classList.remove('e-active');
                    }
                }
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Size')
            }
        };
    };
    PageSetupGroup.prototype.onPageSizeChange = function (args) {
        var section = this.documentEditor.selection.sectionFormat;
        if (!section) {
            return;
        }
        switch (args.item.text) {
            case this.localObj.getConstant('Letter'):
                this.container.documentEditor.editor.onPaperSize('letter');
                break;
            case this.localObj.getConstant('Legal'):
                this.container.documentEditor.editor.onPaperSize('legal');
                break;
            case this.localObj.getConstant('Executive'):
                this.container.documentEditor.editor.onPaperSize('executive');
                break;
            case this.localObj.getConstant('A4'):
                this.container.documentEditor.editor.onPaperSize('a4');
                break;
            case this.localObj.getConstant('A5'):
                this.container.documentEditor.editor.onPaperSize('a5');
                break;
            case this.localObj.getConstant('CustomPageSize'):
                this.documentEditor.showDialog('PageSetup');
                break;
        }
    };
    PageSetupGroup.prototype.getCurrentColumnType = function () {
        var sectionFormat = this.documentEditor.selection.sectionFormat;
        var currentColumnType = '';
        if (sectionFormat) {
            var columnCount = sectionFormat.numberOfColumns;
            if (columnCount === 1) {
                currentColumnType = 'one';
            }
            else if (columnCount === 2) {
                currentColumnType = 'two';
            }
            else if (columnCount === 3) {
                currentColumnType = 'three';
            }
            else if (columnCount === 4) {
                currentColumnType = 'four';
            }
            else if (columnCount === 5) {
                currentColumnType = 'five';
            }
            else {
                currentColumnType = 'more-columns';
            }
            // Add checks for left/right column types
        }
        return currentColumnType;
    };
    PageSetupGroup.prototype.createColumnsDropdown = function () {
        var _this = this;
        var columnsItems = [
            {
                id: this.commonId + '_one',
                text: this.localObj.getConstant('One'),
                iconCss: 'e-icons e-de-ctnr-page-column-one'
            },
            {
                id: this.commonId + '_two',
                text: this.localObj.getConstant('Two'),
                iconCss: 'e-icons e-de-ctnr-page-column-two'
            },
            {
                id: this.commonId + '_three',
                text: this.localObj.getConstant('Three'),
                iconCss: 'e-icons e-de-ctnr-page-column-three'
            },
            {
                id: this.commonId + '_left',
                text: this.localObj.getConstant('Left'),
                iconCss: 'e-icons e-de-ctnr-page-column-left'
            },
            {
                id: this.commonId + '_right',
                text: this.localObj.getConstant('Right'),
                iconCss: 'e-icons e-de-ctnr-page-column-right'
            },
            {
                id: this.commonId + '_more-columns',
                text: this.localObj.getConstant('MoreColumns'),
                iconCss: 'e-icons e-de-ctnr-more-column'
            }
        ];
        return {
            type: 'DropDown',
            id: this.commonId + COLUMNS_DROPDOWN_ID,
            keyTip: 'C',
            dropDownSettings: {
                content: this.localObj.getConstant('Columns'),
                items: columnsItems,
                iconCss: 'e-icons e-de-ctnr-columns',
                select: this.onColumnsChange.bind(this),
                beforeItemRender: function (args) {
                    var currentColumnType = _this.getCurrentColumnType();
                    // Set active class
                    if (args.item.id === _this.commonId + '_' + currentColumnType) {
                        args.element.classList.add('e-active');
                    }
                    else {
                        args.element.classList.remove('e-active');
                    }
                }
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Columns')
            }
        };
    };
    PageSetupGroup.prototype.onColumnsChange = function (args) {
        var section = this.documentEditor.selection.sectionFormat;
        if (!section) {
            return;
        }
        var editor = this.container.documentEditor.editor;
        switch (args.item.id) {
            case this.commonId + '_one':
                editor.applyColumnFormat(1, true);
                break;
            case this.commonId + '_two':
                editor.applyColumnFormat(2, true);
                break;
            case this.commonId + '_three':
                editor.applyColumnFormat(3, true);
                break;
            case this.commonId + '_left':
                editor.applyLeftColumnFormat();
                break;
            case this.commonId + '_right':
                editor.applyRightColumnFormat();
                break;
            case this.commonId + '_more-columns':
                this.documentEditor.showDialog('Columns');
                break;
        }
    };
    PageSetupGroup.prototype.createBreaksDropdown = function () {
        var breaksItems = [
            {
                id: this.commonId + '_page-break',
                text: this.localObj.getConstant('PageBreak'),
                iconCss: 'e-icons e-de-ctnr-page-break'
            },
            {
                id: this.commonId + '_column-break',
                text: this.localObj.getConstant('ColumnBreak'),
                iconCss: 'e-icons e-de-ctnr-page-break-column'
            },
            {
                id: this.commonId + '_next-page',
                text: this.localObj.getConstant('Next Page'),
                iconCss: 'e-icons e-de-ctnr-section-break'
            },
            {
                id: this.commonId + '_continous',
                text: this.localObj.getConstant('Continuous'),
                iconCss: 'e-icons e-de-ctnr-section-break-continuous'
            }
        ];
        return {
            type: 'DropDown',
            id: this.commonId + BREAKS_DROPDOWN_ID,
            keyTip: 'B',
            dropDownSettings: {
                content: this.localObj.getConstant('Breaks'),
                items: breaksItems,
                iconCss: 'e-icons e-de-ctnr-break',
                select: this.onBreakInsert.bind(this)
            },
            ribbonTooltipSettings: {
                content: this.localObj.getConstant('Break')
            }
        };
    };
    PageSetupGroup.prototype.onBreakInsert = function (args) {
        switch (args.item.id) {
            case this.commonId + '_page-break':
                this.documentEditor.editor.insertPageBreak();
                break;
            case this.commonId + '_column-break':
                this.documentEditor.editor.insertColumnBreak();
                break;
            case this.commonId + '_next-page':
                this.documentEditor.editor.insertSectionBreak();
                break;
            case this.commonId + '_continous':
                this.documentEditor.editorModule.insertSectionBreak(SectionBreakType.Continuous);
                break;
            default:
                break;
        }
    };
    /**
     * @returns {void}
     * @private
     */
    PageSetupGroup.prototype.updateSelection = function () {
        var selection = this.documentEditor.selection;
        var isHeaderFooter = selection.contextType.indexOf('Header') >= 0 ||
            selection.contextType.indexOf('Footer') >= 0;
        var isInTable = selection.contextType.indexOf('Table') >= 0;
        var ribbon = this.container.ribbon.ribbon;
        if (ribbon) {
            if (isInTable || isHeaderFooter || selection.isinFootnote || selection.isinEndnote || selection.isInShape) {
                ribbon.disableItem(this.commonId + BREAKS_DROPDOWN_ID);
            }
            else {
                ribbon.enableItem(this.commonId + BREAKS_DROPDOWN_ID);
            }
        }
        var sectionFormat = selection.sectionFormat;
        var orientationDropdownId = this.commonId + ORIENTATION_DROPDOWN_ID;
        var portraitItem = document.querySelector("[id=\"" + orientationDropdownId + "_popup\"] li[data-value=\"portrait\"]");
        var landscapeItem = document.querySelector("[id=\"" + orientationDropdownId + "_popup\"] li[data-value=\"landscape\"]");
        if (portraitItem && landscapeItem) {
            if (sectionFormat.pageWidth > sectionFormat.pageHeight) {
                // Landscape orientation is active
                portraitItem.classList.remove('e-active');
                landscapeItem.classList.add('e-active');
            }
            else {
                // Portrait orientation is active
                portraitItem.classList.add('e-active');
                landscapeItem.classList.remove('e-active');
            }
        }
    };
    return PageSetupGroup;
}(RibbonGroupBase));
export { PageSetupGroup };
