import { ConnectButton } from '@rainbow-me/rainbowkit';
import { AwesomeButton } from 'react-awesome-button';

import './styles/buttons.css';


export function Wallet() {  
    return (
        <nav className="navbar">
        <ConnectButton.Custom>
            {({
                account,
                chain,
                openAccountModal,
                openChainModal,
                openConnectModal,
                mounted,
            }) => {
                const ready = mounted;
                const connected =
                ready &&
                account &&
                chain;

                return (
                <div 
                    className='walletButtons'
                    {...(!ready && {
                    'aria-hidden': true,
                    'style': {
                        opacity: 0,
                        pointerEvents: 'none',
                        userSelect: 'none',
                    },
                    })}
                >
                    {(() => {
                    if (!connected) {
                        return (
                            <AwesomeButton
                                type="secondary"
                                ripple={true}
                                loadingLabel=""
                                resultLabel=""
                                releaseDelay={1500}
                                onReleased={(event, release) => {
                                    openConnectModal();
                                    release();
                                }}>
                                Connect Wallet
                            </AwesomeButton>
                        );
                    }

                    if (chain.unsupported) {
                        return (
                        <AwesomeButton
                            type="secondary"
                            ripple={true}
                            loadingLabel=""
                            resultLabel=""
                            releaseDelay={1500}
                            onReleased={(event, release) => {
                                openChainModal();
                                release();
                            }}>
                            Wrong network
                        </AwesomeButton>
                        );
                    }

                    return (
                        <div style={{ display: 'flex', gap: 12 }}>
                        <AwesomeButton
                            type="secondary"
                            style={{ display: 'flex', alignItems: 'center' }}
                            ripple={true}
                            loadingLabel=""
                            resultLabel=""
                            releaseDelay={1500}
                            onReleased={(event, release) => {
                                openChainModal();
                                release();
                            }}>
                            {chain.hasIcon && (
                            <div
                                style={{
                                background: chain.iconBackground,
                                width: 24,
                                height: 24,
                                borderRadius: 999,
                                overflow: 'hidden',
                                marginRight: 4,
                                }}
                            >
                                {chain.iconUrl && (
                                <img
                                    alt={chain.name ?? 'Chain icon'}
                                    src={chain.iconUrl}
                                    style={{ width: 12, height: 12 }}
                                />
                                )}
                            </div>
                            )}
                            {chain.name}
                        </AwesomeButton>

                        <AwesomeButton
                            type="primary"
                            style={{ display: 'flex', alignItems: 'center' }}
                            ripple={true}
                            loadingLabel=""
                            resultLabel=""
                            releaseDelay={1500}
                            onReleased={(event, release) => {
                                openAccountModal();
                                release();
                            }}>
                            {account.displayName}
                            {account.displayBalance
                            ? ` (${account.displayBalance})`
                            : ''}
                        </AwesomeButton>
                        </div>
                    );
                    })()}
                </div>
                );
            }}
        </ConnectButton.Custom>
        </nav>
    );
};