import '@rainbow-me/rainbowkit/styles.css';

import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { configureChains, createClient, WagmiConfig } from 'wagmi';
import { mainnet, goerli, localhost } from 'wagmi/chains';
import { publicProvider } from 'wagmi/providers/public';
import { AwesomeButton, AwesomeButtonProgress, AwesomeButtonSocial } from 'react-awesome-button';


const { chains, provider } = configureChains(
    [mainnet, goerli, localhost],
    [publicProvider()]
);

const { connectors } = getDefaultWallets({
    appName: 'My RainbowKit App',
    chains
});

const wagmiClient = createClient({
    autoConnect: true,
    connectors,
    provider
});

function Wallet() {  
    return (
        <WagmiConfig client={wagmiClient}>
            <RainbowKitProvider chains={chains}>
                <ConnectButton.Custom>
                    {({
                        account,
                        chain,
                        openAccountModal,
                        openChainModal,
                        openConnectModal,
                        mounted,
                    }) => {
                        const ready = mounted;
                        const connected =
                        ready &&
                        account &&
                        chain;

                        return (
                        <div 
                            className='buttons'
                            {...(!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>
            </RainbowKitProvider>
        </WagmiConfig>
    );
};

export default Wallet;