import { enterAsClick } from '../../../utils/utils';
import { keyFromData } from '../table.utils';
import Tunnel from '../../locale/i18n.provider';
const CELL_SELECTOR = 'td.anj-selectable';
var Translations;
(function (Translations) {
    Translations["SELECT_CELL"] = "Select Cell";
})(Translations || (Translations = {}));
export class CellSelection {
    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);
        });
    }
    onTableDidChange() {
        Array.from(this.table.querySelectorAll(CELL_SELECTOR)).forEach((el) => {
            el.tabIndex = 0;
            el.setAttribute('aria-label', this.translator(Translations.SELECT_CELL));
            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 columnField = cell.dataset.columnField;
        const rowKey = keyFromData(cell.dataset.rowKey);
        this.anjCellSelect.emit({ cell, columnField, rowKey });
    }
    static get is() { return "anj-cell-selection"; }
    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": "anjCellSelect",
            "name": "anjCellSelect",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the selected cell changes"
            },
            "complexType": {
                "original": "CellSelectionChange",
                "resolved": "CellSelectionChange",
                "references": {
                    "CellSelectionChange": {
                        "location": "import",
                        "path": "../table.types"
                    }
                }
            }
        }]; }
    static get elementRef() { return "element"; }
}
Tunnel.injectProps(CellSelection, ['translator']);
