import { h } from "@stencil/core";
import { isFocusable } from '../../../../utils/a11y';
import { keyFromData } from '../../table.utils';
import Tunnel from '../../../locale/i18n.provider';
var Translations;
(function (Translations) {
    Translations["DESELECT"] = "Deselect";
    Translations["SELECT"] = "Select";
})(Translations || (Translations = {}));
export class RowSelectControl {
    constructor() {
        this.clickListener = (e) => { this.onRowSelect(e); };
        /**
         * The key for the row
         */
        this.labelFormatter = this.defaultLabelFormatter;
        /**
         * The mode of selection
         * Possible values are: `"batch"` and `"single`. Defaults to "single"
         */
        this.mode = 'single';
        /**
         * If true, will render a checkbox for batch selection and a radio button for single
         */
        this.showCheck = false;
    }
    onSelected() {
        if (!this.rowEl || this.checkOnly()) {
            return;
        }
        if (this.selected) {
            this.rowEl.classList.add('anj-selected');
        }
        else {
            this.rowEl.classList.remove('anj-selected');
        }
    }
    async componentDidLoad() {
        this.rowEl = this.element.parentElement.parentElement;
        this.onSelected();
        if (!this.checkOnly()) {
            this.rowEl.classList.add('anj-selectable');
            this.rowEl.addEventListener('click', this.clickListener);
        }
    }
    componentDidUnload() {
        if (!this.checkOnly()) {
            this.rowEl.removeEventListener('click', this.clickListener);
        }
    }
    onRowSelect(event) {
        if (event && event instanceof MouseEvent && event.composedPath().find((e) => e.tagName !== 'TR' && isFocusable(e))) {
            return;
        }
        const checkbox = event ? event.target : undefined;
        if (!checkbox || checkbox.checked !== this.selected) {
            this.selected = checkbox ? checkbox.checked : !this.selected;
            this.anjRowSelectClick.emit({ key: keyFromData(this.rowKey) });
        }
    }
    defaultLabelFormatter(key, selected) {
        return selected ? `${this.translator(Translations.DESELECT)}: ${key}` : `${this.translator(Translations.SELECT)}: ${key}`;
    }
    checkOnly() {
        return (this.mode === 'batch' && this.showCheck);
    }
    render() {
        if (!this.showCheck)
            return;
        const label = this.labelFormatter(this.rowKey, this.selected);
        const className = 'anj-selection-control';
        return this.mode === 'batch' ?
            h("anj-checkbox", { value: `${this.rowKey}`, name: `${this.rowKey}-selected`, checked: this.selected, solo: true, "aria-label": label, class: className })
            : h("anj-radio", { value: `${this.rowKey}`, class: className, checked: this.selected, "aria-label": label, name: "anj-row-select", solo: true });
    }
    static get is() { return "anj-row-select-control"; }
    static get originalStyleUrls() { return {
        "$": ["row-select-control.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["row-select-control.css"]
    }; }
    static get properties() { return {
        "rowKey": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "number | string",
                "resolved": "number | string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The key for the row"
            },
            "attribute": "row-key",
            "reflect": false
        },
        "labelFormatter": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "BooleanLabelFormatter",
                "resolved": "(key: any, selected: boolean) => string",
                "references": {
                    "BooleanLabelFormatter": {
                        "location": "import",
                        "path": "../../../../types/types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The key for the row"
            },
            "defaultValue": "this.defaultLabelFormatter"
        },
        "mode": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "RowSelectionMode",
                "resolved": "\"batch\" | \"single\"",
                "references": {
                    "RowSelectionMode": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "The mode of selection\nPossible values are: `\"batch\"` and `\"single`. Defaults to \"single\""
            },
            "attribute": "mode",
            "reflect": false,
            "defaultValue": "'single'"
        },
        "selected": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is the row selected"
            },
            "attribute": "selected",
            "reflect": false
        },
        "showCheck": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "If true, will render a checkbox for batch selection and a radio button for single"
            },
            "attribute": "show-check",
            "reflect": true,
            "defaultValue": "false"
        },
        "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": "anjRowSelectClick",
            "name": "anjRowSelectClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Emitted when the the row for this selector has been selected or de-selected"
            },
            "complexType": {
                "original": "RowSelectionChange",
                "resolved": "RowSelectionChange",
                "references": {
                    "RowSelectionChange": {
                        "location": "import",
                        "path": "../../table.types"
                    }
                }
            }
        }]; }
    static get elementRef() { return "element"; }
    static get watchers() { return [{
            "propName": "selected",
            "methodName": "onSelected"
        }]; }
    static get listeners() { return [{
            "name": "anjChange",
            "method": "onRowSelect",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
Tunnel.injectProps(RowSelectControl, ['translator']);
