import React, { Component } from 'react';

export default class SearchTable extends Component {

  constructor(props) {
    super(props);

    this.state = {
      equities         : props.equities,
      defaultNumResults: 30,
      numResults       : 30,
    };

    this.registerScrollSpy();
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.isScrolledToBottom);
  }

  registerScrollSpy = () => {
    window.addEventListener('scroll', this.isScrolledToBottom);
  }

  isScrolledToBottom = () => {
    const offset = 5;
    const scrollTop = (document.documentElement && document.documentElement.scrollTop)
      || document.body.scrollTop;
    const scrollHeight = (document.documentElement && document.documentElement.scrollHeight)
      || document.body.scrollHeight;
    const scrolledToBottom = (scrollTop + window.innerHeight + offset) >= scrollHeight;

    if (scrolledToBottom) {
      this.showTenMoreEquities();
    }
  }

  showTenMoreEquities = () => {
    const numResults = this.state.numResults;
    this.setState({
      show      : false,
      numResults: numResults + 10,
    });
  }

  render() {
    const numResults = this.state.numResults;
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Navn</th>
              <th className="hide-on-500px">Oppdatert</th>
              <th>Siste dag</th>
              <th>Kurs</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {
              this.state.equities
                .map((equity, i) => {
                  if (i < numResults) {
                    return (
                      <SearchEquity
                        key={i}
                        showModal={() => this.showModal(equity)}
                        equity={equity}
                      />
                    );
                  } return null;
                })
            }
          </tbody>
        </table>
      </div>
    );
  }
}