import React, { Component } from 'react'
import TableHead from './TableHead'
import TableRow from './TableRow'
import FaBitcoin from 'react-icons/lib/fa/bitcoin';
import sort from '../helpers/sort'
import _ from 'lodash'

export class List extends Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  // Turns numbers string in currency [] into numbers for proper sorting
  toNumbers(arr) {
    arr.map(e => {
      for (var prop in e) {
        if (_.toNumber(e[prop])) {
          e[prop] = _.toNumber(e[prop])
        }
      }
    })
    return arr
  }
  sortCoins(currencies, criteria, asc) {
    return sort(currencies, criteria, asc)
  }
  render() {
    // Abort if currency data is not yet fetched
    if (!this.props.currencies) {
      return null
    }
    // FIXME: check if this.props.currencies sorting already exist!
    let sorted = []
    sorted = _.cloneDeep(this.props.currencies)
    this.toNumbers(sorted)
    // Sorts by currencies, active criteria, ascending
    sorted = this.sortCoins(sorted, this.props.sorting.active, this.props.sorting[this.props.sorting.active].asc)
    if (this.props.currencies === undefined) {
      return null
    }

    return (<div className="row">
              <div className="col-12">
                <table className="table table-striped table-hover">
                  <TableHead sorting={ this.props.sorting } onTableHeadClick={ this.props.onTableHeadClick } />
                  <tbody>
                    { sorted.map(e => {
                        return (<TableRow key={ e.name } data={ e } onTableRowClick={ this.props.onTableRowClick } />)
                      }) }
                  </tbody>
                </table>
              </div>
            </div>)
  }
}


export default List