/*!
 * KoliBri - The accessible HTML-Standard
 */
'use strict';

var index = require('./index-DBbl8tEq.js');
var tslib_es6 = require('./tslib.es6-Cm0ytgPY.js');
var componentNames = require('./component-names-5KS_pYRF.js');
var i18n = require('./i18n-DL7vJXNn.js');
var events = require('./events-DN9qldnr.js');
require('./common-DAAt5YQ7.js');
require('./i18n-CgUN6lev.js');

const parseColumnWidth = (width) => {
    return Number.isFinite(width) && width !== undefined && width > 0 ? width : undefined;
};

const KolTableSettings = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.headerCells = [];
        this.editingHeaderCells = [];
        this.errorMessage = null;
        this.translateTableSettings = i18n.translate('kol-table-settings');
        this.translateTableSettingsCancel = i18n.translate('kol-table-settings-cancel');
        this.translateTableSettingsApply = i18n.translate('kol-table-settings-apply');
        this.translateErrorAllInvisible = i18n.translate('kol-table-settings-error-all-invisible');
        this.translateColumnNotHidable = i18n.translate('kol-table-settings-column-not-hidable');
        this._horizontalHeaderCells = [];
    }
    handleHeaderCellsChange(newValue) {
        this.headerCells = newValue.map((row) => [...row]);
        this.editingHeaderCells = newValue.map((row) => row.map((cell) => (Object.assign({}, cell))));
    }
    componentWillLoad() {
        this.handleHeaderCellsChange(this._horizontalHeaderCells);
    }
    getPrimaryRow() {
        var _a;
        return (_a = this.editingHeaderCells[this.editingHeaderCells.length - 1]) !== null && _a !== void 0 ? _a : [];
    }
    updatePrimaryRow(newRow) {
        this.editingHeaderCells = this.editingHeaderCells.map((row, index, arr) => (index === arr.length - 1 ? newRow : row));
    }
    moveColumn(columnId, direction) {
        const row = [...this.getPrimaryRow()];
        const sourceIndex = row.findIndex((col) => col.key === columnId);
        if (sourceIndex === -1)
            return;
        let targetIndex;
        if (direction === 'up') {
            if (sourceIndex === 0)
                return;
            targetIndex = sourceIndex - 1;
        }
        else {
            if (sourceIndex === row.length - 1)
                return;
            targetIndex = sourceIndex + 1;
        }
        const [source] = row.splice(sourceIndex, 1);
        row.splice(targetIndex, 0, source);
        this.updatePrimaryRow(row);
    }
    handleVisibilityChange(key, visible) {
        const row = this.getPrimaryRow().map((col) => (col.key === key && col.hidable !== false ? Object.assign(Object.assign({}, col), { visible: Boolean(visible) }) : col));
        this.updatePrimaryRow(row);
    }
    handleWidthChange(key, width) {
        const row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? Object.assign(Object.assign({}, col), { width: Number(width) }) : col));
        this.updatePrimaryRow(row);
    }
    handleCancel() {
        var _a;
        this.editingHeaderCells = this.headerCells.map((row) => [...row]);
        this.errorMessage = null;
        void ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
    }
    handleSubmit(event) {
        var _a;
        event.preventDefault();
        const primaryRow = this.getPrimaryRow();
        const hasVisibleColumn = primaryRow.some((column) => column.visible !== false);
        if (!hasVisibleColumn) {
            this.errorMessage = this.translateErrorAllInvisible;
            return;
        }
        else if (this.host) {
            this.errorMessage = null;
            this.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => (Object.assign({}, cell))));
            const sanitizedHeaderCells = this.editingHeaderCells.map((row) => row.map((column) => {
                const _a = column, { hidable, resizable, sortable, visible, width } = _a, rest = tslib_es6.__rest(_a, ["hidable", "resizable", "sortable", "visible", "width"]);
                const cell = Object.assign({}, rest);
                if (visible !== undefined)
                    cell.visible = visible;
                if (hidable !== undefined)
                    cell.hidable = hidable;
                if (sortable !== undefined)
                    cell.sortable = sortable;
                if (resizable !== undefined)
                    cell.resizable = resizable;
                if (width !== undefined && width !== null)
                    cell.width = width;
                return cell;
            }));
            events.dispatchDomEvent(this.host, events.KolEvent.changeHeaderCells, sanitizedHeaderCells);
            void ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
        }
    }
    render() {
        const columns = this.getPrimaryRow();
        return (index.h(componentNames.KolPopoverButtonWcTag, { key: '47831336493b2b1455a9fb3033a7cfd2c0326bc8', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, index.h("div", { key: '211428e2280c4277f22457101db760f291ea3b3c', class: "kol-table-settings__content" }, index.h(componentNames.KolHeadingTag, { key: '1944bb47d22317f1957fafe9838dcca62f677040', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && index.h(componentNames.KolAlertWcTag, { key: '1bf58753eee563a299905c0438e406dd69fbba1a', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), index.h("form", { key: 'f0789d72f4f2a784a2d5171f7b29633c367b5878', onSubmit: this.handleSubmit.bind(this) }, index.h("div", { key: 'aa906b2c0d984c0cf4cdd3a27df0754cf36485b0', class: "kol-table-settings__columns-container" }, index.h("div", { key: 'edb6a15875d74f7828c8fdb8a271c4cf65a728c8', class: "kol-table-settings__columns" }, columns.map((column, index$1) => (index.h("div", { key: column.key, class: "kol-table-settings__column" }, index.h(componentNames.KolInputCheckboxTag, { _checked: column.visible !== false, _label: `${column.label}${column.hidable === false ? ` (${this.translateColumnNotHidable})` : ''}`, _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), index.h("span", { class: "kol-table-settings__column-label" }, column.label), index.h(componentNames.KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: i18n.translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), index.h(componentNames.KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: i18n.translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index$1 === 0, "data-testid": "table-settings-move-up" }), index.h(componentNames.KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: i18n.translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index$1 === columns.length - 1, "data-testid": "table-settings-move-down" })))))), index.h("div", { key: '95e16a238529a4cc22351c50153f0fd105321dd5', class: "kol-table-settings__actions" }, index.h(componentNames.KolButtonWcTag, { key: 'b67cae11ce5ee0d1d3ad3cfe09a6bcbd273d99c9', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), index.h(componentNames.KolButtonWcTag, { key: '3b119117b1303290c78297c981738696042c5fa4', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
    }
    get host() { return index.getElement(this); }
    static get watchers() { return {
        "_horizontalHeaderCells": ["handleHeaderCellsChange"]
    }; }
};

exports.kol_table_settings_wc = KolTableSettings;
//# sourceMappingURL=kol-table-settings-wc.entry.cjs.js.map
