import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
import { h } from "@stencil/core";
import { ProviderTypeEnum } from "../../types/provider.types";
import { SidePanelSideEnum } from "../visual/side-panel/side-panel.types";
export class UnlockPanel {
    constructor() {
        this.isOpen = false;
        this.allowedProviders = Object.values(ProviderTypeEnum);
        this.isLoggingIn = false;
        this.selectedMethod = null;
        this.anchor = null;
        this.observer = null;
        this.handleLogin = (provider) => {
            this.login.emit({ provider, anchor: this.anchor });
            this.selectedMethod = provider;
        };
        this.resetLoginState = () => {
            this.isLoggingIn = false;
            this.selectedMethod = null;
            if (!this.anchor) {
                return;
            }
            while (this.anchor.firstChild) {
                this.anchor.removeChild(this.anchor.firstChild);
            }
        };
        this.handleClose = () => {
            this.close.emit();
        };
    }
    disconnectedCallback() {
        if (this.observer) {
            this.observer.disconnect();
        }
    }
    observeContainer(element) {
        if (!element) {
            return;
        }
        this.anchor = element;
        if (this.observer) {
            this.observer.disconnect();
        }
        this.observer = new MutationObserver(() => {
            this.isLoggingIn = element.childElementCount > 0;
        });
        this.observer.observe(element, { childList: true, subtree: true });
    }
    render() {
        return (h("side-panel", { key: 'd203daacd5668a2cd747d2513c40723920ec09ae', isOpen: this.isOpen, side: SidePanelSideEnum.RIGHT, onClose: this.handleClose, panelClassName: "unlock-panel" }, h("unlock-header", { key: '647463103e2a40c137c1646dd57344dd15517b4c', text: this.isLoggingIn ? `${this.selectedMethod} connect` : 'Connect your wallet', backIcon: this.isLoggingIn ? faArrowLeft : null, onBack: this.resetLoginState, onClose: this.handleClose }), h("div", { key: 'bd81fb668f3412dda763044793aa4e73891dda0c', id: "anchor", ref: element => this.observeContainer(element) }), !this.isLoggingIn && (h("div", { key: '2e0492caf5cbc65b9fec9c2aad92e2e3d81e6c4e', class: "body" }, this.allowedProviders.map(method => (h("provider-button", { type: method, onClick: () => this.handleLogin(method) }))), h("slot", { key: 'b1cfe8a67e84089fd2c7426bc57454639a3b5363' })))));
    }
    static get is() { return "unlock-panel"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["unlock-panel.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["unlock-panel.css"]
        };
    }
    static get properties() {
        return {
            "isOpen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "is-open",
                "reflect": false,
                "defaultValue": "false"
            },
            "allowedProviders": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ProviderTypeEnum[]",
                    "resolved": "ProviderTypeEnum[]",
                    "references": {
                        "ProviderTypeEnum": {
                            "location": "import",
                            "path": "types/provider.types",
                            "id": "src/types/provider.types.ts::ProviderTypeEnum"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "Object.values(ProviderTypeEnum)"
            }
        };
    }
    static get states() {
        return {
            "isLoggingIn": {},
            "selectedMethod": {}
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "login",
                "name": "login",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{ provider: ProviderTypeEnum; anchor?: HTMLElement }",
                    "resolved": "{ provider: ProviderTypeEnum; anchor?: HTMLElement; }",
                    "references": {
                        "ProviderTypeEnum": {
                            "location": "import",
                            "path": "types/provider.types",
                            "id": "src/types/provider.types.ts::ProviderTypeEnum"
                        },
                        "HTMLElement": {
                            "location": "global",
                            "id": "global::HTMLElement"
                        }
                    }
                }
            }];
    }
}
//# sourceMappingURL=unlock-panel.js.map
