import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import * as React from 'react';

import { ColorOption } from '../style/theme';
import { Account, Network } from '../types';

import { PaymentMethodDropdown } from './payment_method_dropdown';
import { Circle } from './ui/circle';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
import { Text } from './ui/text';

export interface PaymentMethodProps {
    account: Account;
}

export const PaymentMethod: React.StatelessComponent<PaymentMethodProps> = ({ account }) => {
    return (
        <Container padding="20px" width="100%">
            <Container marginBottom="10px">
                <Flex justify="space-between">
                    <Text
                        letterSpacing="1px"
                        fontColor={ColorOption.primaryColor}
                        fontWeight={600}
                        textTransform="uppercase"
                        fontSize="14px"
                    >
                        Payment Method
                    </Text>
                    <Flex>
                        <Circle color={ColorOption.green} diameter={8} />
                        <Container marginLeft="3px">
                            <Text fontColor={ColorOption.darkGrey} fontSize="12px">
                                MetaMask
                            </Text>
                        </Container>
                    </Flex>
                </Flex>
            </Container>
            <PaymentMethodDropdown
                accountAddress={'231312423s432'}
                accountEthBalanceInWei={new BigNumber(10500000000000000000)}
                network={Network.Mainnet}
            />
        </Container>
    );
};