import React, { PureComponent } from 'react'
import Account from '../../atoms/Account'
import { User, Market } from '../../../context'
import styles from './Popover.module.scss'

export default class Popover extends PureComponent<{
    forwardedRef?: (ref: HTMLElement | null) => void
    style?: React.CSSProperties
}> {
    public static contextType = User

    public render() {
        const { account, balance, network } = this.context

        return (
            <div
                className={styles.popover}
                ref={this.props.forwardedRef}
                style={this.props.style}
            >
                {
                    <>
                        <div className={styles.popoverInfoline}>
                            <Account />
                        </div>

                        {account && balance && (
                            <div className={styles.popoverInfoline}>
                                <span
                                    className={styles.balance}
                                    title={(balance.eth / 1e18).toFixed(10)}
                                >
                                    <strong>
                                        {(balance.eth / 1e18)
                                            .toFixed(3)
                                            .slice(0, -1)}
                                    </strong>{' '}
                                    ETH
                                </span>
                                <span className={styles.balance}>
                                    <strong>{balance.ocn}</strong> OCEAN
                                </span>
                            </div>
                        )}

                        <Market.Consumer>
                            {market => (
                                <div className={styles.popoverInfoline}>
                                    {network && !market.networkMatch
                                        ? `Please connect to Custom RPC
                                           ${
                                               market.network === 'Pacific'
                                                   ? 'https://pacific.oceanprotocol.com'
                                                   : market.network === 'Nile'
                                                   ? 'https://nile.dev-ocean.com'
                                                   : market.network === 'Duero'
                                                   ? 'https://duero.dev-ocean.com'
                                                   : 'http://localhost:8545'
                                           }`
                                        : network &&
                                          `Connected to ${network} network`}
                                </div>
                            )}
                        </Market.Consumer>
                    </>
                }
            </div>
        )
    }
}
