import { h, Host, } from "@stencil/core";
import { getBrandForegroundAppearance, isPropDefined, slotHasContent, isEmptyString, } from "../../utils/helpers";
export class Divider {
    constructor() {
        this.isSlottedInSideNav = false;
        this.foregroundColor = getBrandForegroundAppearance();
        /**
         * The line style of the divider.
         */
        this.borderStyle = "solid";
        /**
         * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.
         */
        this.labelPlacement = "center";
        /** If `true`, the divider will be displayed in a grey colour. */
        this.monochrome = false;
        /**
         * The orientation of the divider.
         */
        this.orientation = "horizontal";
        /**
         * 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 thickness of the divider.
         */
        this.weight = "thin";
        this.getHostAttributes = (renderLabel) => this.isSlottedInSideNav
            ? {
                "aria-hidden": "true", // Prevent divider being included in screen reader count of items in side navigation
                role: "listitem",
            }
            : (this.orientation === "vertical" ||
                (renderLabel && !!isPropDefined(this.labelPlacement))) && {
                "aria-orientation": this.orientation,
                role: "separator",
            };
    }
    brandChangeHandler(ev) {
        this.foregroundColor = ev.detail.mode;
    }
    updateMonochromeState() {
        var _a;
        const parentEl = this.el.parentElement;
        if (parentEl) {
            const isBottomSideNav = parentEl.classList.contains("bottom-side-nav");
            const isBottomWrapper = (_a = parentEl.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("bottom-wrapper");
            if (this.isSlottedInSideNav || (isBottomSideNav && isBottomWrapper)) {
                this.el.classList.add("ic-side-navigation-keyline");
                if (this.foregroundColor === "light") {
                    this.theme = "dark";
                }
                else {
                    this.theme = "light";
                }
            }
        }
    }
    componentWillRender() {
        var _a;
        this.isSlottedInSideNav =
            ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-SIDE-NAVIGATION";
        this.updateMonochromeState();
    }
    render() {
        const { borderStyle, label, labelPlacement, monochrome, orientation, weight, } = this;
        const { theme } = this;
        const invalidPropCombination = (placement) => {
            console.error(`${placement.charAt(0).toUpperCase() + placement.slice(1)} label placement is not applicable for a ${orientation} ic-divider (web-components) / IcDivider (react)`);
        };
        if (((labelPlacement === "left" || labelPlacement === "right") &&
            orientation === "vertical") ||
            ((labelPlacement === "top" || labelPlacement === "bottom") &&
                orientation === "horizontal")) {
            invalidPropCombination(labelPlacement);
        }
        const getTypographyVariant = (weight) => {
            switch (weight) {
                case "very-thick":
                    return "h4";
                case "thick":
                    return "subtitle-large";
                default:
                    return "label";
            }
        };
        const renderLabel = () => {
            if (slotHasContent(this.el, "label")) {
                return (h("div", { class: "ic-divider-label-container" }, h("slot", { name: "label" })));
            }
            else if (isPropDefined(label)) {
                return (h("ic-typography", { class: "ic-divider-label", variant: getTypographyVariant(weight) }, h("p", null, label)));
            }
            return null;
        };
        return (h(Host, Object.assign({ class: {
                [`ic-theme-${theme}`]: theme !== "inherit",
                [`ic-divider-monochrome`]: !!monochrome,
                [`ic-divider-${orientation}`]: true,
                [`ic-divider-${weight}`]: true,
                [`ic-divider-${borderStyle}`]: true,
                [`ic-divider-label-${labelPlacement}`]: slotHasContent(this.el, "label") || !isEmptyString(label),
            } }, this.getHostAttributes(!!renderLabel())), orientation === "horizontal" &&
            (!renderLabel() || !isPropDefined(labelPlacement)) && h("hr", null), !!isPropDefined(labelPlacement) && !!renderLabel() && renderLabel(), orientation === "vertical" &&
            (!renderLabel() || !isPropDefined(labelPlacement)) && (h("div", { class: "vertical-divider" }))));
    }
    static get is() { return "ic-divider"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-divider.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-divider.css"]
        };
    }
    static get properties() {
        return {
            "borderStyle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcDividerStyles",
                    "resolved": "\"dashed\" | \"solid\" | undefined",
                    "references": {
                        "IcDividerStyles": {
                            "location": "import",
                            "path": "./ic-divider.types",
                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerStyles"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The line style of the divider."
                },
                "getter": false,
                "setter": false,
                "attribute": "border-style",
                "reflect": false,
                "defaultValue": "\"solid\""
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The label for the divider. The label placement will need to be set for the label to be displayed correctly."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "labelPlacement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcDividerLabelPlacement",
                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\" | undefined",
                    "references": {
                        "IcDividerLabelPlacement": {
                            "location": "import",
                            "path": "./ic-divider.types",
                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerLabelPlacement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations."
                },
                "getter": false,
                "setter": false,
                "attribute": "label-placement",
                "reflect": false,
                "defaultValue": "\"center\""
            },
            "monochrome": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the divider will be displayed in a grey colour."
                },
                "getter": false,
                "setter": false,
                "attribute": "monochrome",
                "reflect": false,
                "defaultValue": "false"
            },
            "orientation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcOrientation",
                    "resolved": "\"horizontal\" | \"vertical\" | undefined",
                    "references": {
                        "IcOrientation": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcOrientation"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The orientation of the divider."
                },
                "getter": false,
                "setter": false,
                "attribute": "orientation",
                "reflect": false,
                "defaultValue": "\"horizontal\""
            },
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IcThemeMode | IcBrandForeground",
                    "resolved": "\"dark\" | \"default\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        },
                        "IcBrandForeground": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcBrandForeground"
                        }
                    }
                },
                "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\""
            },
            "weight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcDividerWeights",
                    "resolved": "\"medium\" | \"thick\" | \"thin\" | \"very-thick\" | undefined",
                    "references": {
                        "IcDividerWeights": {
                            "location": "import",
                            "path": "./ic-divider.types",
                            "id": "src/components/ic-divider/ic-divider.types.tsx::IcDividerWeights"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The thickness of the divider."
                },
                "getter": false,
                "setter": false,
                "attribute": "weight",
                "reflect": false,
                "defaultValue": "\"thin\""
            }
        };
    }
    static get states() {
        return {
            "foregroundColor": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "brandChange",
                "method": "brandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-divider.js.map
