'use client'
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { AppleIcon, AndroidIcon } from '@dynamic-labs/iconic';
import { useWalletBookContext, isWalletBookPopulated, WalletIcon } from '@dynamic-labs/wallet-book';
import { isMobile } from '@dynamic-labs/utils';
import { getWalletLinks } from '@dynamic-labs/wallet-connector-core';
import '../../../../context/DynamicContext/DynamicContext.js';
import '../../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
import { ReactComponent as SvgPuzzle } from '../../../../shared/assets/puzzle.js';
import '../../../../context/ViewContext/ViewContext.js';
import '../../../../shared/logger.js';
import { getValueByKey } from '../../../../shared/utils/functions/getValueByKey/index.js';
import '../../../../utils/constants/colors.js';
import '../../../../utils/constants/values.js';
import '@dynamic-labs/sdk-api-core';
import '../../../../shared/consts/index.js';
import '../../../../events/dynamicEvents.js';
import '../../../../../../_virtual/_tslib.js';
import '../../../../context/CaptchaContext/CaptchaContext.js';
import '../../../../context/ErrorContext/ErrorContext.js';
import '@dynamic-labs/multi-wallet';
import 'react-international-phone';
import '../../../../store/state/nonce/nonce.js';
import { pixelToRem } from '../../../../utils/functions/pixelToRem/pixelToRem.js';
import '@dynamic-labs-sdk/client/core';
import '../../../../client/client.js';
import '@dynamic-labs-sdk/client';
import '../../../../config/ApiEndpoint.js';
import '@dynamic-labs/locale';
import '../../../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../../../store/state/primaryWalletId/primaryWalletId.js';
import '../../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
import '../../../../context/AccountExistsContext/AccountExistsContext.js';
import '../../../../context/UserWalletsContext/UserWalletsContext.js';
import '../../../../store/state/authMode/authMode.js';
import '../../../../context/VerificationContext/VerificationContext.js';
import 'react-dom';
import '../../../../utils/functions/compareChains/compareChains.js';
import '../../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
import '../../../../context/ThemeContext/ThemeContext.js';
import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
import 'bs58';
import '@dynamic-labs/types';
import '../../../../context/SocialRedirectContext/SocialRedirectContext.js';
import '../../../../context/LoadingContext/LoadingContext.js';
import '../../../../context/WalletContext/WalletContext.js';
import '../../../../utils/hooks/useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
import 'yup';
import '../../../../context/MockContext/MockContext.js';
import '../../../../views/CollectUserDataView/useFields.js';
import '../../../../context/FieldsStateContext/FieldsStateContext.js';
import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
import '@dynamic-labs/rpc-providers';
import '../../../../store/state/walletOptions/walletOptions.js';
import 'react-i18next';
import '../../../../components/Accordion/components/AccordionItem/AccordionItem.js';
import '../../../../components/Alert/Alert.js';
import { Typography } from '../../../../components/Typography/Typography.js';
import '../../../../components/ShadowDOM/ShadowDOM.js';
import { EnterTileAnimation } from '../../../../components/EnterTileAnimation/EnterTileAnimation.js';
import '../../../../components/IconButton/IconButton.js';
import '../../../../components/InlineWidget/InlineWidget.js';
import '../../../../components/Input/Input.js';
import '../../../../components/IsBrowser/IsBrowser.js';
import '../../../../components/MenuList/Dropdown/Dropdown.js';
import '../../../../components/OverlayCard/OverlayCard.js';
import '../../../../components/Transition/ZoomTransition/ZoomTransition.js';
import '../../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
import '../../../../components/Transition/OpacityTransition/OpacityTransition.js';
import '../../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
import '../../../../components/Popper/Popper/Popper.js';
import '../../../../components/Popper/PopperContext/PopperContext.js';
import 'react-focus-lock';
import 'qrcode';
import { parseWalletLinks } from '../../../../utils/functions/parseWalletLinks/parseWalletLinks.js';
import 'formik';
import '../../../../utils/hooks/useSubdomainCheck/useSubdomainCheck.js';
import { Skeleton } from '../../../../components/Skeleton/Skeleton.js';
import '../../../../context/WalletGroupContext/WalletGroupContext.js';
import '../../../../context/IpConfigurationContext/IpConfigurationContext.js';
import '../../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
import '../../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
import '@hcaptcha/react-hcaptcha';
import '../../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
import '../../../../widgets/DynamicWidget/helpers/convertExchangeKeyAndProviderEnum.js';
import '../../../../views/ExchangeWhitelistWarning/ExchangeWhitelistWarning.js';
import '../../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
import '../../../../context/FooterAnimationContext/index.js';
import '../../../../views/MfaChooseDeviceView/useGetMfaOptions/useGetMfaOptions.js';
import '../../../../context/PasskeyContext/PasskeyContext.js';
import '../../../../context/OnrampContext/OnrampContext.js';
import '../../../../store/state/sendBalances.js';
import '../../../../store/state/connectorsInitializing/connectorsInitializing.js';
import '../../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
import { NewToWeb3WalletItem } from './NewToWeb3WalletItem/NewToWeb3WalletItem.js';
import { Item } from './Item/Item.js';
import { WalletExtensionOrAppContinueButton } from './WalletExtensionOrAppContinueButton/WalletExtensionOrAppContinueButton.js';
import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
import '../../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
import '../../../../widgets/DynamicWidget/components/PasskeyCard/PasskeyCard.js';
import '../../../../widgets/DynamicWidget/views/CryptoComOnramp/CryptoComOnramp.js';
import '../../../../../index.js';
import '../../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
import '../../../../store/state/tokenBalances.js';
import '../../../../store/state/multichainBalances.js';
import '../../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';

