import React from 'react';
import './style.less';

import RouterLink from './RouterLink';

class Sidebar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      top: 64,
      bottom: 0,
    };
  }

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

  get style() {
    return {
      top: this.state.top + 'px',
      bottom: this.state.bottom + 'px',
    };
  }

  get base() {
    return this.props.lang ? `/${this.props.lang}/` : '/';
  }

  // Fixed sidebar
  onScroll = () => {
    const { pageYOffset: offset } = window;
    this.setState({
      top: Math.max(0, 64 - offset),
    });
  };

  render() {
    const { navConfig } = this.props;
    return (
      <div className='wgoo-doc-nav' style={this.style}>
        {navConfig.map((group, index) => {
          return (
            <div key={index} className='wgoo-doc-nav__group'>
              <div className='wgoo-doc-nav__title'>{group.title}</div>
              {group.items &&
                group.items.map((item, groupIndex) => {
                  return (
                    <div key={groupIndex} className='wgoo-doc-nav__item'>
                      <RouterLink item={item} base={this.base} />
                    </div>
                  );
                })}
            </div>
          );
        })}
      </div>
    );
  }
}

export default Sidebar;