import { h, Host } from "@stencil/core";
import { BEM } from "../../utils/bem";
import { balBrowser } from "../../utils/browser";
import { HEADING_COLORS, HEADING_ORDER, HEADING_SIZES, HEADING_TAGS, } from "./bal-heading.const";
export class Heading {
    constructor() {
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * The actual heading level used in the HTML markup.
         */
        this.level = 'h1';
        /**
         * When true, the text will be truncated with a text overflow ellipsis instead of wrapping.
         * Please note that text overflow can only occur in block or inline-block level elements,
         * as these elements require a width to overflow.
         */
        this.noWrap = false;
        /**
         * If `true` the heading gets displayed slimmer.
         */
        this.subtitle = false;
        /**
         * The theme type of the toast.
         */
        this.color = '';
        /**
         * If `true` the color gets inverted for dark backgrounds
         */
        this.inverted = false;
        /**
         * If `true` adds a text shadow to improve readability on image background
         * */
        this.shadow = false;
    }
    levelWatcher() {
        this.updateAutoFontSize();
    }
    visualLevelWatcher() {
        this.updateAutoFontSize();
    }
    autoLevelWatcher() {
        this.updateAutoFontSize();
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateAutoFontSize();
    }
    componentDidRender() {
        if (this.autoLevel && this.autoFontSize) {
            const rows = this.rows;
            if (rows > 1) {
                const minSize = HEADING_SIZES[this.autoLevel];
                if (minSize !== this.autoFontSize) {
                    const nextIndex = HEADING_ORDER.indexOf(this.autoFontSize) + 1;
                    this.autoFontSize = HEADING_ORDER[nextIndex];
                }
            }
        }
    }
    updateAutoFontSize() {
        this.autoFontSize = this.fontSize;
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    get rows() {
        if (this.headingEl && balBrowser.hasWindow) {
            const computedStyle = window.getComputedStyle(this.headingEl);
            const lineHeight = parseInt(computedStyle.lineHeight.slice(0, -2), 10);
            const height = this.headingEl.offsetHeight;
            return height / lineHeight;
        }
        return 1;
    }
    get fontColor() {
        if (this.inverted) {
            return 'white';
        }
        return HEADING_COLORS[this.color];
    }
    get fontSize() {
        return HEADING_SIZES[this.visualLevel ? this.visualLevel : this.level];
    }
    get tag() {
        return HEADING_TAGS[this.level];
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('heading');
        const bemTextEl = block.element('text');
        const Heading = this.tag;
        const fontColor = this.fontColor;
        return (h(Host, { key: 'bb045a6d0ed10c2143cb77f5852ac967e1b3b21a', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: 'ff31969a001a5706206f134d96c7f85dd8334176', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: '5ce82d9f2158abb4c0243cb6028d45ba3c60e7c5' }))));
    }
    static get is() { return "bal-heading"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-heading.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-heading.css"]
        };
    }
    static get properties() {
        return {
            "level": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalHeadingLevel",
                    "resolved": "\"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"large\" | \"medium\" | \"normal\" | \"p\" | \"span\" | \"x-large\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\" | \"xxxxx-large\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The actual heading level used in the HTML markup."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "level",
                "defaultValue": "'h1'"
            },
            "visualLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalHeadingVisualLevel",
                    "resolved": "\"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"large\" | \"medium\" | \"normal\" | \"x-large\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\" | \"xxxxx-large\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Make the visual style mimic a specific heading level.\nThis option allows you to make e.g. h1 visually look like h3,\nbut still keep it h1 in the markup."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "visual-level"
            },
            "autoLevel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalHeadingVisualLevel",
                    "resolved": "\"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"large\" | \"medium\" | \"normal\" | \"x-large\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\" | \"xxxxx-large\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The actual heading level used in the HTML markup."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "auto-level"
            },
            "noWrap": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When true, the text will be truncated with a text overflow ellipsis instead of wrapping.\nPlease note that text overflow can only occur in block or inline-block level elements,\nas these elements require a width to overflow."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-wrap",
                "defaultValue": "false"
            },
            "subtitle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the heading gets displayed slimmer."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "subtitle",
                "defaultValue": "false"
            },
            "space": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'none' | 'bottom' | 'top' | 'all'",
                    "resolved": "\"all\" | \"bottom\" | \"none\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines at which position the heading has spacing."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "space"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalHeadingColor",
                    "resolved": "\"\" | \"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The theme type of the toast."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color",
                "defaultValue": "''"
            },
            "inverted": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the color gets inverted for dark backgrounds"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "inverted",
                "defaultValue": "false"
            },
            "shadow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` adds a text shadow to improve readability on image background"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shadow",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "autoFontSize": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "level",
                "methodName": "levelWatcher"
            }, {
                "propName": "visualLevel",
                "methodName": "visualLevelWatcher"
            }, {
                "propName": "autoLevel",
                "methodName": "autoLevelWatcher"
            }];
    }
}
