import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import ContentCopyIcon from '@mui/icons-material/ContentCopyRounded';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNewRounded';
import { Avatar, Button, MenuItem } from '@mui/material';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';
import { useChain } from '../../hooks';
import { useWallet, useWidgetConfig } from '../../providers';
import { navigationRoutes, shortenAddress } from '../../utils';
import { HeaderAppBar, WalletButton } from './Header.style';
import { WalletMenu } from './WalletMenu';
export const WalletHeader = () => {
    return (_jsx(HeaderAppBar, { elevation: 0, sx: { justifyContent: 'flex-end' }, children: _jsx(WalletMenuButton, {}) }));
};
export const WalletMenuButton = () => {
    const { account } = useWallet();
    return account.isActive ? _jsx(ConnectedButton, {}) : _jsx(ConnectButton, {});
};
const ConnectButton = () => {
    const { t } = useTranslation();
    const { pathname } = useLocation();
    const { walletManagement, subvariant } = useWidgetConfig();
    const { connect: connectWallet } = useWallet();
    const navigate = useNavigate();
    const connect = async () => {
        if (walletManagement) {
            await connectWallet();
            return;
        }
        navigate(navigationRoutes.selectWallet);
    };
    return (_jsx(_Fragment, {}));
};
const ConnectedButton = () => {
    const { t } = useTranslation();
    const { subvariant } = useWidgetConfig();
    const { account, disconnect } = useWallet();
    const walletAddress = shortenAddress(account.address);
    const { chain } = useChain(account.chainId);
    const [anchorEl, setAnchorEl] = useState(null);
    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
        setAnchorEl(null);
    };
    const handleDisconnect = () => {
        disconnect();
        handleClose();
    };
    const handleCopyAddress = async () => {
        await navigator.clipboard.writeText(account.address ?? '');
        handleClose();
    };
    return (_jsxs(_Fragment, { children: [_jsx(WalletButton, { endIcon: _jsx(ExpandMoreIcon, {}), startIcon: _jsx(Avatar, { src: chain?.logoURI, alt: chain?.key, sx: { width: 24, height: 24 }, children: chain?.name[0] }), sx: {
                    marginRight: subvariant === 'split' ? 0 : -1.25,
                    marginLeft: subvariant === 'split' ? -1 : 0,
                }, onClick: handleClick, children: walletAddress }), _jsxs(WalletMenu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, children: [_jsxs(MenuItem, { style: { background: '#fff' }, onClick: handleCopyAddress, children: [_jsx(ContentCopyIcon, {}), t(`button.copyAddress`)] }), _jsxs(MenuItem, { style: { background: '#fff' }, component: "a", onClick: handleClose, href: `${chain?.metamask.blockExplorerUrls[0]}address/${account.address}`, target: "_blank", children: [_jsx(OpenInNewIcon, {}), t(`button.viewOnExplorer`)] }), _jsx(Button, { onClick: handleDisconnect, fullWidth: true, startIcon: _jsx(PowerSettingsNewIcon, {}), sx: {
                            marginTop: 1,
                        }, children: t(`button.disconnect`) })] })] }));
};
