import { __decorate, __metadata } from "tslib";
import { Language, loadFooterLinks, loadSocialMediaLinks } from "@baloise/web-app-utils";
import { h, Host } from "@stencil/core";
import { BEM } from "../../utils/bem";
import { defaultConfig, ListenToConfig, updateBalLanguage, } from "../../utils/config";
import { rIC } from "../../utils/helpers";
import { Logger } from "../../utils/log";
import { sanitizeSvg } from "../../utils/svg";
import { i18nBalFooter } from "./bal-footer.i18n";
export class Footer {
    constructor() {
        this.logoSvgContent = '';
        this.links = [];
        this.socialMediaLinks = [];
        this.language = defaultConfig.language;
        this.region = defaultConfig.region;
        this.allowedLanguages = defaultConfig.allowedLanguages;
        /**
         * PUBLIC PROPERTY API
         * ------------------------------------------------------
         */
        /**
         * Image address for the logo.
         */
        this.logoHref = '';
        /**
         * Svg content for the logo.
         */
        this.logoSvg = '';
        /**
         * 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;
    }
    logoSvgChanged() {
        this.logoSvgContent = sanitizeSvg(this.logoSvg);
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.updateFooterLinks();
        this.updateSocialMediaLinks();
        this.logoSvgChanged();
    }
    /**
     * 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: 'ca5dacc6c906754b6bb466c448be4f6bb5b38dff', class: Object.assign({}, block.class()) }, h("footer", { key: '8d42cfff788350c5e5ae26f86b613fcd5144085d', class: Object.assign({}, elInner.class()) }, h("div", { key: 'a60281af0dcf73da3901cb605b49d35b3bb3e6ed', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '857d35746558b5b0a5ec79562b3f2c0e30037141', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: 'c1e5bae12ba5449888156244789fd79dbdc3a388', class: Object.assign({}, elLogo.class()) }, this.logoHref ? (h("img", { src: this.logoHref, alt: "Logo" })) : this.logoSvgContent ? (h("div", { innerHTML: this.logoSvgContent })) : (h("bal-logo", { color: "white" }))), h("div", { key: 'de3b93d01ad75facf4219df8954016095aa143ab', class: Object.assign({}, elLanguage.class()), style: {
                display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
            } }, h("div", { key: '7be8f0588d5da5e436b72214c67542316d325481', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '935dfaa39b97f40cd946ce8c8a0a0f421b3876b6', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: 'd8408623006a257fa422b0789bc1e021461f1b1e', 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: '422e8cae4fd1cd625afb3cc81bc7c0cfac99fe65', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'b7c73e907ffbe0b64eb4608143774bcf7c56ff30' })), h("div", { key: '7bc64923fe79674a26e96f263785abf96dba1af6', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '5e5c86e58b3df89978657217ba145555786becfb', 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: '610e34f952fd08cba92099a213371e45c5f7ebc6', 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 {
            "logoHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Image address for the logo."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "logo-href",
                "defaultValue": "''"
            },
            "logoSvg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Svg content for the logo."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "logo-svg",
                "defaultValue": "''"
            },
            "hideLinks": {
                "type": "boolean",
                "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,
                "attribute": "hide-links",
                "defaultValue": "false"
            },
            "overrideLinks": {
                "type": "unknown",
                "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",
                "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,
                "attribute": "show-social-media",
                "defaultValue": "false"
            },
            "hideLanguageSelection": {
                "type": "boolean",
                "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,
                "attribute": "hide-language-selection",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "logoSvgContent": {},
            "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"
                        }]
                }
            }
        };
    }
    static get watchers() {
        return [{
                "propName": "logoSvg",
                "methodName": "logoSvgChanged"
            }];
    }
}
__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);