const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
    var _a;
    const { walletConnectorOptions } = useInternalDynamicContext();
    const { walletBook } = useWalletBookContext();
    const [selectedUrl, setSelectedUrl] = useState('');
    const chainName = ((_a = chains === null || chains === void 0 ? void 0 : chains.filter((chain) => Boolean(chain.enabled)).find((enabledChain) => enabledChain.name === newToWeb3WalletChainMap.primary_chain)) === null || _a === void 0 ? void 0 : _a.name) || 'evm';
    const walletKey = getValueByKey(newToWeb3WalletChainMap === null || newToWeb3WalletChainMap === void 0 ? void 0 : newToWeb3WalletChainMap.wallets, chainName);
    const newToWeb3Wallet = walletConnectorOptions.find((wallet) => wallet.key === walletKey);
    const isCustodialServiceWallet = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.canConnectViaCustodialService;
    const metadata = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.metadata;
    const links = getWalletLinks(metadata === null || metadata === void 0 ? void 0 : metadata.downloadLinks);
    const { currentDesktopUrl, canShowAndroidAppButton, canShowIosAppButton } = parseWalletLinks(links);
    const walletLinksElements = [
        {
            content: 'Install Desktop extension',
            icon: SvgPuzzle,
            isEnabled: Boolean(currentDesktopUrl === null || currentDesktopUrl === void 0 ? void 0 : currentDesktopUrl.length) && !isMobile(),
            url: currentDesktopUrl,
        },
        {
            content: 'Install iOS app',
            icon: AppleIcon,
            isEnabled: canShowIosAppButton,
            url: links.ios,
        },
        {
            content: 'Install Android app',
            icon: AndroidIcon,
            isEnabled: canShowAndroidAppButton,
            url: links.android,
        },
    ];
    if (!isWalletBookPopulated(walletBook)) {
        return jsx(Skeleton, { className: 'walletlist-footer-content__container' });
    }
    return (jsx("div", { className: 'walletlist-help-content__container', children: jsxs(EnterTileAnimation, { delay: '300ms', children: [jsx("div", { className: 'walletlist-help-content__icon', children: jsx(WalletIcon, { icon: metadata === null || metadata === void 0 ? void 0 : metadata.icon, walletKey: walletKey, style: { height: pixelToRem(56), width: pixelToRem(56) } }) }), jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxs(Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing ", metadata === null || metadata === void 0 ? void 0 : metadata.name] }), jsx(Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsx(Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsx(Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsx(NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsx(WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
};

export { WalletListHelpContent };
