/**
 * Copyright (c) 2017-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */

const React = require('react');
const classNames = require('classnames');

const siteConfig = require(process.cwd() + '/siteConfig.js');

class SideNav extends React.Component {
  render() {
    return (
      <nav className="toc">
        <div className="toggleNav">
          <section className="navWrapper wrapper">
            <div className="navBreadcrumb wrapper">
              <div className="navToggle" id="navToggler"><i /></div>
              <h2>
                <i>›</i>
                <span>{this.props.current.category}</span>
              </h2>
            </div>
            <div className="navGroups">
              {this.props.contents.map(this.renderCategory, this)}
            </div>
          </section>
        </div>
        <script
          dangerouslySetInnerHTML={{
            __html: `
          var toggler = document.getElementById('navToggler');
          var nav = document.getElementById('docsNav');
          toggler.onclick = function() {
            nav.classList.toggle('docsSliderActive');
          };
        `,
          }}
        />
      </nav>
    );
  }
  renderCategory(category) {
    return (
      <div className="navGroup navGroupActive" key={category.name}>
        <h3>{this.getLocalizedCategoryString(category.name)}</h3>
        <ul>
          {category.links.map(this.renderItemLink, this)}
        </ul>
      </div>
    );
  }
  getLocalizedCategoryString(category) {
    let categoryString =
      siteConfig[this.props.language] ?
      siteConfig[this.props.language]['localized-strings'][category] || category
      : category;
    return categoryString;
  }
  getLocalizedString(metadata) {
    let localizedString =
      siteConfig[this.props.language] ?
      siteConfig[this.props.language]['localized-strings'][metadata.localized_id] || metadata.title
      : metadata.title;

    return localizedString;
  }
  getLink(metadata) {
    if (metadata.permalink) {
      if (metadata.permalink.match(/^https?:/)) {
        return metadata.permalink;
      }
      return siteConfig.baseUrl + metadata.permalink + '#content';
    }
    if (metadata.path) {
      return siteConfig.baseUrl + 'blog/' + metadata.path;
    }
    return null;
  }
  renderItemLink(link) {
    const itemClasses = classNames('navListItem', {
      navListItemActive: link.id === this.props.current.id,
    });
    const linkClasses = classNames('navItem', {
      navItemActive: link.id === this.props.current.id,
    });
    return (
      <li className={itemClasses} key={link.id}>
        <a className={linkClasses} href={this.getLink(link)}>
          {this.getLocalizedString(link)}
        </a>
      </li>
    );
  }
}
SideNav.defaultProps = {
  contents: [],
};
module.exports = SideNav;