content: import React from 'react';
  import PropTypes from 'prop-types';
  import NavigationItem from './navigation_item';
  import { footerContent } from '../custom';
  
  function getAllInSectionFromChild(headings, idx) {
    for (var i = idx; i > 0; i--) {
      if (headings[i].depth === 2) {
        return getAllInSection(headings, i);
      }
    }
  }
  
  function getAllInSection(headings, idx) {
    var activeHeadings = [];
    for (var i = idx + 1; i < headings.length; i++) {
      if (headings[i].depth === 3) {
        activeHeadings.push(headings[i].children[0].value);
      } else if (headings[i].depth === 2) {
        break;
      }
    }
    return activeHeadings;
  }
  
  export default class Navigation extends React.PureComponent {
    static propTypes = {
      ast: PropTypes.object.isRequired,
      activeSection: PropTypes.string,
      navigationItemClicked: PropTypes.func.isRequired
    }
    render() {
      var activeHeadings = [];
      let headings = this.props.ast.children
        .filter(child => child.type === 'heading');
  
      if (this.props.activeSection) {
  
        let activeHeadingIdx = headings.findIndex(heading =>
          heading.children[0].value === this.props.activeSection);
        let activeHeading = headings[activeHeadingIdx];
  
        if (activeHeading.depth === 3) {
          activeHeadings = [this.props.activeSection]
            .concat(getAllInSectionFromChild(headings, activeHeadingIdx));
        }
  
        // this could potentially have children, try to find them
        if (activeHeading.depth === 2) {
          activeHeadings = [this.props.activeSection]
            .concat(getAllInSection(headings, activeHeadingIdx));
        }
      }
  
      activeHeadings = activeHeadings.reduce((memo, heading) => {
        memo[heading] = true;
        return memo;
      }, {});
  
      return (<div className='pad0x small'>
        {headings
          .map((child, i) => {
            let sectionName = child.children[0].value;
            var active = sectionName === this.props.activeSection;
            if (child.depth === 1) {
              return (<div key={i}
                onClick={this.navigationItemClicked}
                className='small pad0x quiet space-top1'>{sectionName}</div>);
            } else if (child.depth === 2) {
              return (<NavigationItem
                key={i}
                href={`#${child.data.id}`}
                onClick={this.props.navigationItemClicked}
                active={active}
                sectionName={sectionName} />);
            } else if (child.depth === 3) {
              if (activeHeadings.hasOwnProperty(sectionName)) {
                return (<div
                  key={i}
                  className='space-left1'>
                    <NavigationItem
                      href={`#${child.data.id}`}
                      onClick={this.props.navigationItemClicked}
                      active={active}
                      sectionName={sectionName} />
                  </div>);
              }
            }
          })}
          {footerContent}
      </div>);
    }
  }
  