import { Host, h } from "@stencil/core";
import { isEmpty } from "../../utils/helpers";
export class XSelectOption {
    constructor() {
        this.value = undefined;
        this.ariaLabel = undefined;
        this.selected = undefined;
        this.disabled = undefined;
        this.matched = true;
    }
    /**
     * On options is selected
     */
    handleClick() {
        if (this.disabled) {
            return;
        }
        this.el.closest('x-select').dispatchEvent(new CustomEvent('option-selected', {
            detail: {
                value: this.value,
                text: this.getElementOptionText(),
            },
            bubbles: false
        }));
    }
    /**
     * On request an text content update
     */
    async updateText() {
        return this.getElementOptionText();
    }
    /**
     * Return only the inner text of the option
     */
    getElementOptionText() {
        var _a, _b, _c;
        if (!this.text) {
            const node = Array.from(this.el.childNodes).find(node => {
                return node.nodeType == node.TEXT_NODE && !isEmpty(node.textContent.trim());
            });
            return (_a = node === null || node === void 0 ? void 0 : node.textContent) === null || _a === void 0 ? void 0 : _a.trim();
        }
        else {
            return (_c = (_b = this.text) === null || _b === void 0 ? void 0 : _b.textContent) === null || _c === void 0 ? void 0 : _c.trim();
        }
    }
    /**
     * On component will load action
     */
    connectedCallback() {
        if (!this.value && !this.disabled) {
            this.value = this.getElementOptionText();
        }
        this.ariaLabel = this.getElementOptionText();
    }
    /**
     * On element is mounted
     */
    componentDidLoad() {
        this.input = this.el.closest('x-select').querySelector('.select-input');
        this.input && this.input.addEventListener('input', this.computeSpanText.bind(this));
    }
    /**
     * On element is destroyed
     */
    disconnectedCallback() {
        if (this.input) {
            this.input.removeEventListener('input', this.computeSpanText);
        }
    }
    /**
     * Change the hightlight text on the suggestion item
     */
    computeSpanText() {
        const value = this.input.value.toString();
        const span = this.el.querySelector('div > span');
        const text = span.textContent.trim();
        span.innerHTML = text.replace(new RegExp(value, 'gi'), (x) => `<b>${x}</b>`);
        this.matched = (new RegExp(value, 'gi')).test(text) && value != '';
    }
    /**
     * Element render
     */
    render() {
        return (h(Host, { key: '88f7a1b83a2e4bedf28c84e245562fc491ee43da', value: this.value, disabled: this.disabled, matched: this.matched, selected: this.selected }, h("slot", { key: '815fe8839e9e6a3e0f6835263a2f4e8299dd9276', name: "left" }), h("div", { key: '180aba658d5b9d1b719f2fb69e7a0bce9cd8b8ad' }, h("span", { key: 'f23d293fd99d37aae2f0886a347e381b542bc397', ref: el => this.text = el }, h("slot", { key: 'c49604b8ef3f6c9e3b6ef2df201763f2fed05e08' })), h("small", { key: '5763324ed142a549ddd2df6c541b251d9a4ac996' }, h("slot", { key: 'abff21d5c0b93be95acede1bca5e5c5fc2779b4f', name: "description" }))), h("slot", { key: 'f3539e0adddc81cb49c447135d24f1b6957be335', name: "right" }), this.selected && h("x-icon", { key: '18a8058ffd0afdeaa812012d8bcb49a3b31593c5', name: "check" })));
    }
    static get is() { return "x-select-option"; }
    static get originalStyleUrls() {
        return {
            "$": ["./style.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["style.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element value"
                },
                "attribute": "value",
                "reflect": true
            },
            "ariaLabel": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element aria label"
                },
                "attribute": "aria-label",
                "reflect": true
            },
            "selected": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element selected state"
                },
                "attribute": "selected",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Element disabled state"
                },
                "attribute": "disabled",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "matched": {}
        };
    }
    static get methods() {
        return {
            "updateText": {
                "complexType": {
                    "signature": "() => Promise<string>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<string>"
                },
                "docs": {
                    "text": "On request an text content update",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "click",
                "method": "handleClick",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
