"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConnectEmbed = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const CustomThemeProvider_js_1 = require("../../../../core/design-system/CustomThemeProvider.js");
const index_js_1 = require("../../../../core/design-system/index.js");
const useSiweAuth_js_1 = require("../../../../core/hooks/auth/useSiweAuth.js");
const AutoConnect_js_1 = require("../../../../core/hooks/connection/AutoConnect.js");
const wallet_hooks_js_1 = require("../../../../core/hooks/wallets/wallet-hooks.js");
const wallet_connection_js_1 = require("../../../../core/providers/wallet-connection.js");
const wallet_ui_states_provider_js_1 = require("../../../providers/wallet-ui-states-provider.js");
const canFitWideModal_js_1 = require("../../../utils/canFitWideModal.js");
const defaultWallets_js_1 = require("../../../wallets/defaultWallets.js");
const LoadingScreen_js_1 = require("../../../wallets/shared/LoadingScreen.js");
const DynamicHeight_js_1 = require("../../components/DynamicHeight.js");
const elements_js_1 = require("../../design-system/elements.js");
const constants_js_1 = require("../constants.js");
const getConnectLocale_js_1 = require("../locale/getConnectLocale.js");
const ConnectModalContent_js_1 = require("./ConnectModalContent.js");
const screen_js_1 = require("./screen.js");
/**
 * A component that allows the user to connect their wallet.
 *
 * it renders the same UI as the [`ConnectButton`](https://portal.thirdweb.com/react/v4/components/ConnectButton) component's modal - but directly on the page instead of being in a modal.
 *
 * It only renders UI if wallet is not connected
 * @example
 * ```tsx
 * <ConnectEmbed
 *    client={client}
 *    appMetadata={{
 *      name: "Example",
 *      url: "https://example.com",
 *    }}
 * />
 * ```
 * @param props -
 * The props for the `ConnectEmbed` component.
 *
 * Refer to the [`ConnectEmbedProps`](https://portal.thirdweb.com/references/typescript/v5/ConnectEmbedProps) type for more details
 * @component
 */
function ConnectEmbed(props) {
    const activeAccount = (0, wallet_hooks_js_1.useActiveAccount)();
    const siweAuth = (0, useSiweAuth_js_1.useSiweAuth)(props.auth);
    const show = !activeAccount || (siweAuth.requiresAuth && !siweAuth.isLoggedIn);
    const wallets = (0, react_1.useMemo)(() => props.wallets ||
        (0, defaultWallets_js_1.getDefaultWallets)({
            appMetadata: props.appMetadata,
            chains: props.chains,
        }), [props.wallets, props.appMetadata, props.chains]);
    const localeId = props.locale || "en_US";
    const localeQuery = (0, getConnectLocale_js_1.useConnectLocale)(localeId);
    const modalSize = !(0, canFitWideModal_js_1.canFitWideModal)() || wallets.length === 1
        ? "compact"
        : props.modalSize || "compact";
    const autoConnectComp = props.autoConnect !== false && ((0, jsx_runtime_1.jsx)(AutoConnect_js_1.AutoConnect, { appMetadata: props.appMetadata, client: props.client, wallets: wallets, accountAbstraction: props.accountAbstraction, timeout: typeof props.autoConnect === "boolean"
            ? undefined
            : props.autoConnect?.timeout, onConnect: props.onConnect }));
    if (show) {
        if (!localeQuery.data) {
            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [autoConnectComp, (0, jsx_runtime_1.jsx)(EmbedContainer, { modalSize: modalSize, children: (0, jsx_runtime_1.jsx)(LoadingScreen_js_1.LoadingScreen, {}) })] }));
        }
        return ((0, jsx_runtime_1.jsx)(wallet_connection_js_1.ConnectUIContext.Provider, { value: {
                appMetadata: props.appMetadata,
                client: props.client,
                wallets: wallets,
                locale: localeId,
                connectLocale: localeQuery.data,
                chain: props.chain || props.accountAbstraction?.chain,
                chains: props.chains,
                walletConnect: props.walletConnect,
                accountAbstraction: props.accountAbstraction,
                recommendedWallets: props.recommendedWallets,
                showAllWallets: props.showAllWallets,
                isEmbed: true,
                connectModal: {
                    size: modalSize,
                    privacyPolicyUrl: props.privacyPolicyUrl,
                    showThirdwebBranding: props.showThirdwebBranding !== false,
                    termsOfServiceUrl: props.termsOfServiceUrl,
                },
                onConnect: props.onConnect,
                auth: props.auth,
            }, children: (0, jsx_runtime_1.jsxs)(wallet_ui_states_provider_js_1.WalletUIStatesProvider, { theme: props.theme, isOpen: true, children: [(0, jsx_runtime_1.jsx)(ConnectEmbedContent, { ...props, onConnect: props.onConnect }), autoConnectComp] }) }));
    }
    return (0, jsx_runtime_1.jsx)("div", { children: autoConnectComp });
}
exports.ConnectEmbed = ConnectEmbed;
/**
 * @internal
 */
