import React from 'react';
import { connect } from 'react-redux'
import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import FontIcon from 'material-ui/FontIcon'
import { Row, Col } from 'react-flexbox-grid/lib/index'
import { DescriptionList, DescriptionTitle, DescriptionData} from '../../elements/dl'
import QRCode from 'qrcode.react'
import log from 'loglevel'
import Immutable from 'immutable'
import { cardSpace } from '../../lib/styles'
import { gotoScreen } from '../../store/screenActions'

const Render = ({account, createTx}) => {

    const value = (account.get('balance') ? account.get('balance').getEther() : '?') + ' Ether';

    return (
        <Card style={cardSpace}>
            <CardHeader
                title={'Address: ' + account.get('id')}
                subtitle={value}
                actAsExpander={true}
                showExpandableButton={true}
            />
            <CardActions>
                <FlatButton label="Send"
                            onClick={createTx}
                            icon={<FontIcon className="fa fa-arrow-circle-o-right" />}/>
            </CardActions>
            <CardText expandable={true}>
                <Row>
                    <Col xs={8}>
                        <DescriptionList>
                            <DescriptionTitle>Address:</DescriptionTitle>
                            <DescriptionData>{account.get('id')}</DescriptionData>

                            <DescriptionTitle>Sent Transactions:</DescriptionTitle>
                            <DescriptionData>{account.get('txcount') || '0'}</DescriptionData>

                            <DescriptionTitle>Ether Balance:</DescriptionTitle>
                            <DescriptionData>{value}</DescriptionData>

                        </DescriptionList>
                    </Col>
                    <Col xs={4} md={2} mdOffset={2}>
                        <QRCode value={account.get('id')} />
                    </Col>
                </Row>
            </CardText>
        </Card>
    )
};

const AccountShow = connect(
    (state, ownProps) => {
        return {
        }
    },
    (dispatch, ownProps) => {
        return {
            createTx: () => {
                const account = ownProps.account;
                log.debug('create tx from', account.get('id'));
                dispatch(gotoScreen('create-tx', account))
            }
        }
    }
)(Render);

export default AccountShow
@@ -563,16 +563,222 @@
 tions'%0A%0A
+const TokenRow = (%7Btoken%7D) =%3E %7B%0A    const balance = token.get('balance') ? token.get('balance').getDecimalized() : '0'%0A%0A    return (%0A        %3Cdiv%3E%3Cspan%3E%7Bbalance%7D %7Btoken.get('symbol')%7D%3C/span%3E%3C/div%3E%0A    )%0A%7D%0A%0A
 const Re
@@ -803,16 +803,24 @@
 createTx
+, tokens
 %7D) =%3E %7B%0A
@@ -2023,32 +2023,328 @@
 scriptionData%3E%0A%0A
+                            %3CDescriptionTitle%3EToken Balances:%3C/DescriptionTitle%3E%0A                            %3CDescriptionData%3E%7Baccount.get('tokens')%0A                                                    .map( (tok) =%3E %3CTokenRow token=%7Btok%7D /%3E )%7D%0A                                %3C/DescriptionData%3E%0A%0A
                 

add display for token bals