import { Host, h, } from "@stencil/core";
import { convertToRGBA, getBrandForegroundAppearance, isPropDefined, onComponentRequiredPropUndefined, } from "../../utils/helpers";
const TOP_NAVIGATION = "IC-TOP-NAVIGATION";
const SIDE_NAVIGATION = "IC-SIDE-NAVIGATION";
/**
 * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.
 */
export class Badge {
    constructor() {
        var _a;
        this.ariaLabel = null;
        this.initialPosition = (_a = this.position) !== null && _a !== void 0 ? _a : "far";
        /**
         * The positioning of the badge in reference to the parent element.
         */
        this.position = "far";
        /**
         * The size of the badge to be displayed.
         */
        this.size = "medium";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The type of badge to be displayed.
         */
        this.type = "text";
        /**
         * The variant of the badge to be displayed.
         */
        this.variant = "neutral";
        /**
         * If `true`, the badge will be displayed.
         */
        this.visible = true;
        this.setBadgeColour = () => {
            const colorRGBA = this.customColor ? convertToRGBA(this.customColor) : null;
            if (colorRGBA) {
                const { r, g, b, a } = colorRGBA;
                this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;
                this.foregroundColour = getBrandForegroundAppearance((r * 299 + g * 587 + b * 114) / 1000);
            }
        };
        this.getLabel = () => this.maxNumber && Number(this.label) > this.maxNumber
            ? `${this.maxNumber}+`
            : this.label;
        // Set aria-label on badge and / or parent element
        // Aria-describedby seems to not work, probably due to shadow DOM
        this.setAccessibleLabel = () => {
            const parentEl = this.el.parentElement;
            const defaultAriaLabel = this.isAccessibleLabelDefined()
                ? this.accessibleLabel
                : this.label || "with badge being displayed";
            if (parentEl) {
                const { tagName } = parentEl;
                if (tagName !== "IC-CARD" &&
                    (tagName !== "IC-TAB" || (tagName === "IC-TAB" && this.parentAriaLabel))) {
                    const ariaLabelPrefix = this.parentAriaLabel
                        ? `${this.parentAriaLabel} ,`
                        : "";
                    parentEl.ariaLabel = this.visible
                        ? `${ariaLabelPrefix} ${defaultAriaLabel}`
                        : null;
                }
                else {
                    this.ariaLabel = `, ${defaultAriaLabel}`;
                }
            }
        };
        this.setPositionInTopNavigation = () => {
            this.position = this.isInMobileMode() ? "inline" : this.initialPosition;
        };
        this.setPositionInSideNavigation = () => {
            this.position = "near";
        };
        this.isInTopNav = () => {
            const parentEl = this.el.parentElement;
            if (!parentEl)
                return false;
            const grandparentEl = parentEl.parentElement;
            const greatGrandparentEl = grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.parentElement;
            return ((grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === TOP_NAVIGATION ||
                (greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === TOP_NAVIGATION);
        };
        this.isInSideNav = () => {
            const parentEl = this.el.parentElement;
            if (!parentEl)
                return false;
            const grandparentEl = parentEl.parentElement;
            const greatGrandparentEl = grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.parentElement;
            return ((grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === SIDE_NAVIGATION ||
                (greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === SIDE_NAVIGATION);
        };
        this.isInMobileMode = () => {
            const parentEl = this.el.parentElement;
            if (!parentEl)
                return false;
            const grandparentEl = parentEl.parentElement;
            const greatGrandparentEl = grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.parentElement;
            return ((((grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === TOP_NAVIGATION ||
                (grandparentEl === null || grandparentEl === void 0 ? void 0 : grandparentEl.tagName) === SIDE_NAVIGATION) &&
                grandparentEl.classList.contains("mobile-mode")) ||
                (((greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === TOP_NAVIGATION ||
                    (greatGrandparentEl === null || greatGrandparentEl === void 0 ? void 0 : greatGrandparentEl.tagName) === SIDE_NAVIGATION) &&
                    greatGrandparentEl.classList.contains("mobile-mode")));
        };
        this.isAccessibleLabelDefined = () => isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;
    }
    accessibleLabelHandler() {
        this.setAccessibleLabel();
    }
    customColorHandler() {
        this.variant === "custom" && this.setBadgeColour();
    }
    variantHandler() {
        if (this.variant === "custom") {
            this.setBadgeColour();
        }
    }
    visibleHandler() {
        this.setAccessibleLabel();
    }
    componentWillLoad() {
        var _a;
        this.variant === "custom" && this.setBadgeColour();
        const ariaLabel = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.ariaLabel;
        if (ariaLabel)
            this.parentAriaLabel = ariaLabel;
        this.setAccessibleLabel();
    }
    componentDidLoad() {
        this.type === "text" &&
            onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Badge");
    }
    componentWillRender() {
        this.isInTopNav() && this.setPositionInTopNavigation();
        this.isInSideNav() && this.setPositionInSideNavigation();
    }
    navBarMenuOpenHandler() {
        this.isInTopNav() && (this.position = "inline");
    }
    navBarMenuCloseHandler() {
        this.isInTopNav() && (this.position = this.initialPosition);
    }
    render() {
        const { ariaLabel, el, foregroundColour, getLabel, position, size, label, type, variant, visible, theme, } = this;
        return (h(Host, { key: '720f5c35c4d16cc484ea53a0f277befdbb087883', class: {
                [`ic-badge-${position}`]: true,
                [`ic-badge-${size}`]: true,
                [`ic-badge-${variant}`]: true,
                [`ic-badge-${type}`]: true,
                [`ic-badge-foreground-${foregroundColour}`]: foregroundColour !== null && variant === "custom",
                [`${visible ? "ic-badge-show" : "ic-badge-hide"}`]: true,
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, id: el.id || null, "aria-label": ariaLabel, role: "status" }, type === "icon" && h("slot", { key: '611a931cbdbfd72a7031adaec19d9cd5f83b097a', name: "badge-icon" }), type === "text" && label && (h("ic-typography", { key: '57620b02829df5547546474ad337f3cc23bb19c4', variant: size === "small" ? "badge-small" : "badge" }, getLabel())), type === "dot" && h("span", { key: '6f583cc04572a1818afc11e43cb5b41f95afe630', class: "sr-only" }, "badge")));
    }
    static get is() { return "ic-badge"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-badge.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-badge.css"]
        };
    }
    static get properties() {
        return {
            "accessibleLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The accessible label of the badge component to provide context for screen reader users."
                },
                "getter": false,
                "setter": false,
                "attribute": "accessible-label",
                "reflect": false
            },
            "customColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcColor",
                    "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})` | undefined",
                    "references": {
                        "IcColor": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcColor"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The custom badge colour. This will only style the badge component if variant=\"custom\".\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
                },
                "getter": false,
                "setter": false,
                "attribute": "custom-color",
                "reflect": false
            },
            "maxNumber": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The maximum number shown on the badge appended with a +.\nThis will only be displayed if type=\"text\" and label is not empty."
                },
                "getter": false,
                "setter": false,
                "attribute": "max-number",
                "reflect": false
            },
            "position": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IcBadgePositions",
                    "resolved": "\"far\" | \"inline\" | \"near\" | undefined",
                    "references": {
                        "IcBadgePositions": {
                            "location": "import",
                            "path": "./ic-badge.types",
                            "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgePositions"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The positioning of the badge in reference to the parent element."
                },
                "getter": false,
                "setter": false,
                "attribute": "position",
                "reflect": false,
                "defaultValue": "\"far\""
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizes",
                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                    "references": {
                        "IcSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the badge to be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The text displayed in the badge. This will only be displayed if type=\"text\"."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcBadgeTypes",
                    "resolved": "\"dot\" | \"icon\" | \"text\" | undefined",
                    "references": {
                        "IcBadgeTypes": {
                            "location": "import",
                            "path": "./ic-badge.types",
                            "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeTypes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The type of badge to be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "\"text\""
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcBadgeVariants",
                    "resolved": "\"custom\" | \"error\" | \"info\" | \"light\" | \"neutral\" | \"success\" | \"warning\" | undefined",
                    "references": {
                        "IcBadgeVariants": {
                            "location": "import",
                            "path": "./ic-badge.types",
                            "id": "src/components/ic-badge/ic-badge.types.ts::IcBadgeVariants"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The variant of the badge to be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "\"neutral\""
            },
            "visible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the badge will be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "visible",
                "reflect": false,
                "defaultValue": "true"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "accessibleLabel",
                "methodName": "accessibleLabelHandler"
            }, {
                "propName": "customColor",
                "methodName": "customColorHandler"
            }, {
                "propName": "variant",
                "methodName": "variantHandler"
            }, {
                "propName": "visible",
                "methodName": "visibleHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "icNavigationMenuOpened",
                "method": "navBarMenuOpenHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "icNavigationMenuClosed",
                "method": "navBarMenuCloseHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-badge.js.map
