import { h } from "@stencil/core";
import { UtilBreakpointObserverBreakpoints, TitleLogoVariation } from "../../../enums";
/**
 * @enums UtilBreakpointObserverBreakpoints - util-breakpoint-observer-breakpoints.enum.ts
 * @enums TitleLogoVariation - title-logo-variation.enum.ts
 * @swedishName Titellogotyp
 * @new
 */
export class TitleLogo {
    constructor() {
        this.handleWindowResize = () => {
            this.titleLogoVariation = this.setLogoVariation(window.innerWidth);
        };
        this.isMobile = undefined;
        this.isTablet = undefined;
        this.titleLogoVariation = undefined;
        this.afAriaLabel = undefined;
        this.afLogoBreakpoint = undefined;
    }
    setLogoVariation(width) {
        if (this.isMobile)
            return TitleLogoVariation.MOBILE;
        const isNarrow = this.afLogoBreakpoint
            ? width < this.afLogoBreakpoint
            : this.isTablet;
        if (isNarrow) {
            return this.hasTwoRowLogoName
                ? TitleLogoVariation.TWO_ROWS
                : TitleLogoVariation.ONE_ROW;
        }
        return this.hasOneRowLogoName
            ? TitleLogoVariation.ONE_ROW
            : TitleLogoVariation.TWO_ROWS;
    }
    /**
     * Find out if we have one or both of the possible logo variations
     * Throw an error if we have none
     */
    componentWillLoad() {
        this.hasOneRowLogoName = !!this.hostElement.querySelector('[slot="logo-one-row"]');
        this.hasTwoRowLogoName = !!this.hostElement.querySelector('[slot="logo-two-rows"]');
        if (!this.hasOneRowLogoName && !this.hasTwoRowLogoName) {
            throw new Error('Du behöver ange minst en variant av logo-text');
        }
    }
    /**
     * We need a custom resize listener here, since we're
     * not only relying on breakpoints
     */
    componentDidLoad() {
        if (window) {
            this.handleWindowResize();
            window.addEventListener('resize', this.handleWindowResize, { passive: true });
        }
    }
    /**
     * Let's clean up as well
     */
    disconnectedCallback() {
        if (window) {
            window.removeEventListener('resize', this.handleWindowResize);
        }
    }
    handleBreakpointObserver(e) {
        this.isMobile = e.detail.value === UtilBreakpointObserverBreakpoints.SMALL;
        this.isTablet = e.detail.value === UtilBreakpointObserverBreakpoints.MEDIUM;
    }
    get cssModifiers() {
        return {
            'digi-title-logo--mobile': this.titleLogoVariation === TitleLogoVariation.MOBILE,
            'digi-title-logo--one-row': this.titleLogoVariation === TitleLogoVariation.ONE_ROW,
            'digi-title-logo--two-rows': this.titleLogoVariation === TitleLogoVariation.TWO_ROWS
        };
    }
    render() {
        return (h("div", { key: '776d1ba17ce9f24ece25ed6f1f2528e3ae5a64e2', class: Object.assign({ 'digi-title-logo': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '8201fc140d3aa7bfa7acaae2072951751f604f8b', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("div", { key: 'b8f09d2272ed959cae038f25b2050386e5584bf4', class: "digi-title-logo-symbol" }, h("svg", { key: '3af2c2419b035bd2e228a9acf3f039638a82b26d', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", role: "img" }, h("path", { key: '562b1b6d22d1b2b438f6e48b21bf7a98a3b0a32b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.0076 6.97426V0C31.0194 0 44 12.9056 44 28.8261C44 34.3951 42.4073 39.5923 39.6561 44L33.8019 40.1595C35.822 36.8551 36.9855 32.9758 36.9855 28.8261C36.9855 16.7575 27.1458 6.97426 15.0076 6.97426ZM6.99059 28.8257C6.99059 33.2284 10.5795 36.7972 15.0076 36.7972C19.4356 36.7972 23.0245 33.2284 23.0245 28.8257C23.0245 24.4235 19.4356 20.8548 15.0076 20.8548C10.5795 20.8548 6.99059 24.4235 6.99059 28.8257ZM0 28.8257C0 20.5853 6.71916 13.9047 15.0076 13.9047C23.296 13.9047 30.0151 20.5853 30.0151 28.8257C30.0151 37.0666 23.296 43.7472 15.0076 43.7472C6.71916 43.7472 0 37.0666 0 28.8257Z", class: "main-symbol" }))), h("div", { key: '47758a4ff3d7661ca130c1f6e70f706b60e59cc0', class: "digi-title-logo-name-wrapper" }, h("slot", { key: 'fc2a4b750091c4e5a8efdb16fb978d945626f0ba', name: "logo-one-row" }), h("slot", { key: '1250d720df8b80bf2b114cd95790039be8335a5e', name: "logo-two-rows" }))));
    }
    static get is() { return "digi-title-logo"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["title-logo.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["title-logo.css"]
        };
    }
    static get properties() {
        return {
            "afAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Input aria-label attribute"
                        }],
                    "text": "S\u00E4tter attributet 'aria-label' p\u00E5 titellogotypen"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-aria-label",
                "reflect": false
            },
            "afLogoBreakpoint": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Decides at which screen size the title logo changes from one to two rows"
                        }],
                    "text": "Best\u00E4mmer vid vilken sk\u00E4rmbredd som titellogotypen \u00E4ndras fr\u00E5n en till tv\u00E5 rader"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-logo-breakpoint",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "isMobile": {},
            "isTablet": {},
            "titleLogoVariation": {}
        };
    }
    static get elementRef() { return "hostElement"; }
}
