import { getIconName } from "../icon/get-icon-props";
import { h } from "@stencil/core";
/**
 * This components displays a different label depending on the current given
 * value. A label can consist of a text and an optional icon. If no matching
 * label is found among the given `labels`, the `defaultLabel` will be displayed.
 *
 * One use case of the component is to enhance the visualization of a `boolean`
 * field like a checkbox or switch in a `readonly` state.
 *
 * The reason we offer this component is that the default styling
 * of the Checkbox or Toggle switch in the `readonly` state may not always
 * provide the best way of _visualizing information_, potentially leading to
 * confusion and negatively affecting the end-users' experience.
 *
 * @exampleComponent limel-example-dynamic-label
 * @exampleComponent limel-example-dynamic-label-readonly-boolean
 */
export class DynamicLabel {
    constructor() {
        /**
         * The label to display when no matching value is found in the `labels`
         * array. This is a fallback label that ensures there's always a label
         * displayed for the component.
         */
        this.defaultLabel = {};
        /**
         * A list of available labels. Each label has a corresponding value that
         * will be matched with the current `value` of the component to determine
         * what label to display.
         */
        this.labels = [];
    }
    render() {
        var _a, _b;
        const label = this.labels.find((l) => l.value === this.value);
        return [
            this.renderIcon((_a = label === null || label === void 0 ? void 0 : label.icon) !== null && _a !== void 0 ? _a : this.defaultLabel.icon),
            this.renderLabel((_b = label === null || label === void 0 ? void 0 : label.text) !== null && _b !== void 0 ? _b : this.defaultLabel.text),
        ];
    }
    renderIcon(icon) {
        const iconName = getIconName(icon);
        if (!iconName) {
            return;
        }
        let iconColor;
        let iconBackgroundColor;
        if (typeof icon === 'object') {
            iconColor = icon.color;
            iconBackgroundColor = icon.backgroundColor;
        }
        const iconProps = {
            role: 'presentation',
            name: iconName,
            style: {
                color: iconColor,
                'background-color': iconBackgroundColor,
            },
        };
        return h("limel-icon", Object.assign({}, iconProps));
    }
    renderLabel(label = '') {
        return h("label", null, label);
    }
    static get is() { return "limel-dynamic-label"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dynamic-label.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dynamic-label.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "LabelValue",
                    "resolved": "boolean | number | string",
                    "references": {
                        "LabelValue": {
                            "location": "import",
                            "path": "./label.types",
                            "id": "src/components/dynamic-label/label.types.ts::LabelValue",
                            "referenceLocation": "LabelValue"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The current value of the component which is used to match with the given\n`labels` to determine what label to display.\n\nIf not matching label is found, the `defaultLabel` is displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "defaultLabel": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Omit<Label, 'value'>",
                    "resolved": "\"value\" | Label<LabelValue>",
                    "references": {
                        "Omit": {
                            "location": "global",
                            "id": "global::Omit"
                        },
                        "Label": {
                            "location": "import",
                            "path": "./label.types",
                            "id": "src/components/dynamic-label/label.types.ts::Label",
                            "referenceLocation": "Label"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label to display when no matching value is found in the `labels`\narray. This is a fallback label that ensures there's always a label\ndisplayed for the component."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{}"
            },
            "labels": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Label[]",
                    "resolved": "Label<LabelValue>[]",
                    "references": {
                        "Label": {
                            "location": "import",
                            "path": "./label.types",
                            "id": "src/components/dynamic-label/label.types.ts::Label",
                            "referenceLocation": "Label"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A list of available labels. Each label has a corresponding value that\nwill be matched with the current `value` of the component to determine\nwhat label to display."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
}
