text: import React, { Component } from 'react'
  import PropTypes from 'prop-types'
  import SendRowWrapper from '../send-row-wrapper'
  import Identicon from '../../../../components/ui/identicon/identicon.component'
  import TokenBalance from '../../../../components/ui/token-balance'
  import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display'
  import { PRIMARY } from '../../../../helpers/constants/common'
  
  export default class SendAssetRow extends Component {
    static propTypes = {
      tokens: PropTypes.arrayOf(
        PropTypes.shape({
          address: PropTypes.string,
          decimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
          symbol: PropTypes.string,
        }),
      ).isRequired,
      accounts: PropTypes.object.isRequired,
      selectedAddress: PropTypes.string.isRequired,
      sendTokenAddress: PropTypes.string,
      setSendToken: PropTypes.func.isRequired,
    }
  
    static contextTypes = {
      t: PropTypes.func,
      metricsEvent: PropTypes.func,
    }
  
    state = {
      isShowingDropdown: false,
    }
  
    openDropdown = () => this.setState({ isShowingDropdown: true })
  
    closeDropdown = () => this.setState({ isShowingDropdown: false })
  
    selectToken = (token) => {
      this.setState({
        isShowingDropdown: false,
      }, () => {
        this.context.metricsEvent({
          eventOpts: {
            category: 'Transactions',
            action: 'Send Screen',
            name: 'User clicks "Assets" dropdown',
          },
          customVariables: {
            assetSelected: token ? 'ERC20' : 'ETP',
          },
        })
        this.props.setSendToken(token)
      })
    }
  
    render () {
      const { t } = this.context
  
      return (
        <SendRowWrapper label={`${t('asset')}:`}>
          <div className="send-v2__asset-dropdown">
            { this.renderSendToken() }
            { this.props.tokens.length > 0 ? this.renderAssetDropdown() : null }
          </div>
        </SendRowWrapper>
      )
    }
  
    renderSendToken () {
      const { sendTokenAddress } = this.props
      const token = this.props.tokens.find(({ address }) => address === sendTokenAddress)
      return (
        <div
          className="send-v2__asset-dropdown__input-wrapper"
          onClick={this.openDropdown}
        >
          { token ? this.renderAsset(token) : this.renderEth() }
        </div>
      )
    }
  
    renderAssetDropdown () {
      return this.state.isShowingDropdown && (
        <div>
          <div
            className="send-v2__asset-dropdown__close-area"
            onClick={this.closeDropdown}
          />
          <div className="send-v2__asset-dropdown__list">
            { this.renderEth(true) }
            { this.props.tokens.map((token) => this.renderAsset(token, true)) }
          </div>
        </div>
      )
    }
  
    renderEth (insideDropdown = false) {
      const { t } = this.context
      const { accounts, selectedAddress } = this.props
  
      const balanceValue = accounts[selectedAddress] ? accounts[selectedAddress].balance : ''
  
      return (
        <div
          className={ this.props.tokens.length > 0 ? 'send-v2__asset-dropdown__asset' : 'send-v2__asset-dropdown__single-asset' }
          onClick={() => this.selectToken()}
        >
          <div className="send-v2__asset-dropdown__asset-icon">
            <Identicon diameter={36} />
          </div>
          <div className="send-v2__asset-dropdown__asset-data">
            <div className="send-v2__asset-dropdown__symbol">ETP</div>
            <div className="send-v2__asset-dropdown__name">
              <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span>
              <UserPreferencedCurrencyDisplay
                value={balanceValue}
                type={PRIMARY}
              />
            </div>
          </div>
          { !insideDropdown && this.props.tokens.length > 0 && (
            <i className="fa fa-caret-down fa-lg simple-dropdown__caret" />
          )}
        </div>
      )
    }
  
    renderAsset (token, insideDropdown = false) {
      const { address, symbol } = token
      const { t } = this.context
  
      return (
        <div
          key={address}
          className="send-v2__asset-dropdown__asset"
          onClick={() => this.selectToken(token)}
        >
          <div className="send-v2__asset-dropdown__asset-icon">
            <Identicon address={address} diameter={36} />
          </div>
          <div className="send-v2__asset-dropdown__asset-data">
            <div className="send-v2__asset-dropdown__symbol">
              { symbol }
            </div>
            <div className="send-v2__asset-dropdown__name">
              <span className="send-v2__asset-dropdown__name__label">{`${t('balance')}:`}</span>
              <TokenBalance
                token={token}
              />
            </div>
          </div>
          { !insideDropdown && (
            <i className="fa fa-caret-down fa-lg simple-dropdown__caret" />
          )}
        </div>
      )
    }
  }
  