import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Link } from 'react-router-dom';

let first = true;
class Page extends React.Component {

  constructor(props) {
    super(props);
    this.onResize = this.onResize.bind(this);
  }

  componentDidMount() {

    // Re-highlight with Prism
    Prism.highlightAll();

    // Display li with bullets
    this.div = $('.page');
    this.div.find('ul').addClass('browser-default');

    this.onResize();
    $(window).on('resize', this.onResize);
  }

  /**
   * Fix pagination at bottom if content height < window height
   */
  onResize() {
    if($('.main').outerHeight() + $('nav').height() <= $(window).height()) {
      $('.pagination-wrapper').addClass('abs-bottom');
    }
    else {
      $('.pagination-wrapper').removeClass('abs-bottom');
    }
  }

  render() {
    const { title, content } = this.props.page;
    const { section } = this.props;
    return (
      <div className="page">
        <div className="breadcrumb-wrapper">
          <Link to='/' className="breadcrumb light-blue-text"><i className="material-icons">home</i></Link>
          <Link to={section.path} className="breadcrumb light-blue-text">{section.title}</Link>
          <span className="breadcrumb grey-text">{title}</span>
        </div>

        <h4 className="header orange-text">{title}</h4>
        <ReactMarkdown source={content} escapeHtml={false} />
      </div>
    );
  }
}

export default Page;
