'use client'
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { WalletAddressType } from '@dynamic-labs/sdk-api-core';
import { isMidnightWallet, getMidnightNetworkTag } from '@dynamic-labs/wallet-connector-core';
import { CopyButton } from '../../../../components/CopyButton/CopyButton.js';
import { IconButton } from '../../../../components/IconButton/IconButton.js';
import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
import { QRCode } from '../../../../components/QRCode/QRCode.js';
import { Typography } from '../../../../components/Typography/Typography.js';
import '../../../../context/DynamicContext/useDynamicContext/useDynamicContext.js';
import { useInternalDynamicContext } from '../../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
import { ReactComponent as SvgArrowLeft } from '../../../../shared/assets/arrow-left.js';
import { ReactComponent as SvgCopy } from '../../../../shared/assets/copy.js';
import { ReactComponent as SvgEmbeddedWalletIcon } from '../../../../shared/assets/embedded-wallet-icon.js';
import '@dynamic-labs/iconic';
import '../../../../context/ViewContext/ViewContext.js';
import { shortenWalletAddress } from '../../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
import { classNames } from '../../../../utils/functions/classNames/classNames.js';
import { getEmbeddedBitcoinActiveAddress } from '../../../../utils/functions/getEmbeddedBitcoinActiveAddress/getEmbeddedBitcoinActiveAddress.js';
import { getWalletAdditionalAddressByType } from '../../../../utils/functions/getWalletAdditionalAddressByType/getWalletAdditionalAddressByType.js';
import { usePromise } from '../../../../utils/hooks/usePromise/usePromise.js';
import { useWidgetContext } from '../../context/DynamicWidgetContext.js';
import { useFetchChain } from '../../hooks/useFetchChain/useFetchChain.js';

const DepositView = () => {
    var _a, _b;
    const { t } = useTranslation();
    // Per-network address: embedded Bitcoin swaps its active address on network
    // switch (context `network` changes re-render this view).
    const { primaryWallet, getNameService, network } = useInternalDynamicContext();
    const walletConnector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
    const { chain } = useFetchChain(walletConnector);
    const { setDynamicWidgetView } = useWidgetContext();
    const [midnightAddressType, setMidnightAddressType] = useState('unshielded');
    const { data: ens } = usePromise(() => getNameService(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address), { deps: [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.address, network], initialData: undefined });
    const ensName = (_a = ens === null || ens === void 0 ? void 0 : ens.name) !== null && _a !== void 0 ? _a : null;
    if (!primaryWallet) {
        return null;
    }
    // Midnight is one wallet exposing a per-network address for each type. The
    // connector resolves the selected network so the deposit QR/address matches
    // the chosen network — depositing to the wrong network's encoding would
    // strand funds. `network` from context drives re-render on switch.
    const isMidnight = isMidnightWallet(primaryWallet);
    const midnightNetworkTag = getMidnightNetworkTag(primaryWallet.connector);
    const shieldedAddress = isMidnight
        ? getWalletAdditionalAddressByType(WalletAddressType.MidnightShielded, primaryWallet, midnightNetworkTag)
        : undefined;
    const unshieldedAddress = isMidnight
        ? (_b = getWalletAdditionalAddressByType(WalletAddressType.MidnightUnshielded, primaryWallet, midnightNetworkTag)) !== null && _b !== void 0 ? _b : primaryWallet.address
        : primaryWallet.address;
    const showMidnightToggle = Boolean(shieldedAddress);
    // Per-network address: the deposit QR/address must match the selected
    // network — depositing to the wrong network's encoding would strand funds.
    const bitcoinActiveAddress = getEmbeddedBitcoinActiveAddress(primaryWallet.connector);
    const depositAddress = showMidnightToggle && midnightAddressType === 'shielded' && shieldedAddress
        ? shieldedAddress
        : bitcoinActiveAddress !== null && bitcoinActiveAddress !== void 0 ? bitcoinActiveAddress : unshieldedAddress;
    const backButton = (jsx(IconButton, { type: 'button', id: 'back-button', "data-testid": 'back-button', onClick: () => setDynamicWidgetView('choose-wallet-funding-method'), children: jsx(SvgArrowLeft, {}) }));
    return (jsxs("div", { className: 'deposit-view', children: [jsx(ModalHeader, { leading: backButton, children: jsx(Typography, { variant: 'title', copykey: 'dyn_deposit.title', children: t('dyn_deposit.title') }) }), jsxs("div", { className: 'deposit-view__content', children: [showMidnightToggle && (jsxs("div", { className: 'deposit-view__content__toggle', children: [jsx("button", { type: 'button', "data-testid": 'deposit-toggle-unshielded', className: classNames('deposit-view__content__toggle__option', {
                                    'deposit-view__content__toggle__option--active': midnightAddressType === 'unshielded',
                                }), "data-copykey": 'dyn_active_wallet_info.midnight_unshielded_address', onClick: () => setMidnightAddressType('unshielded'), children: t('dyn_active_wallet_info.midnight_unshielded_address') }), jsx("button", { type: 'button', "data-testid": 'deposit-toggle-shielded', className: classNames('deposit-view__content__toggle__option', {
                                    'deposit-view__content__toggle__option--active': midnightAddressType === 'shielded',
                                }), "data-copykey": 'dyn_active_wallet_info.midnight_shielded_address', onClick: () => setMidnightAddressType('shielded'), children: t('dyn_active_wallet_info.midnight_shielded_address') })] })), jsx(QRCode, { className: 'deposit-view__content__qr-code', value: depositAddress, Icon: jsx(SvgEmbeddedWalletIcon, {}), logoSize: 40, logoMargin: 64, size: 215 }), jsxs("div", { className: 'deposit-view__content__address', children: [ensName && (jsx(Typography, { className: 'deposit-view__content__address__ens', variant: 'title', children: ensName })), jsxs("div", { className: 'deposit-view__content__address__wrapper', children: [jsx(Typography, { "data-testid": 'deposit-view-address', variant: 'title', weight: 'medium', className: 'deposit-view__content__address__wrapper__text', children: shortenWalletAddress(depositAddress) }), jsx(CopyButton, { variant: 'text', textToCopy: depositAddress, className: 'deposit-view__content__address__wrapper__copy', children: jsx(SvgCopy, { "data-testid": 'copy-address' }) })] })] }), jsxs(Typography, { className: 'deposit-view__content__network', variant: 'body_small', color: 'secondary', copykey: 'dyn_deposit.receive_funds_on', children: [t('dyn_deposit.receive_funds_on'), chain === null || chain === void 0 ? void 0 : chain.name] })] })] }));
};

export { DepositView };
