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: '93872902bb28c2eb2a25d30c83901775bd8f3c41', value: this.value, disabled: this.disabled, matched: this.matched, selected: this.selected }, h("slot", { key: '8c53e9b0d275d526aa06854f9eca332157086316', name: "left" }), h("div", { key: '9231bef2caeff49e9d862939973c1e316ded068a' }, h("span", { key: '8ed276e1725d8147b86d63797d3798928a28900e', ref: el => this.text = el }, h("slot", { key: 'b8cf706fae95bc58e299f3a95a09f4b40d3508b4' })), h("small", { key: 'b48d6def60b0068b59a9ae1b94cbb7bacddd7f8a' }, h("slot", { key: '6dce19c83a74e7ac55208be5ea7064022e698188', name: "description" }))), h("slot", { key: 'd7a376285f189af08c3b405d485fe840c2357068', name: "right" }), this.selected && h("x-icon", { key: '8f0dfbbe616975099aea5775f363b4480639cc2c', 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
            }];
    }
}
