import { h } from "@stencil/core";
import darkModeLogo from "./assets/dark-mode-logo.svg";
import lightModeLogo from "./assets/light-mode-logo.svg";
var FooterClass;
(function (FooterClass) {
    FooterClass["LIGHT"] = "bp-sdk-footer__container-light";
    FooterClass["DARK"] = "bp-sdk-footer__container-dark";
})(FooterClass || (FooterClass = {}));
export class BpSdkFooter {
    constructor() {
        this.darkMode = false;
        this.useExternal = false;
        this.imageSrc = lightModeLogo;
        this.footerClass = FooterClass.LIGHT;
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-footer');
        customElements.whenDefined('bp-sdk-external-footer').then(() => {
            this.useExternal = true;
        });
        this.onDarkModeChange(!!this.darkMode);
    }
    onDarkModeChange(darkMode) {
        switch (darkMode) {
            case true:
                this.imageSrc = darkModeLogo;
                this.footerClass = FooterClass.DARK;
                break;
            case false:
                this.imageSrc = lightModeLogo;
                this.footerClass = FooterClass.LIGHT;
                break;
        }
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return h("bp-sdk-external-footer", { darkMode: this.darkMode });
    }
    renderInternal() {
        return (h("footer", { class: `bp-sdk-footer__container ${this.footerClass}` }, h("a", { class: "bp-sdk-footer__link", href: "https://www.boldpenguin.com/", target: "_blank" }, h("img", { class: "bp-sdk-footer__logo", src: this.imageSrc, alt: "Powered by Penguins" }))));
    }
    static get is() { return "bp-sdk-footer"; }
    static get originalStyleUrls() {
        return {
            "$": ["./bp-sdk-footer.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-footer.css"]
        };
    }
    static get assetsDirs() { return ["assets"]; }
    static get properties() {
        return {
            "darkMode": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean | undefined",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "dark-mode",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "useExternal": {},
            "imageSrc": {},
            "footerClass": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "darkMode",
                "methodName": "onDarkModeChange"
            }];
    }
}
