import React, { Component } from 'react'
import PropTypes from 'prop-types'
import AccountListItem from '../../account-list-item'

export default class SendDropdownList extends Component {

  static propTypes = {
    accounts: PropTypes.array,
    closeDropdown: PropTypes.func,
    onSelect: PropTypes.func,
    activeAddress: PropTypes.string,
  }

  static contextTypes = {
    t: PropTypes.func,
  }

  getListItemIcon (accountAddress, activeAddress) {
    return accountAddress === activeAddress
      ? <i className="fa fa-check fa-lg" style={ { color: '#02c9b1' } } />
      : null
  }

  render () {
    const {
      accounts,
      closeDropdown,
      onSelect,
      activeAddress,
    } = this.props

    return (
      <div>
        <div
          className="send-v2__from-dropdown__close-area"
          onClick={() => closeDropdown()}
        />
        <div className="send-v2__from-dropdown__list">
          {accounts.map((account, index) => (
            <AccountListItem
              account={account}
              className="account-list-item__dropdown"
              handleClick={() => {
                onSelect(account)
                closeDropdown()
              }}
              icon={this.getListItemIcon(account.address, activeAddress)}
              key={`send-dropdown-account-#${index}`}
            />
          ))}
        </div>
      </div>
    )
  }

}