import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { h, Host } from "@stencil/core";
import { UUID } from '../../utils/uuid';
library.add(faCheck);
export class Option {
    constructor() {
        this.type = 'checkbox';
        this._id = UUID.v4();
        this.handleBlur = () => {
            this.hasFocus = false;
        };
        this.handleClick = (event) => {
            var _a;
            event.preventDefault();
            event.cancelBubble = true;
            const query = this.name
                ? `bce-option[type='${this.type}'][name='${this.name}']`
                : `bce-option[type='${this.type}']`;
            const elements = (_a = this.el.parentNode) === null || _a === void 0 ? void 0 : _a.querySelectorAll(query);
            const options = Array.from(elements || []);
            switch (this.type) {
                case 'checkbox':
                    this.checked = !this.checked;
                    const value = options
                        .filter(c => !!c.checked)
                        .map(c => c.value);
                    this.onOption.emit(value);
                    return;
                case 'dropdown':
                case 'radio':
                    for (const option of options)
                        option.checked = this.el === option;
                    this.onOption.emit(this.value);
                    return;
            }
        };
        this.handleFocus = () => {
            this.hasFocus = true;
        };
        this.ignoreEvent = (event) => {
            event.cancelBubble = true;
        };
    }
    render() {
        return (h(Host, { onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus },
            h("input", { id: this._id, checked: !!this.checked, name: this.name, type: this.type === 'dropdown' ? 'checkbox' : this.type, onInput: this.ignoreEvent }),
            this.type === 'checkbox' && this.checked && (h("bce-icon", { raw: "fas:check", "fixed-width": true })),
            h("label", { htmlFor: this._id, onClick: this.ignoreEvent },
                h("slot", null))));
    }
    static get is() { return "bce-option"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-option.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-option.css"]
    }; }
    static get properties() { return {
        "hasFocus": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "focus",
            "reflect": true
        },
        "checked": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "checked",
            "reflect": true
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": true
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": true
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "OptionType",
                "resolved": "\"checkbox\" | \"dropdown\" | \"radio\"",
                "references": {
                    "OptionType": {
                        "location": "import",
                        "path": "../../models/option-type"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": true,
            "defaultValue": "'checkbox'"
        },
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": true
        }
    }; }
    static get events() { return [{
            "method": "onOption",
            "name": "bce-core:option",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "SelectValue",
                "resolved": "string | string[]",
                "references": {
                    "SelectValue": {
                        "location": "import",
                        "path": "../../models/select-value"
                    }
                }
            }
        }]; }
    static get elementRef() { return "el"; }
}
