import { h, Host } from "@stencil/core";
import { getMouseEventHandlers } from "../../util/3d-tilt-hover-effect";
import { getRel } from "../../util/link-helper";
/**
 * This component can be used on places such as a start page or a dashboard.
 * It offers features for visualizing aggregated data along with supplementary
 * information.
 *
 * If clicking on the component should navigate the user to
 * a new screen or web page, you need to provide a URL,
 * using the `link` property.
 *
 * @exampleComponent limel-example-info-tile
 * @exampleComponent limel-example-info-tile-badge
 * @exampleComponent limel-example-info-tile-progress
 * @exampleComponent limel-example-info-tile-loading
 * @exampleComponent limel-example-info-tile-primary-slot
 * @exampleComponent limel-example-info-tile-styling
 */
export class InfoTile {
    constructor() {
        /**
         * The text to show below the info tile. Long labels will be truncated.
         */
        this.label = null;
        /**
         * Set to `true` if info tile is disabled.
         */
        this.disabled = false;
        /**
         * Set to `true` to put the component in the `loading` state.
         * This does _not_ disable the link. To do so, the
         * `disabled` property should be set to `true` as well.
         */
        this.loading = false;
        /**
         * `true` when something is assigned to the `primary` slot
         */
        this.hasPrimarySlot = false;
        this.renderPrefix = () => {
            if (this.prefix) {
                return h("span", { class: "prefix" }, this.prefix);
            }
        };
        this.renderValue = () => {
            var _a;
            const characterCount = ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString().length;
            if (!this.value && this.loading) {
                return h("span", { class: "value" }, "\u00B7\u00B7\u00B7");
            }
            if (this.value) {
                return (h("span", { class: {
                        value: true,
                        [`ch-${characterCount}`]: true,
                    } }, this.value));
            }
        };
        this.renderSuffix = () => {
            if (this.suffix) {
                return h("span", { class: "suffix" }, this.suffix);
            }
        };
        this.renderIcon = () => {
            if (this.icon) {
                return h("limel-icon", { class: "icon", name: this.icon });
            }
        };
        this.updateHasPrimarySlotContent = (e) => {
            var _a;
            const slot = (_a = e === null || e === void 0 ? void 0 : e.target) !== null && _a !== void 0 ? _a : this.host.shadowRoot.querySelector('slot[name="primary"]');
            this.hasPrimarySlot = slot && slot.assignedElements().length > 0;
        };
        this.renderProgress = () => {
            var _a, _b;
            if (this.hasPrimarySlot) {
                return;
            }
            if (!((_a = this.progress) === null || _a === void 0 ? void 0 : _a.value) && ((_b = this.progress) === null || _b === void 0 ? void 0 : _b.value) !== 0) {
                return;
            }
            return (h("limel-circular-progress", { class: "progress", prefix: this.progress.prefix, value: this.progress.value, suffix: this.progress.suffix, maxValue: this.progress.maxValue, displayPercentageColors: this.progress.displayPercentageColors }));
        };
        this.renderLabel = () => {
            if (this.label) {
                return h("span", { class: "label" }, this.label);
            }
        };
        this.renderNotification = () => {
            if (this.badge) {
                return h("limel-badge", { label: this.badge });
            }
        };
        this.renderSpinner = () => {
            if (this.loading) {
                return h("limel-linear-progress", { indeterminate: true });
            }
        };
    }
    componentWillLoad() {
        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
        this.handleMouseEnter = handleMouseEnter;
        this.handleMouseLeave = handleMouseLeave;
        this.updateHasPrimarySlotContent();
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
            this.value +
            ' ' +
            this.checkProps(this === null || this === void 0 ? void 0 : this.suffix) +
            this.checkProps(this === null || this === void 0 ? void 0 : this.label) +
            '. ' +
            this.checkProps((_a = this === null || this === void 0 ? void 0 : this.progress) === null || _a === void 0 ? void 0 : _a.prefix) +
            this.checkProps((_b = this === null || this === void 0 ? void 0 : this.progress) === null || _b === void 0 ? void 0 : _b.value) +
            this.checkProps((_c = this === null || this === void 0 ? void 0 : this.progress) === null || _c === void 0 ? void 0 : _c.suffix) +
            this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
        const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
        const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
        return (h(Host, { key: '3acd30e03e1eca5ffee1ca2e1ad92acef99eac1d', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '755afc858a330aadd152cc4c7efe348660f8a8b9', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '26069e0fb0b3179882d095176e555cdef5a63c1f', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: 'd8147e61d31a53e25468a562f5286476ffb515ba', class: "value-group" }, this.renderPrefix(), h("div", { key: '11abbbbb0b4774cb78597a0658a990079fb1823e', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '626259aa388561cf05d3dcb65e82b57ac27fb15a' })), this.renderNotification()));
    }
    checkProps(propValue) {
        return propValue ? propValue + ' ' : '';
    }
    static get is() { return "limel-info-tile"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["info-tile.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["info-tile.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A piece of text or number that is the main piece of information\nwhich the component is intended to visualize."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "value"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Name of icon for the info tile."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The text to show below the info tile. Long labels will be truncated."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label",
                "defaultValue": "null"
            },
            "prefix": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A string of text that is visually placed before the value."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "prefix"
            },
            "suffix": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "A string of text that is visually placed after the value."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "suffix"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` if info tile is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "badge": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If supplied, the info tile will display a notification badge."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "badge"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to put the component in the `loading` state.\nThis does _not_ disable the link. To do so, the\n`disabled` property should be set to `true` as well."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "loading",
                "defaultValue": "false"
            },
            "link": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "Link",
                    "resolved": "Link",
                    "references": {
                        "Link": {
                            "location": "import",
                            "path": "../../global/shared-types/link.types",
                            "id": "src/global/shared-types/link.types.ts::Link",
                            "referenceLocation": "Link"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If supplied, the info tile will be a clickable link.\n\nSupplying a value also adds an elevated effect using a shadow,\nas well as `cursor: pointer`, which appears on hover.\nWhile we strongly recommend supplying a link whenever the\ncomponent should act as a link, if this is not possible, and\nyou need to provide interaction through a click handler,\nyou can still get the correct styling by supplying a `Link`\nobject with the `href` property set to `'#'`."
                },
                "getter": false,
                "setter": false
            },
            "progress": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "InfoTileProgress",
                    "resolved": "InfoTileProgress",
                    "references": {
                        "InfoTileProgress": {
                            "location": "import",
                            "path": "../info-tile/info-tile.types",
                            "id": "src/components/info-tile/info-tile.types.ts::InfoTileProgress",
                            "referenceLocation": "InfoTileProgress"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Properties of the optional circular progress bar.\n\nDefaults:\n- `maxValue`: 100\n- `suffix`: %\n- `displayPercentageColors`: false\n\nColors change with intervals of 10 %."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "hasPrimarySlot": {}
        };
    }
    static get elementRef() { return "host"; }
}
