import { __decorate, __metadata } from "tslib";
import { Language, loadFooterLinks, loadSocialMediaLinks } from "@baloise/web-app-utils";
import { Host, h } from "@stencil/core";
import { defaultConfig, ListenToConfig, updateBalLanguage, } from "../../utils/config";
import { BEM } from "../../utils/bem";
import { Logger } from "../../utils/log";
import { rIC } from "../../utils/helpers";
import { i18nBalFooter } from "./bal-footer.i18n";
export class Footer {
    constructor() {
        this.links = [];
        this.socialMediaLinks = [];
        this.language = defaultConfig.language;
        this.region = defaultConfig.region;
        this.allowedLanguages = defaultConfig.allowedLanguages;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * If `true` the legal Baloise links will be hidden.
         */
        this.hideLinks = false;
        /**
         * If provided, the footer links will be overridden.
         */
        this.overrideLinks = undefined;
        /**
         * If `true` the social media links will be shown.
         */
        this.showSocialMedia = false;
        /**
         * If `true` the language selection will be hidden.
         */
        this.hideLanguageSelection = false;
    }
    createLogger(log) {
        this.log = log;
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateFooterLinks();
        this.updateSocialMediaLinks();
    }
    /**
     * LISTENERS
     * ------------------------------------------------------
     */
    /**
     * @internal define config for the component
     */
    async configChanged(state) {
        if (this.language !== state.language || this.region !== state.region) {
            this.language = state.language;
            this.region = state.region;
            this.allowedLanguages = state.allowedLanguages;
            this.updateFooterLinks();
            this.updateSocialMediaLinks();
        }
    }
    /**
     * PRIVATE METHODS
     * ------------------------------------------------------
     */
    changeLanguage(language) {
        updateBalLanguage(language);
    }
    updateFooterLinks() {
        if (this.overrideLinks) {
            this.links = this.overrideLinks;
        }
        else if (!this.hideLinks && (this.region === 'CH' || this.region === 'DE')) {
            // The following footer links only apply to swiss and german applications
            const region = this.region;
            rIC(() => {
                loadFooterLinks(new Language(this.language), region).then(links => (this.links = links));
            });
        }
    }
    updateSocialMediaLinks() {
        if (this.showSocialMedia && (this.region === 'CH' || this.region === 'DE')) {
            // The following footer links only apply to swiss and german applications
            const region = this.region;
            rIC(() => {
                loadSocialMediaLinks(new Language(this.language), region).then(links => (this.socialMediaLinks = links));
            });
        }
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('footer');
        const elSlot = block.element('slot');
        const elInner = block.element('inner');
        const elInnerWrapper = elInner.element('wrapper');
        const elContainer = elInnerWrapper.element('container');
        const elLinksContainer = elInnerWrapper.element('links-container');
        const elHeaderContainer = elInnerWrapper.element('header-container');
        const elLogo = elHeaderContainer.element('logo');
        const elLanguage = elHeaderContainer.element('language');
        const elWrapper = elLanguage.element('wrapper');
        const elLegalLinks = elLinksContainer.element('legal-links');
        const elSocialMediaLinks = elLinksContainer.element('social-media-links');
        return (h(Host, { key: 'dbb10b62df792021f3ee814990225a5141906dcf', class: Object.assign({}, block.class()) }, h("footer", { key: '9bb866cae3936c2caf1cc7e63879c4681d2ee1a8', class: Object.assign({}, elInner.class()) }, h("div", { key: 'aee0462f8b07cf1c546647b67434bbbd0b0ce582', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '5b9b7a54156c1eb5dba8096c7a6add4939d0626d', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '632b26b347fe91b95d72e725db22bebcb303facf', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: 'e91b5cd73918ff9fbd7910e563b29a1396299942', color: "white" })), h("div", { key: '25a3bc1c711f33114df091fe4ed4de5f2e4298f6', class: Object.assign({}, elLanguage.class()), style: {
                display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
            } }, h("div", { key: '0d6f3a4ef5db0a8973c2baa293d02badbf25ab8c', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: 'ffa4e67aa6d2210f5739c5114127e46f50e2f31b', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: '0d3061a89a4fe04aecbb5498fa03ce263e8447ab', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: 'ca5e0091909a9c8fd92ca69f3d8937d0b976bee2', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '42575b0eb8ecc7e12679b28786ed27484088d01d' })), h("div", { key: '3600fe32dfeeea73ff2afac7ce8549d5e52bfb04', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '697a4f34081dbc8255b02425b2f2fcd0285670bf', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                display: !this.showSocialMedia ? 'none' : 'flex',
            } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                'link': true,
                'is-inverted': true,
            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '3b91222ee07a7c7d5e1995f5180398272fd6d92e', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links &&
            this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                    'link': true,
                    'is-light': true,
                } }, link.label)))))))));
    }
    static get is() { return "bal-footer"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-footer.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-footer.css"]
        };
    }
    static get properties() {
        return {
            "hideLinks": {
                "type": "boolean",
                "attribute": "hide-links",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the legal Baloise links will be hidden."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "overrideLinks": {
                "type": "unknown",
                "attribute": "override-links",
                "mutable": false,
                "complexType": {
                    "original": "FooterLink[] | undefined",
                    "resolved": "FooterLink[]",
                    "references": {
                        "FooterLink": {
                            "location": "import",
                            "path": "@baloise/web-app-utils",
                            "id": "../../node_modules/@baloise/web-app-utils/dist/types/index.d.ts::FooterLink"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If provided, the footer links will be overridden."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "undefined"
            },
            "showSocialMedia": {
                "type": "boolean",
                "attribute": "show-social-media",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the social media links will be shown."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "hideLanguageSelection": {
                "type": "boolean",
                "attribute": "hide-language-selection",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true` the language selection will be hidden."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "links": {},
            "socialMediaLinks": {},
            "language": {},
            "region": {},
            "allowedLanguages": {}
        };
    }
    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"
                        }]
                }
            }
        };
    }
}
__decorate([
    Logger('bal-footer'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Footer.prototype, "createLogger", null);
__decorate([
    ListenToConfig(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", Promise)
], Footer.prototype, "configChanged", null);
