import React from "react";
import OrderbookRow from "./OrderbookRow";
import tt from 'counterpart';
import { LIQUID_TOKEN, DEBT_TOKEN_SHORT, CURRENCY_SIGN } from 'app/client_config';

export default class Orderbook extends React.Component {
    constructor() {
        super();

        this.state = {
            buyIndex: 0,
            sellIndex: 0,
            animate: false
        }
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
            animate: true
            });
        }, 2000);
    }

    _setBuySellPage(back) {
        const indexKey = this.props.side === "bids" ? "buyIndex" : "sellIndex";

        let newIndex = this.state[indexKey] + (back ? 10 : -10);

        newIndex = Math.min(Math.max(0, newIndex), this.props.orders.length - 10);

        const newState = {};
        newState[indexKey] = newIndex;
        // Disable animations while paging
        if (newIndex !== this.state[indexKey]) {
            newState.animate = false;
        }
        // Reenable animatons after paging complete
        this.setState(newState, () => {
            this.setState({animate: true})
        });
    }

    renderBuySellHeader() {
        const buy = this.props.side === "bids";

        return (
          <thead>
            <tr>
              <th>{buy ? tt('market_jsx.total_DEBT_TOKEN_SHORT_CURRENCY_SIGN', {DEBT_TOKEN_SHORT, CURRENCY_SIGN}) : tt('g.price')}</th>
              <th>{buy ? `${DEBT_TOKEN_SHORT} (${CURRENCY_SIGN})` : LIQUID_TOKEN}</th>
              <th>{buy ? LIQUID_TOKEN : `${DEBT_TOKEN_SHORT} (${CURRENCY_SIGN})`}</th>
              <th>{buy ? tt('g.price') : tt('market_jsx.total_DEBT_TOKEN_SHORT_CURRENCY_SIGN', {DEBT_TOKEN_SHORT, CURRENCY_SIGN})}</th>
            </tr>
          </thead>
        );
    }

    renderOrdersRows() {
        const {orders, side} = this.props;
        const buy = side === "bids";

        if (!orders.length) {
            return null;
        }
        const {buyIndex, sellIndex} = this.state;

        let total = 0;
        return orders
        .map((order, index) => {
            total += order.getSBDAmount();
            if (index >= (buy ? buyIndex : sellIndex) && index < ((buy ? buyIndex : sellIndex) + 10)) {
                return (
                  <OrderbookRow
                      onClick={this.props.onClick}
                      animate={this.state.animate}
                      key={side + order.getStringSBD() + order.getStringPrice()}
                      index={index}
                      order={order}
                      side={side}
                      total={total}
                    />
                );
            }
            return null;
        }).filter((a) => {
            return !!a;
        });
    }

    render() {
        const {orders} = this.props;
        const buy = this.props.side === "bids";
        const {buyIndex, sellIndex} = this.state;

        const currentIndex = buy ? buyIndex : sellIndex;

        return (
          <div>
            <table className="Market__orderbook">
              {this.renderBuySellHeader()}
              <tbody>
                {this.renderOrdersRows()}
              </tbody>
            </table>
            <nav>
              <ul className="pager">
                <li>
                  <div className={"button tiny hollow " + (buy ? "float-left" : "float-left") + (currentIndex === 0 ? " disabled" : "")} onClick={this._setBuySellPage.bind(this, false)} aria-label="Previous">
                    <span aria-hidden="true">&larr; {buy ? tt('market_jsx.higher') : tt('market_jsx.lower')}</span>
                  </div>
                </li>
                <li>
                  <div className={"button tiny hollow " + (buy ? "float-right" : "float-right") + (currentIndex >= (orders.length - 10) ? " disabled" : "")} onClick={this._setBuySellPage.bind(this, true)} aria-label="Next">
                    <span aria-hidden="true">{buy ? tt('market_jsx.lower') : tt('market_jsx.higher')} &rarr;</span>
                  </div>
                </li>
              </ul>
            </nav>
          </div>

        )
    }
}
