const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const genAccountLink = require('../../../../../lib/account-link.js')
const { formatBalance } = require('../../../../util')

class AccountList extends Component {
    constructor (props, context) {
        super(props)
    }

    getBalance (address) {
        // Get the balance
        const { accounts } = this.props
        const balanceValue = accounts && accounts[address] ? accounts[address].balance : ''
        const formattedBalance = balanceValue ? formatBalance(balanceValue, 6) : '...'
        return formattedBalance
    }

    renderAccounts () {
        return h('div.hw-account-list', [
            h('div.hw-account-list__title_wrapper', [
                h('div.hw-account-list__title', {}, [this.context.t('selectAnAddress')]),
                h('div.hw-account-list__device', {}, ['Trezor - ETH']),
            ]),
            this.props.accounts.map((a, i) => {

                return h('div.hw-account-list__item', { key: a.address }, [
                h('span.hw-account-list__item__index', a.index + 1),
                h('div.hw-account-list__item__radio', [
                    h('input', {
                        type: 'radio',
                        name: 'selectedAccount',
                        id: `address-${i}`,
                        value: a.index,
                        onChange: (e) => this.props.onAccountChange(e.target.value),
                        checked: this.props.selectedAccount === a.index.toString(),
                    }),
                    h(
                    'label.hw-account-list__item__label',
                    {
                        htmlFor: `address-${i}`,
                    },
                    `${a.address.slice(0, 4)}...${a.address.slice(-4)}`
                    ),
                ]),
                h('span.hw-account-list__item__balance', `${this.getBalance(a.address)}`),
                h(
                    'a.hw-account-list__item__link',
                    {
                    href: genAccountLink(a.address, this.props.network),
                    target: '_blank',
                    title: this.context.t('etherscanView'),
                    },
                    h('img', { src: 'images/popout.svg' })
                ),
                ])
            }),
        ])
    }

  renderPagination () {
    return h('div.hw-list-pagination', [
      h(
        'button.btn-primary.hw-list-pagination__button',
        {
          onClick: () => this.props.getPage(-1),
        },
        `< ${this.context.t('prev')}`
      ),

      h(
        'button.btn-primary.hw-list-pagination__button',
        {
          onClick: () => this.props.getPage(1),
        },
        `${this.context.t('next')} >`
      ),
    ])
  }

  renderButtons () {
    return h('div.new-account-create-form__buttons', {}, [
      h(
        'button.btn-default.btn--large.new-account-create-form__button',
        {
          onClick: this.props.onCancel.bind(this),
        },
        [this.context.t('cancel')]
      ),

      h(
        `button.btn-primary.btn--large.new-account-create-form__button ${this.props.selectedAccount === null ? '.btn-primary--disabled' : ''}`,
        {
          onClick: this.props.onUnlockAccount.bind(this),
        },
        [this.context.t('unlock')]
      ),
    ])
  }

  render () {
    return h('div', {}, [
        this.renderAccounts(),
        this.renderPagination(),
        this.renderButtons(),
    ])
  }

}


AccountList.propTypes = {
    accounts: PropTypes.array.isRequired,
    onAccountChange: PropTypes.func.isRequired,
    getPage: PropTypes.func.isRequired,
    network: PropTypes.string,
    selectedAccount: PropTypes.string,
    history: PropTypes.object,
    onUnlockAccount: PropTypes.func,
    onCancel: PropTypes.func,
}

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

module.exports = AccountList