const ConnectEmbedContent = (props) => {
    // const requiresSignIn = false;
    const screenSetup = (0, screen_js_1.useSetupScreen)();
    const { setScreen, initialScreen } = screenSetup;
    const siweAuth = (0, useSiweAuth_js_1.useSiweAuth)(props.auth);
    const activeAccount = (0, wallet_hooks_js_1.useActiveAccount)();
    const isAutoConnecting = (0, wallet_hooks_js_1.useIsAutoConnecting)();
    let content = null;
    (0, react_1.useEffect)(() => {
        if (siweAuth.requiresAuth && !siweAuth.isLoggedIn && activeAccount) {
            setScreen(constants_js_1.reservedScreens.signIn);
        }
    }, [siweAuth, setScreen, activeAccount]);
    const modalSize = !(0, canFitWideModal_js_1.canFitWideModal)()
        ? "compact"
        : props.modalSize || "compact";
    // show spinner on page load and during auto connecting a wallet
    if (isAutoConnecting) {
        content = (0, jsx_runtime_1.jsx)(LoadingScreen_js_1.LoadingScreen, {});
    }
    else {
        content = ((0, jsx_runtime_1.jsx)(ConnectModalContent_js_1.ConnectModalContent, { shouldSetActive: true, screenSetup: screenSetup, isOpen: true, onClose: () => {
                setScreen(initialScreen);
            }, setModalVisibility: () => {
                // no op
            } }));
    }
    return ((0, jsx_runtime_1.jsx)(EmbedContainer, { modalSize: modalSize, className: props.className, style: props.style, children: modalSize === "wide" ? (content) : ((0, jsx_runtime_1.jsxs)(DynamicHeight_js_1.DynamicHeight, { children: [" ", content, " "] })) }));
};
const EmbedContainer = /* @__PURE__ */ (0, elements_js_1.StyledDiv)((props) => {
    const { modalSize } = props;
    const theme = (0, CustomThemeProvider_js_1.useCustomTheme)();
    return {
        color: theme.colors.primaryText,
        background: theme.colors.modalBg,
        height: modalSize === "compact" ? "auto" : constants_js_1.wideModalMaxHeight,
        width: modalSize === "compact" ? constants_js_1.modalMaxWidthCompact : constants_js_1.modalMaxWidthWide,
        boxSizing: "border-box",
        position: "relative",
        lineHeight: "normal",
        borderRadius: index_js_1.radius.xl,
        border: `1px solid ${theme.colors.borderColor}`,
        overflow: "hidden",
        fontFamily: theme.fontFamily,
        "& *::selection": {
            backgroundColor: theme.colors.primaryText,
            color: theme.colors.modalBg,
        },
        "& *": {
            boxSizing: "border-box",
        },
    };
});
//# sourceMappingURL=ConnectEmbed.js.map