import { library } from '@fortawesome/fontawesome-svg-core';
import { faCheck, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import { h, Host } from "@stencil/core";
import { ripple } from '../../utils/ripple';
import { UUID } from '../../utils/uuid';
library.add(faCheck, faTimesCircle);
const INPUT_TYPE_MAP = {
    action: 'button',
    choice: 'radio',
    filter: 'checkbox',
    input: 'text'
};
export class BceChip {
    constructor() {
        this._id = UUID.v4();
        this.handleClick = () => {
            const query = this.name
                ? `bce-chip[type='${this.type}'][name='${this.name}']`
                : `bce-chip[type='${this.type}']`;
            const elements = this.el.parentNode.querySelectorAll(query);
            const chips = Array.from(elements);
            switch (this.type) {
                case 'choice':
                    for (const chip of chips)
                        chip.checked = this.el === chip ? !chip.checked : false;
                    this.onChip.emit(this.checked ? this.value : null);
                    return;
                case 'filter':
                    this.checked = !this.checked;
                    const value = chips
                        .filter(c => !!c.checked)
                        .map(c => c.value);
                    this.onChip.emit(value);
                    return;
            }
        };
        this.handleMouseDown = (event) => {
            if (this.disabled)
                return;
            ripple(this.el.shadowRoot.querySelector('label'), event);
        };
        this.handleRemove = (event) => {
            if (this.disabled)
                return;
            this.onRemove.emit();
            event.stopPropagation();
        };
        this.ignoreClick = (event) => {
            event.preventDefault();
            event.cancelBubble = true;
        };
    }
    isColor(color = '') {
        const s = new Option().style;
        s.color = color;
        return !!s.color;
    }
    renderThumbnail() {
        if (!this.thumbnail)
            return;
        const isColor = this.isColor(this.thumbnail);
        const color = isColor ? this.thumbnail : 'rgba(0, 0, 0, 20%)';
        return (h("div", { style: { backgroundColor: color }, "data-thumbnail": true }, !isColor && h("img", { src: this.thumbnail })));
    }
    renderIcon() {
        let icon = this.icon;
        switch (this.type) {
            case 'filter':
                icon = this.checked ? icon || 'fas:check' : '';
                break;
        }
        return (icon && (h("div", { "data-icon": true },
            h("bce-icon", { raw: icon, "fixed-width": true }))));
    }
    renderRemove() {
        if (!this.removable || this.disabled)
            return;
        return (h("div", { "data-remove": true, onClick: this.handleRemove },
            h("bce-icon", { pre: "fas", name: "times-circle" })));
    }
    render() {
        if (this.design === 'outline')
            console.warn('[bce-chip] The outline design is unimplemented.');
        return (h(Host, { onMouseDown: this.handleMouseDown },
            this.renderThumbnail(),
            this.renderIcon(),
            h("input", { checked: !!this.checked, id: this._id, name: this.name, role: this.a11yRole, type: this.type ? INPUT_TYPE_MAP[this.type] : 'button', value: this.value, onClick: this.ignoreClick }),
            h("label", { htmlFor: this._id, onClick: this.handleClick },
                h("slot", null)),
            this.renderRemove()));
    }
    static get is() { return "bce-chip"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "default": ["bce-chip.scss"]
    }; }
    static get styleUrls() { return {
        "default": ["bce-chip.css"]
    }; }
    static get properties() { return {
        "design": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "ChipDesign",
                "resolved": "\"contained\" | \"outline\"",
                "references": {
                    "ChipDesign": {
                        "location": "import",
                        "path": "../../models/chip-design"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "design",
            "reflect": true
        },
        "icon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon",
            "reflect": true
        },
        "removable": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "removable",
            "reflect": true
        },
        "thumbnail": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "thumbnail",
            "reflect": true
        },
        "type": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "ChipType",
                "resolved": "\"action\" | \"choice\" | \"filter\" | \"input\"",
                "references": {
                    "ChipType": {
                        "location": "import",
                        "path": "../../models/chip-type"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "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
        },
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": true
        },
        "a11yRole": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "a-1-1y-role",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "onChip",
            "name": "bce-core:chip",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "SelectValue",
                "resolved": "string | string[]",
                "references": {
                    "SelectValue": {
                        "location": "import",
                        "path": "../../models/select-value"
                    }
                }
            }
        }, {
            "method": "onRemove",
            "name": "remove",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "el"; }
}
