import { enterAsClick } from '../../../utils/utils';
import { columnFromCell } from '../table.utils';
import Tunnel from '../../locale/i18n.provider';
var Translations;
(function (Translations) {
    Translations["DESELECT_COLUMN"] = "Deselect column";
    Translations["SELECT_COLUMN"] = "Select Column";
})(Translations || (Translations = {}));
const CELL_SELECTOR = 'td.anj-selectable';
export class ColumnSelection {
    constructor() {
        this.cellClickListener = (e) => this.onCellClick(e);
        this.cellKeyListener = enterAsClick(this.onCellClick.bind(this));
        this.tableWillUpdateListener = () => this.onTableWillChange();
        this.tableDidUpdateListener = () => this.onTableDidChange();
    }
    componentWillLoad() {
        this.table = this.element.closest('anj-table');
    }
    componentDidLoad() {
        this.table.addEventListener('anjTableWillUpdate', this.tableWillUpdateListener);
        this.table.addEventListener('anjTableDidUpdate', this.tableDidUpdateListener);
    }
    componentDidUnload() {
        this.onTableWillChange();
        this.table.removeEventListener('anjTableWillUpdate', this.tableWillUpdateListener);
        this.table.removeEventListener('anjTableDidUpdate', this.tableDidUpdateListener);
    }
    onTableWillChange() {
        Array.from(this.table.querySelectorAll(CELL_SELECTOR)).forEach((el) => {
            el.removeEventListener('click', this.cellClickListener);
            el.removeEventListener('keyup', this.cellKeyListener);
        });
    }
    async onTableDidChange() {
        const columns = await this.table.getColumns();
        Array.from(this.table.querySelectorAll(CELL_SELECTOR)).forEach((el) => {
            const column = columnFromCell(columns, el);
            const selected = this.table.selectedColumnFields.includes(column.field);
            el.tabIndex = 0;
            el.setAttribute('aria-label', selected
                ? `${this.translator(Translations.DESELECT_COLUMN)}: ${column.name}`
                : `${this.translator(Translations.SELECT_COLUMN)}: ${column.name}`);
            el.addEventListener('click', this.cellClickListener);
            el.addEventListener('keyup', this.cellKeyListener);
        });
    }
    onCellClick(event) {
        const target = event.target;
        const cell = target.tagName === 'TD' ? target : target.closest('td');
        const field = cell.dataset.columnField;
        this.table.selectedColumnFields = this.table.selectedColumnFields.includes(field) ? [] : [field];
        this.anjColumnSelect.emit({ field, selectedColumnFields: this.table.selectedColumnFields });
    }
    static get is() { return "anj-column-selection"; }
    static get originalStyleUrls() { return {
        "$": ["column-selection.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["column-selection.css"]
    }; }
    static get properties() { return {
        "translator": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "IntlFormatFn",
                "resolved": "(value: any, variables?: any) => string",
                "references": {
                    "IntlFormatFn": {
                        "location": "import",
                        "path": "../../locale/i18n.provider"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [{
                        "text": undefined,
                        "name": "internal"
                    }],
                "text": ""
            }
        }
    }; }
    static get events() { return [{
            "method": "anjColumnSelect",
            "name": "anjColumnSelect",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the selected columns changes"
            },
            "complexType": {
                "original": "ColumnSelectionChange",
                "resolved": "ColumnSelectionChange",
                "references": {
                    "ColumnSelectionChange": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            }
        }]; }
    static get elementRef() { return "element"; }
}
Tunnel.injectProps(ColumnSelection, ['translator']);
