import React, { Component } from 'react';
import { numberWithDelimiter } from '../../../utilities';
import PropTypes from 'prop-types';
import Pagination from 'material-ui-pagination';
import isEqual from 'lodash.isequal';

export default class OrderBookTable extends Component {

  constructor(props) {
    super(props);
    this.state = {
      perPage: 10,
      displayedData: [],
      displayedPage: 0,
      previousTable: [],
      currentData: []
    };
  }

  emptyTableRow(i) {
    return (
      <tr key={i} className="blank-row hidden-xs">
        <td />
        <td />
        <td />
        <td />
      </tr>
    );
  }

  renderOrderTable(orders, isBuy) {
    if (orders) {
      const prec = this.props.bidCurrency === 'XBT' || this.props.bidCurrency === 'ETH' ? 8 : 2;
      return orders.map((order, i) => {
        const newOrder = JSON.stringify(this.props.data[i]) !== JSON.stringify(this.state.previousTable[i]);
        const price = parseFloat(order[0]);
        const amount = order[1].volume;

        if (!order) {
          return this.emptyTableRow(i);
        }

        if (isBuy) {
          return (
            <tr key={i} className={( newOrder ? 'updatedOrderTr' : '' )} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}>
              <td>{order[1].user_depth}</td>
              <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td>
              <td>{amount}</td>
              <td>{price.toFixed(prec)}</td>
            </tr>
          );
        } else {
          return (
            <tr key={i} className={( newOrder ? 'updatedOrderTr' : '' )} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}>
              <td>{price.toFixed(prec)}</td>
              <td>{amount}</td>
              <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td>
              <td>{order[1].user_depth}</td>
            </tr>
          );
        }
      });
    }
  }

  componentWillReceiveProps(props) {
    this.setState({previousTable: this.props.data});
    this.setState({currentData: props.data});
    if (props.data && props.data.length || this.props.data.length) this.updateDisplayedData(props.data, this.state.displayedPage);
  }

  updateDisplayedData(data, displayedPage) {
    const offset = displayedPage * this.state.perPage;
    this.setState({
      displayedData: data.slice(offset, offset + this.state.perPage),
      pageCount: Math.ceil(data.length / this.state.perPage),
      displayedPage
    });
  }

  changePage = (displayedPage) => {
    this.updateDisplayedData(this.props.data, displayedPage);
  }

  render() {
    return (
      <div className="buySellOrderContainer">
        <div className="row">
          <div className="col-md-12">
            <h4 className="buySellOrderTitle">{this.props.title}</h4>
          </div>
        </div>
        <table className="table orderbook">
          <thead>
            {this.props.isBuy ? (
              <tr>
                <th>Price depth</th>
                <th>Total Cost</th>
                <th>Amount (NCCO)</th>
                <th>Price ({this.props.bidCurrency})</th>
              </tr>
            ) : (
              <tr>
                <th>Price ({this.props.bidCurrency})</th>
                <th>Amount (NCCO)</th>
                <th>Total Cost</th>
                <th>Price depth</th>
              </tr>
            )}
          </thead>
          <tbody>
            {this.renderOrderTable(this.state.displayedData, this.props.isBuy)}
          </tbody>
        </table>
        <Pagination
          total={this.state.pageCount}
          display={10}
          styleRoot={{display: 'flex', justifyContent: 'center'}}
          current={this.state.displayedPage + 1}
          onChange={(e) => this.changePage(--e)}
        />
      </div>
    );
  }
}

OrderBookTable.propTypes = {
  data: PropTypes.array.isRequired,
  title: PropTypes.string.isRequired,
  bidCurrency: PropTypes.string.isRequired,
  isBuy: PropTypes.bool.isRequired,
  populateOrderForm: PropTypes.func.isRequired
};