import { __decorate, __metadata } from "tslib";
import { h, Host } from "@stencil/core";
import { BEM } from "../../../utils/bem";
import { balBrowser } from "../../../utils/browser";
import { defaultConfig, ListenToConfig } from "../../../utils/config";
import { wait } from "../../../utils/helpers";
import { BalScrollHandler } from "../../../utils/scroll";
import { i18nBalNavbarBrand } from "./bal-navbar-brand.i18n";
export class NavbarBrand {
    constructor() {
        this.bodyScrollHandler = new BalScrollHandler();
        this.language = defaultConfig.language;
        this.isMenuActive = false;
        /**
         * Link of the logo / title.
         */
        this.href = '';
        /**
         * If `true` the logo is rendered as a button
         */
        this.logoClickable = false;
        /**
         * Specifies where to display the linked URL.
         * Only applies when an `href` is provided.
         */
        this.target = '_self';
        /**
         * @deprecated Use interface on bal-navbar instead.
         * If `true` the navbar does not have a mobil version. Only shows logo and an app title.
         */
        this.simple = false;
        /**
         * Size of the logo SVG
         */
        this.logoSize = '';
        /**
         * Defines if the logo animation should be active
         */
        this.animated = true;
        /**
         * @internal
         * Defines the type of navbar. App is used for almost every web applications
         * like the portal app. For our sales funnel we recommend to use the simple navbar.
         * Meta and main are used for the website.
         */
        this.interface = 'app';
    }
    connectedCallback() {
        this.bodyScrollHandler.connect();
    }
    componentWillLoad() {
        if (balBrowser.hasWindow && window.matchMedia) {
            window.matchMedia('(min-width: 960px)').addEventListener('change', this.resetIsMenuActive.bind(this));
        }
    }
    disconnectedCallback() {
        this.bodyScrollHandler.disconnect();
    }
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        this.language = state.language;
    }
    async resetIsMenuActive(ev) {
        if (ev.matches && !this.simple) {
            this.setIsMenuActiveAndAnimate(false);
        }
    }
    /**
     * @internal
     */
    async toggle() {
        await this.setIsMenuActiveAndAnimate(!this.isMenuActive);
    }
    async setIsMenuActiveAndAnimate(isMenuActive = this.isMenuActive) {
        this.isMenuActive = isMenuActive;
        this.balWillAnimate.emit(this.isMenuActive);
        if (balBrowser.hasWindow && window.scrollY > 0) {
            window.scrollTo(0, 0);
        }
        if (this.isMenuActive) {
            this.bodyScrollHandler.disable();
        }
        else {
            this.bodyScrollHandler.enable();
        }
        const navbar = this.el.closest('bal-navbar');
        if (navbar) {
            const navbarMenuElement = navbar.querySelector('bal-navbar-menu');
            if (navbarMenuElement && !this.simple) {
                await navbarMenuElement.toggle(this.isMenuActive);
            }
        }
        // wait for the default animation time to ensure
        // the line of the tabs is at the correct position
        await wait(300);
        this.balDidAnimate.emit(this.isMenuActive);
    }
    async onClick() {
        this.toggle();
    }
    render() {
        const navbarBrandEl = BEM.block('navbar').element('brand');
        const logoTemplate = this.logo ? (h("img", { class: Object.assign(Object.assign({}, navbarBrandEl.element('logo').class()), navbarBrandEl
                .element('logo')
                .modifier('small')
                .class(this.logoSize === 'small')), src: this.logo, alt: "Logo" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
        const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
        return (h(Host, { key: 'a15da2fb97dbef0b32324709d548fe38af7fa84b', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '9c70804fe300d6f0b17bee14bb356078db7b587d', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '53e5729ff4823597e8407a0f7dbacc86696d34aa' })), h("bal-button", { key: '5b0d8585d122add66365aef3f9f0a6f27e72212f', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                .element('burger')
                .modifier('hidden')
                .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));
    }
    static get is() { return "bal-navbar-brand"; }
    static get properties() {
        return {
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Link of the logo / title."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href",
                "defaultValue": "''"
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | undefined",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rel"
            },
            "logoClickable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the logo is rendered as a button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "logo-clickable",
                "defaultValue": "false"
            },
            "logoLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the label of the logo"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "logo-label"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalButtonTarget",
                    "resolved": "\" _parent\" | \"_blank\" | \"_self\" | \"_top\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "'_self'"
            },
            "simple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use interface on bal-navbar instead.\nIf `true` the navbar does not have a mobil version. Only shows logo and an app title."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "simple",
                "defaultValue": "false"
            },
            "logo": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Src to display a logo -> replaces the default Baloise Logo"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "logo"
            },
            "logoSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalLogoSize",
                    "resolved": "\"\" | \"small\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Size of the logo SVG"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "logo-size",
                "defaultValue": "''"
            },
            "animated": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines if the logo animation should be active"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "animated",
                "defaultValue": "true"
            },
            "interface": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalNavbarInterface",
                    "resolved": "\"app\" | \"simple\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Defines the type of navbar. App is used for almost every web applications\nlike the portal app. For our sales funnel we recommend to use the simple navbar.\nMeta and main are used for the website."
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "interface",
                "defaultValue": "'app'"
            }
        };
    }
    static get states() {
        return {
            "language": {},
            "isMenuActive": {}
        };
    }
    static get events() {
        return [{
                "method": "balNavigate",
                "name": "balNavigate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the link element has clicked"
                },
                "complexType": {
                    "original": "BalEvents.BalNavbarBrandNavigationChangeDetail",
                    "resolved": "MouseEvent",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balWillAnimate",
                "name": "balWillAnimate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted before the animation starts"
                },
                "complexType": {
                    "original": "BalEvents.BalNavbarMenuWillAnimateDetail",
                    "resolved": "boolean",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }, {
                "method": "balDidAnimate",
                "name": "balDidAnimate",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted after the animation has finished"
                },
                "complexType": {
                    "original": "BalEvents.BalNavbarMenuDidAnimateDetail",
                    "resolved": "boolean",
                    "references": {
                        "BalEvents": {
                            "location": "global",
                            "id": "global::BalEvents"
                        }
                    }
                }
            }];
    }
    static get methods() {
        return {
            "configChanged": {
                "complexType": {
                    "signature": "(state: BalConfigState) => Promise<void>",
                    "parameters": [{
                            "name": "state",
                            "type": "BalConfigState",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "BalConfigState": {
                            "location": "import",
                            "path": "../../../utils/config",
                            "id": "src/utils/config/index.ts::BalConfigState"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": "define config for the component"
                        }]
                }
            },
            "toggle": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }]
                }
            }
        };
    }
    static get elementRef() { return "el"; }
}
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], NavbarBrand.prototype, "configChanged", null);
