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

export default class FromDropdown extends Component {

  static propTypes = {
    accounts: PropTypes.array,
    closeDropdown: PropTypes.func,
    dropdownOpen: PropTypes.bool,
    onSelect: PropTypes.func,
    openDropdown: PropTypes.func,
    selectedAccount: PropTypes.object,
  };

  renderListItemIcon (icon, color) {
    return <i className={`fa ${icon} fa-lg`} style={ { color } }/>
  }

  getListItemIcon (currentAccount, selectedAccount) {
    return currentAccount.address === selectedAccount.address
      ? this.renderListItemIcon('fa-check', '#02c9b1')
      : null
  }

  renderDropdown () {
    const {
      accounts,
      selectedAccount,
      closeDropdown,
      onSelect,
    } = this.props

    return (<div>
      <div
        className='send-v2__from-dropdown__close-area'
        onClick={() => closeDropdown}
      />
      <div className='send-v2__from-dropdown__list'>
        {...accounts.map(account => <AccountListItem
          className='account-list-item__dropdown'
          account={account}
          handleClick={() => {
            onSelect(account)
            closeDropdown()
          }}
          icon={this.getListItemIcon(account, selectedAccount.address)}
        />)}
      </div>
    </div>)
  }

  render () {
    const {
      selectedAccount,
      openDropdown,
      dropdownOpen,
    } = this.props
    console.log(`&*& openDropdown`, openDropdown);
    console.log(`&*& dropdownOpen`, dropdownOpen);
    return <div className='send-v2__from-dropdown'>
      <AccountListItem
        account={selectedAccount}
        handleClick={openDropdown}
        icon={this.renderListItemIcon('fa-caret-down', '#dedede')}
      />
      {dropdownOpen && this.renderDropdown()},
    </div>
  }

}

FromDropdown.contextTypes = {
  t: PropTypes.func,
}