import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { log, WALLET_ADAPTERS } from "@web3auth/base";
import bowser from "bowser";
import { useEffect, useMemo, useState } from "react";
import { MODAL_STATUS, WALLET_CONNECT_LOGO } from "../interfaces";
import Image from "./Image";
function formatIOSMobile(params) {
    const encodedUri = encodeURIComponent(params.uri);
    if (params.universalLink) {
        return `${params.universalLink}/wc?uri=${encodedUri}`;
    }
    if (params.deepLink) {
        return `${params.deepLink}${params.deepLink.endsWith(":") ? "//" : "/"}wc?uri=${encodedUri}`;
    }
    return "";
}
function formatMobileRegistryEntry(entry, walletConnectUri, os, platform = "mobile") {
    const universalLink = entry[platform].universal || "";
    const deepLink = entry[platform].native || "";
    return {
        name: entry.name || "",
        logo: entry.logo || "",
        universalLink,
        deepLink,
        href: os === bowser.OS_MAP.iOS ? formatIOSMobile({ uri: walletConnectUri, universalLink, deepLink }) : walletConnectUri,
    };
}
function formatMobileRegistry(registry, walletConnectUri, os, platform = "mobile") {
    return Object.values(registry)
        .filter((entry) => !!entry[platform].universal || !!entry[platform].native)
        .map((entry) => formatMobileRegistryEntry(entry, walletConnectUri, os, platform));
}
export default function ExternalWallet(props) {
    const { handleExternalWalletClick, config = {}, walletConnectUri, modalStatus, wcAdapters } = props;
    const [adapterVisibilityMap, setAdapterVisibilityMap] = useState({});
    const [externalButtons, setExternalButtons] = useState([]);
    const deviceType = useMemo(() => {
        const browser = bowser.getParser(window.navigator.userAgent);
        return browser.getPlatformType();
    }, []);
    const deviceDetails = useMemo(() => {
        const browser = bowser.getParser(window.navigator.userAgent);
        return { platform: browser.getPlatformType(), os: browser.getOSName() };
    }, []);
    useEffect(() => {
        log.debug("loaded external wallets", config, walletConnectUri, deviceType);
        const canShowMap = {};
        Object.keys(config).forEach((adapter) => {
            const adapterConfig = config[adapter];
            if (!adapterConfig.showOnModal) {
                canShowMap[adapter] = false;
                return;
            }
            if (deviceType === "desktop" && adapterConfig.showOnDesktop) {
                canShowMap[adapter] = true;
                return;
            }
            if ((deviceType === "mobile" || deviceType === "tablet") && adapterConfig.showOnMobile) {
                canShowMap[adapter] = true;
                return;
            }
            canShowMap[adapter] = false;
        });
        setAdapterVisibilityMap(canShowMap);
    }, [config, walletConnectUri, deviceType]);
    useEffect(() => {
        const buttons = [];
        // add wallet connect links
        if (deviceDetails.platform === bowser.PLATFORMS_MAP.mobile) {
            const mobileLinks = formatMobileRegistry(wcAdapters, walletConnectUri, deviceDetails.os, deviceDetails.platform);
            if (deviceDetails.os === bowser.OS_MAP.iOS) {
                buttons.push(...mobileLinks.map((link) => ({
                    name: link.name,
                    adapter: link.name,
                    href: link.href,
                    logo: link.logo,
                    isLink: true,
                    block: false,
                    formatName: link.name,
                })));
            }
            else if (mobileLinks.length > 0) {
                buttons.push({
                    name: "WalletConnect",
                    adapter: "WalletConnect",
                    href: mobileLinks[0].href,
                    logo: WALLET_CONNECT_LOGO,
                    isLink: true,
                    block: true,
                    formatName: "WalletConnect",
                });
            }
        }
        const adapterBtns = Object.keys(config).map((adapter) => {
            var _a;
            const name = adapter === WALLET_ADAPTERS.WALLET_CONNECT_V1 || adapter === WALLET_ADAPTERS.WALLET_CONNECT_V2 ? "wallet-connect" : adapter;
            const formatName = {
                metamask: "MetaMask",
                "wallet-connect": "WalletConnect",
            };
            return {
                name,
                adapter,
                isLink: false,
                block: false,
                formatName: (_a = formatName[name]) !== null && _a !== void 0 ? _a : name,
            };
        });
        if (adapterBtns.length === 1 && deviceDetails.os !== bowser.OS_MAP.iOS)
            adapterBtns[0].block = true;
        buttons.push(...adapterBtns);
        setExternalButtons(buttons);
    }, [wcAdapters, config, deviceDetails.os, deviceDetails.platform, walletConnectUri, adapterVisibilityMap]);
    return (_jsx("div", Object.assign({ className: "w3ajs-external-wallet w3a-group" }, { children: _jsx("div", Object.assign({ className: "w3a-external-container w3ajs-external-container" }, { children: modalStatus === MODAL_STATUS.INITIALIZED && (_jsx("ul", Object.assign({ className: "w3a-adapter-list w3ajs-wallet-adapters" }, { children: externalButtons.map((button) => {
                    var _a;
                    const providerIcon = button.isLink ? (_jsx("img", { src: button.logo, height: "auto", width: "auto", alt: `login-${button.name}` })) : (_jsx(Image, { imageId: `login-${button.name}`, hoverImageId: `login-${button.name}`, isButton: true }));
                    return (_jsx("li", Object.assign({ className: "w3a-adapter-item w3a-adapter-item-span" }, { children: button.isLink ? (_jsxs("a", Object.assign({ href: button.href, rel: "noopener noreferrer", target: "_blank" }, { children: [button.formatName, _jsx("button", Object.assign({ type: "button", className: "w-full w3a-button w3a-button--login" }, { children: providerIcon }))] }), button.name)) : (_jsxs("button", Object.assign({ type: "button", onClick: () => handleExternalWalletClick({ adapter: button.adapter }), className: "w-full w3a-button w3a-button--login", title: ((_a = config[button.name]) === null || _a === void 0 ? void 0 : _a.label) || button.name }, { children: [button.formatName, providerIcon] }))) }), button.name));
                }) }))) })) })));
}
//# sourceMappingURL=ExternalWallets.js.map