import React from 'react';

export default class ScrollTop extends React.Component {
  scrollListener = ::this.scrollListener;

  state = { showTop: false, showBottom: false };

  componentDidMount() {
    window.addEventListener('scroll', this.scrollListener);
  }

  scrollListener() {
    const showBottom = window.innerHeight + window.scrollY < document.body.offsetHeight;

    this.setState({
      showTop: window.pageYOffset > 0 ? true : false,
      showBottom: showBottom,
    });
  }

  render() {
    return (
      <div className="scroll-to-top">
        {this.state.showTop && (
          <i
            className="scroll-to-top__icon scroll-to-top__icon--top"
            onClick={() => window.scrollTo(0, 0)}
          />
        )}

        {this.state.showBottom && (
          <i
            className="scroll-to-top__icon scroll-to-top__icon--bottom"
            onClick={() => window.scrollTo(0, document.body.scrollHeight)}
          />
        )}
      </div>
    );
  }
}
