import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { Enums } from '../../utils/enums/enums';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { RESPONSIVE_TABLE_NAME } from '../component-names';
import { REGEX_CSS_NUMBER_VALUE } from './../../utils/props-validation/props-validation';
import { MAutoHorizontalScroll, MAutoHorizontalScrollGradientStyle } from './../auto-horizontal-scroll/auto-horizontal-scroll';
import { MProgress } from './../progress/progress';
import { getHeadRowsFilterAndSort, getTotalColumnsLength, MTableGroupHeaderStyle, MTableHeadStyle, MTableRowsStyle } from './responsive-table-commons';
import WithRender from './responsive-table.html?style=./responsive-table.scss';
import { MTableEmptyRow } from './table-empty-row/table-empty-row';
import { MTableGroup } from './table-group/table-group';
import { MTableHead } from './table-head/table-head';
var MResponsiveTable = /** @class */ (function (_super) {
    __extends(MResponsiveTable, _super);
    function MResponsiveTable() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.horizontalScrollOffsetInterne = 0;
        _this.hasHorizontalScroll = false;
        _this.tableComponentWidth = '100%';
        _this.headRowsInterne = {};
        return _this;
    }
    MResponsiveTable.prototype.emitEmptyButtonClick = function (rowsGroup) { };
    MResponsiveTable.prototype.emitSort = function (_column) { };
    MResponsiveTable.prototype.emitUpdateHorizontalScrollOffset = function (horizontalScrollOffset) { };
    MResponsiveTable.prototype.emitHorizontalScollbarWidth = function (scrollbarWidth) { };
    MResponsiveTable.prototype.emitOpenAccordion = function (rowsGroup) { };
    MResponsiveTable.prototype.emitCloseAccordion = function (rowsGroup) { };
    MResponsiveTable.prototype.emitPreviousButtonClick = function (event) { };
    MResponsiveTable.prototype.emitNextButtonClick = function (event) { };
    MResponsiveTable.prototype.onHorizontalScrollOffsetChangement = function (value) {
        if (this.horizontalScrollOffsetInterne !== value && value) {
            this.horizontalScrollOffsetInterne = value;
        }
    };
    MResponsiveTable.prototype.onHeadRowsChange = function () {
        this.initializeHeadRow();
    };
    MResponsiveTable.prototype.onColumnsChange = function () {
        this.initializeHeadRow();
    };
    Object.defineProperty(MResponsiveTable.prototype, "idTable", {
        get: function () {
            return this.id || "m-responsive-table-" + uuid.generate();
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "formatRowGroups", {
        get: function () {
            if (this.rows && this.rows.length) {
                var newRowsGroup = [
                    {
                        name: "rowGroupName" + uuid.generate(),
                        rows: this.rows
                    }
                ];
                return this.rowGroups
                    ? this.rowGroups.concat(newRowsGroup)
                    : newRowsGroup;
            }
            else if (this.rowGroups) {
                return this.rowGroups;
            }
            return [];
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "headRowsFilterAndSort", {
        get: function () {
            return this.headRowsInterne;
        },
        set: function (headRows) {
            var headRowsArray = this.getHeadRowsArray(headRows || {});
            var hasSomeMainColumnsInHeadRowsArray = this.hasSomeMainColumnsInHeadRowsArray(headRowsArray);
            if (!hasSomeMainColumnsInHeadRowsArray && headRowsArray.length) {
                headRows[Object.keys(headRows)[headRowsArray.length - 1]].mainColumns = true;
            }
            this.headRowsInterne = getHeadRowsFilterAndSort(headRows);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "allColumns", {
        get: function () {
            var _this = this;
            return Object.keys(this.headRowsFilterAndSort)
                .reduce(function (acc, cur) {
                _this.headRowsFilterAndSort[cur].columns.forEach(function (c) {
                    acc.push(c);
                });
                return acc;
            }, []);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "mainColumns", {
        get: function () {
            var _this = this;
            var formatHeadRowKeys = Object.keys(this.headRowsFilterAndSort);
            var keyMainColumns = formatHeadRowKeys[formatHeadRowKeys.findIndex(function (key) { return _this.headRowsFilterAndSort[key].mainColumns; })];
            return this.headRowsFilterAndSort[keyMainColumns].columns || [];
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "mainColumnsLength", {
        get: function () {
            return getTotalColumnsLength(this.mainColumns);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "hasRowsGroup", {
        get: function () {
            return Boolean(this.formatRowGroups && this.formatRowGroups.length);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "horizontalScrollOffsetProp", {
        get: function () {
            return this.horizontalScrollOffsetInterne;
        },
        set: function (value) {
            this.horizontalScrollOffsetInterne = value;
            this.emitUpdateHorizontalScrollOffset(this.horizontalScrollOffsetInterne);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "firstColumnFixed", {
        get: function () {
            return this.firstColumnFixedActive && this.hasHorizontalScroll;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MResponsiveTable.prototype, "hasDefaultEmptyArea", {
        get: function () {
            return Boolean(this.defaultEmptyArea &&
                Object.keys(this.defaultEmptyArea).length > 0);
        },
        enumerable: false,
        configurable: true
    });
    MResponsiveTable.prototype.resizeComponant = function (properties) {
        if (!properties) {
            return;
        }
        this.hasHorizontalScroll = properties.hasHorizontalScroll;
        this.tableComponentWidth = properties.componentWidth;
        this.emitHorizontalScollbarWidth(properties.horizontalScollbarWidth);
    };
    MResponsiveTable.prototype.getSpacingTop = function (rowsGroup) {
        if (rowsGroup.spacingTop === undefined) {
            if (this.groupHeaderStyle === MTableGroupHeaderStyle.Any) {
                return undefined;
            }
            return '2px';
        }
        else if (REGEX_CSS_NUMBER_VALUE.test(rowsGroup.spacingTop)) {
            return rowsGroup.spacingTop;
        }
        else {
            this.$log.error("rowsGroup.spacingTop value (\"" + rowsGroup.spacingTop + "\") must match with this regEx " + REGEX_CSS_NUMBER_VALUE);
            return undefined;
        }
    };
    MResponsiveTable.prototype.getSpacingTopAreaStyle = function (rowsGroup) {
        return {
            height: this.getSpacingTop(rowsGroup)
        };
    };
    MResponsiveTable.prototype.getSpacingTopStyle = function (rowsGroup) {
        return {
            height: this.getSpacingTop(rowsGroup),
            width: this.tableComponentWidth,
            left: this.horizontalScrollOffsetInterne + "px"
        };
    };
    MResponsiveTable.prototype.beforeMount = function () {
        if (!this.rows && !this.rowGroups) {
            this.$log.error("\"rows\" prop or \"row-groups\" need to be declared on \"" + RESPONSIVE_TABLE_NAME + "\" component.");
        }
        this.initializeHeadRow();
    };
    MResponsiveTable.prototype.initializeHeadRow = function () {
        if (!this.columns && !this.headRows) {
            this.$log.error("\"columns\" prop or \"head-rows\" prop need to be declared on \"" + RESPONSIVE_TABLE_NAME + "\" component.");
            return;
        }
        var headRows = this.headRows ? this.headRows : {};
        var headRowsArray = this.getHeadRowsArray(headRows);
        if (this.columns && this.columns.length > 0) {
            var hasSomeMainColumnsInHeadRowsArray = this.hasSomeMainColumnsInHeadRowsArray(headRowsArray);
            var maxOrder = Math.max.apply(Math, headRowsArray.map(function (hr) { return hr.order; }));
            headRows = headRowsArray.length ? headRows : {};
            headRows[hasSomeMainColumnsInHeadRowsArray ? "last-row-" + this.idTable + "-internal-name" : "main-row-" + this.idTable + "-internal-name"] = {
                order: maxOrder && maxOrder > 0 ? maxOrder + 1 : 1,
                mainColumns: !hasSomeMainColumnsInHeadRowsArray,
                columns: this.columns
            };
            this.headRowsFilterAndSort = headRows;
        }
        else if (headRowsArray.length > 0) {
            this.headRowsFilterAndSort = headRows;
        }
    };
    MResponsiveTable.prototype.getHeadRowsArray = function (headRows) {
        return headRows ? Object.keys(headRows).map(function (key) {
            return headRows[key];
        }) : [];
    };
    MResponsiveTable.prototype.hasSomeMainColumnsInHeadRowsArray = function (headRowsArray) {
        return Boolean(headRowsArray.length) && headRowsArray.some(function (hr) {
            return hr.mainColumns;
        });
    };
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "id", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "role", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "headRows", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "columns", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "rowGroups", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "rows", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "defaultEmptyArea", void 0);
    __decorate([
        Prop({
            default: false
        })
    ], MResponsiveTable.prototype, "waiting", void 0);
    __decorate([
        Prop({ default: true })
    ], MResponsiveTable.prototype, "displayTableHead", void 0);
    __decorate([
        Prop({
            default: true
        })
    ], MResponsiveTable.prototype, "rowHighlightedOnHover", void 0);
    __decorate([
        Prop({
            default: MTableHeadStyle.Light,
            validator: function (value) {
                return Enums.toValueArray(MTableHeadStyle).includes(value);
            }
        })
    ], MResponsiveTable.prototype, "headStyle", void 0);
    __decorate([
        Prop({
            default: MTableRowsStyle.AlternateBackground,
            validator: function (value) {
                return Enums.toValueArray(MTableRowsStyle).includes(value);
            }
        })
    ], MResponsiveTable.prototype, "rowsStyle", void 0);
    __decorate([
        Prop({
            default: MTableGroupHeaderStyle.Light,
            validator: function (value) {
                return Enums.toValueArray(MTableGroupHeaderStyle).includes(value);
            }
        })
    ], MResponsiveTable.prototype, "groupHeaderStyle", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "groupHeaderClassName", void 0);
    __decorate([
        Prop({
            default: true
        })
    ], MResponsiveTable.prototype, "dragActive", void 0);
    __decorate([
        Prop({
            default: true
        })
    ], MResponsiveTable.prototype, "leftGradientActive", void 0);
    __decorate([
        Prop({
            default: true
        })
    ], MResponsiveTable.prototype, "rightGradientActive", void 0);
    __decorate([
        Prop({
            default: MAutoHorizontalScrollGradientStyle.White,
            validator: function (value) {
                return Enums.toValueArray(MAutoHorizontalScrollGradientStyle).includes(value);
            }
        })
    ], MResponsiveTable.prototype, "gradientStyle", void 0);
    __decorate([
        Prop({
            default: false
        })
    ], MResponsiveTable.prototype, "previousButtonActive", void 0);
    __decorate([
        Prop({
            default: false
        })
    ], MResponsiveTable.prototype, "nextButtonActive", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "previousButtonText", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "nextButtonText", void 0);
    __decorate([
        Prop({
            default: false
        })
    ], MResponsiveTable.prototype, "firstColumnFixedActive", void 0);
    __decorate([
        Prop({
            default: '100%',
            validator: function (value) {
                return REGEX_CSS_NUMBER_VALUE.test(value);
            }
        })
    ], MResponsiveTable.prototype, "tableMinWidth", void 0);
    __decorate([
        Prop()
    ], MResponsiveTable.prototype, "horizontalScrollOffset", void 0);
    __decorate([
        Prop({
            default: true
        })
    ], MResponsiveTable.prototype, "displayHorizontalScrollbar", void 0);
    __decorate([
        Emit('empty-button-click')
    ], MResponsiveTable.prototype, "emitEmptyButtonClick", null);
    __decorate([
        Emit('sort')
    ], MResponsiveTable.prototype, "emitSort", null);
    __decorate([
        Emit('update:horizontalScrollOffset')
    ], MResponsiveTable.prototype, "emitUpdateHorizontalScrollOffset", null);
    __decorate([
        Emit('horizontal-scollbar-width')
    ], MResponsiveTable.prototype, "emitHorizontalScollbarWidth", null);
    __decorate([
        Emit('open-accordion')
    ], MResponsiveTable.prototype, "emitOpenAccordion", null);
    __decorate([
        Emit('close-accordion')
    ], MResponsiveTable.prototype, "emitCloseAccordion", null);
    __decorate([
        Emit('previous-button-click')
    ], MResponsiveTable.prototype, "emitPreviousButtonClick", null);
    __decorate([
        Emit('next-button-click')
    ], MResponsiveTable.prototype, "emitNextButtonClick", null);
    __decorate([
        Watch('horizontalScrollOffset', { immediate: true })
    ], MResponsiveTable.prototype, "onHorizontalScrollOffsetChangement", null);
    __decorate([
        Watch('headRows', { immediate: true })
    ], MResponsiveTable.prototype, "onHeadRowsChange", null);
    __decorate([
        Watch('columns')
    ], MResponsiveTable.prototype, "onColumnsChange", null);
    MResponsiveTable = __decorate([
        WithRender,
        Component({
            components: {
                MAutoHorizontalScroll: MAutoHorizontalScroll,
                MTableHead: MTableHead,
                MTableGroup: MTableGroup,
                MTableEmptyRow: MTableEmptyRow,
                MProgress: MProgress
            }
        })
    ], MResponsiveTable);
    return MResponsiveTable;
}(ModulVue));
export { MResponsiveTable };
var ResponsiveTablePlugin = {
    install: function (v, options) {
        v.prototype.$log.debug(RESPONSIVE_TABLE_NAME, 'plugin.install');
        v.component(RESPONSIVE_TABLE_NAME, MResponsiveTable);
    }
};
export default ResponsiveTablePlugin;
//# sourceMappingURL=responsive-table.js.map